diff --git a/src/__snapshots__/areachart.stories.storyshot b/src/__snapshots__/areachart.stories.storyshot
index bdca5906fe..69c3a7a5d1 100644
--- a/src/__snapshots__/areachart.stories.storyshot
+++ b/src/__snapshots__/areachart.stories.storyshot
@@ -2,15 +2,15 @@
 
 exports[`Storyshots Components/Chart/AreaChart Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Vege-Lite area chart
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="vis_area_chart"
   />
 </div>
diff --git a/src/__snapshots__/banner.stories.storyshot b/src/__snapshots__/banner.stories.storyshot
index 9284e7c357..ee2a1db7b8 100644
--- a/src/__snapshots__/banner.stories.storyshot
+++ b/src/__snapshots__/banner.stories.storyshot
@@ -2,24 +2,24 @@
 
 exports[`Storyshots Components/Notification/Banner Error Banner 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div
-    className="sc-jSgupP lhiIpA sc-banner"
+    className="sc-eCssSg iTLdDR sc-banner"
   >
     <i
       className="fas fa-exclamation-triangle"
     />
     <div
-      className="sc-gKsewC ehdtkM"
+      className="sc-jSgupP ddDNyR"
     >
       <div
-        className="sc-fubCfw fwuLbz"
+        className="sc-iBPRYJ kSFWuu"
       >
         Error
       </div>
       <span
-        className="sc-iBPRYJ iXJrlv"
+        className="sc-gKsewC ytGHb"
       >
         There is an error.
       </span>
@@ -30,21 +30,21 @@ exports[`Storyshots Components/Notification/Banner Error Banner 1`] = `
 
 exports[`Storyshots Components/Notification/Banner Playground 1`] = `
 <div
-  className="sc-jSgupP grPkbY sc-banner"
+  className="sc-eCssSg BCWFZ sc-banner"
 >
   <i
     className="fas fa-exclamation-triangle"
   />
   <div
-    className="sc-gKsewC ehdtkM"
+    className="sc-jSgupP ddDNyR"
   >
     <div
-      className="sc-fubCfw fwuLbz"
+      className="sc-iBPRYJ kSFWuu"
     >
       Man
     </div>
     <span
-      className="sc-iBPRYJ iXJrlv"
+      className="sc-gKsewC ytGHb"
     >
       There is a success
     </span>
@@ -54,24 +54,24 @@ exports[`Storyshots Components/Notification/Banner Playground 1`] = `
 
 exports[`Storyshots Components/Notification/Banner Success Banner 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div
-    className="sc-jSgupP grPkbY sc-banner"
+    className="sc-eCssSg BCWFZ sc-banner"
   >
     <i
       className="fas fa-exclamation-triangle"
     />
     <div
-      className="sc-gKsewC ehdtkM"
+      className="sc-jSgupP ddDNyR"
     >
       <div
-        className="sc-fubCfw fwuLbz"
+        className="sc-iBPRYJ kSFWuu"
       >
         Success
       </div>
       <span
-        className="sc-iBPRYJ iXJrlv"
+        className="sc-gKsewC ytGHb"
       >
         There is a success.
       </span>
@@ -82,24 +82,24 @@ exports[`Storyshots Components/Notification/Banner Success Banner 1`] = `
 
 exports[`Storyshots Components/Notification/Banner Warning Banner 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div
-    className="sc-jSgupP dTlNXc sc-banner"
+    className="sc-eCssSg hOeTmF sc-banner"
   >
     <i
       className="fas fa-exclamation-triangle"
     />
     <div
-      className="sc-gKsewC ehdtkM"
+      className="sc-jSgupP ddDNyR"
     >
       <div
-        className="sc-fubCfw fwuLbz"
+        className="sc-iBPRYJ kSFWuu"
       >
         Warning
       </div>
       <span
-        className="sc-iBPRYJ iXJrlv"
+        className="sc-gKsewC ytGHb"
       >
         There is a warning.
       </span>
diff --git a/src/__snapshots__/barchart.stories.storyshot b/src/__snapshots__/barchart.stories.storyshot
index 34154b3d36..d1269b1840 100644
--- a/src/__snapshots__/barchart.stories.storyshot
+++ b/src/__snapshots__/barchart.stories.storyshot
@@ -2,42 +2,42 @@
 
 exports[`Storyshots Components/Chart/BarChart Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Vertical Stacked Bar Chart Demo 
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="vis_vertical_stacked"
   />
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Horizontal Stacked Bar Chart Demo 
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="vis_horizontal_stacked"
   />
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Vertical Bar Chart Demo 
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="vis_vertical"
   />
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Horizontal Bar Chart Demo 
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="vis_horizontal"
   />
 </div>
diff --git a/src/__snapshots__/breadcrumb.stories.storyshot b/src/__snapshots__/breadcrumb.stories.storyshot
index f3255f7476..49787a985a 100644
--- a/src/__snapshots__/breadcrumb.stories.storyshot
+++ b/src/__snapshots__/breadcrumb.stories.storyshot
@@ -2,18 +2,18 @@
 
 exports[`Storyshots Components/Navigation/Breadcrumb Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Default Breadcrumb 
   </h3>
   <ol
-    className="sc-pFZIQ hSRzyd sc-breadcrumb"
+    className="sc-fubCfw gUlWvG sc-breadcrumb"
   >
     <li
-      className="sc-jrAGrp bgFHbv sc-breadcrumb_item"
+      className="sc-pFZIQ debfJL sc-breadcrumb_item"
     >
       <a
         href="home"
@@ -22,14 +22,14 @@ exports[`Storyshots Components/Navigation/Breadcrumb Default 1`] = `
       </a>
     </li>
     <li
-      className="sc-kEjbxe TTJAs sc-breadcrumb_separator"
+      className="sc-jrAGrp jCbtoL sc-breadcrumb_separator"
     >
       <i
         className="fas fa-chevron-right"
       />
     </li>
     <li
-      className="sc-jrAGrp bgFHbv sc-breadcrumb_item"
+      className="sc-pFZIQ debfJL sc-breadcrumb_item"
     >
       <label
         href="clusters"
@@ -38,14 +38,14 @@ exports[`Storyshots Components/Navigation/Breadcrumb Default 1`] = `
       </label>
     </li>
     <li
-      className="sc-kEjbxe TTJAs sc-breadcrumb_separator"
+      className="sc-jrAGrp jCbtoL sc-breadcrumb_separator"
     >
       <i
         className="fas fa-chevron-right"
       />
     </li>
     <li
-      className="sc-jrAGrp bgFHbv sc-breadcrumb_item"
+      className="sc-pFZIQ debfJL sc-breadcrumb_item"
     >
       <a
         href="cluster"
@@ -54,14 +54,14 @@ exports[`Storyshots Components/Navigation/Breadcrumb Default 1`] = `
       </a>
     </li>
     <li
-      className="sc-kEjbxe TTJAs sc-breadcrumb_separator"
+      className="sc-jrAGrp jCbtoL sc-breadcrumb_separator"
     >
       <i
         className="fas fa-chevron-right"
       />
     </li>
     <li
-      className="sc-jrAGrp bgFHbv sc-breadcrumb_item"
+      className="sc-pFZIQ debfJL sc-breadcrumb_item"
     >
       <label
         href="nodes"
@@ -70,14 +70,14 @@ exports[`Storyshots Components/Navigation/Breadcrumb Default 1`] = `
       </label>
     </li>
     <li
-      className="sc-kEjbxe TTJAs sc-breadcrumb_separator"
+      className="sc-jrAGrp jCbtoL sc-breadcrumb_separator"
     >
       <i
         className="fas fa-chevron-right"
       />
     </li>
     <li
-      className="sc-jrAGrp bgFHbv sc-breadcrumb_item"
+      className="sc-pFZIQ debfJL sc-breadcrumb_item"
     >
       <a
         href="node"
@@ -87,14 +87,14 @@ exports[`Storyshots Components/Navigation/Breadcrumb Default 1`] = `
       </a>
     </li>
     <li
-      className="sc-kEjbxe TTJAs sc-breadcrumb_separator"
+      className="sc-jrAGrp jCbtoL sc-breadcrumb_separator"
     >
       <i
         className="fas fa-chevron-right"
       />
     </li>
     <li
-      className="sc-jrAGrp bgFHbv sc-breadcrumb_item"
+      className="sc-pFZIQ debfJL sc-breadcrumb_item"
     >
       <a
         href="volumes"
@@ -103,14 +103,14 @@ exports[`Storyshots Components/Navigation/Breadcrumb Default 1`] = `
       </a>
     </li>
     <li
-      className="sc-kEjbxe TTJAs sc-breadcrumb_separator"
+      className="sc-jrAGrp jCbtoL sc-breadcrumb_separator"
     >
       <i
         className="fas fa-chevron-right"
       />
     </li>
     <li
-      className="sc-jrAGrp bYWMtL sc-breadcrumb_item"
+      className="sc-pFZIQ fmXiyj sc-breadcrumb_item"
     >
       <label
         title="volume_longlonglonglonglonglonglonglonglong"
diff --git a/src/__snapshots__/button.stories.storyshot b/src/__snapshots__/button.stories.storyshot
index 187bacf0bc..96037f9248 100644
--- a/src/__snapshots__/button.stories.storyshot
+++ b/src/__snapshots__/button.stories.storyshot
@@ -2,28 +2,28 @@
 
 exports[`Storyshots Components/Button Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl storybook-button"
+  className="sc-bdfBwQ gFQERV storybook-button"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Button Default
   </h3>
   <button
-    className="sc-bqyKva kZELOW sc-button"
+    className="sc-dQppl gAXfRJ sc-button"
     disabled={false}
     size="smaller"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           Smaller
         </span>
@@ -31,20 +31,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva cCYwKy sc-button"
+    className="sc-dQppl dDQpFl sc-button"
     disabled={false}
     size="small"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           Small
         </span>
@@ -52,7 +52,7 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva iTJbnG sc-button"
+    className="sc-dQppl ebkNMt sc-button"
     data-cy="default_button"
     disabled={false}
     size="base"
@@ -60,13 +60,13 @@ exports[`Storyshots Components/Button Default 1`] = `
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           default
         </span>
@@ -74,20 +74,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva dKAgHb sc-button"
+    className="sc-dQppl kVQnZo sc-button"
     disabled={false}
     size="large"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           Large
         </span>
@@ -95,20 +95,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva lcpyWu sc-button"
+    className="sc-dQppl ctPsRF sc-button"
     disabled={false}
     size="larger"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           Larger
         </span>
@@ -116,25 +116,25 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Button Variant
   </h3>
   <button
-    className="sc-bqyKva iTJbnG sc-button"
+    className="sc-dQppl ebkNMt sc-button"
     disabled={false}
     size="base"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           base
         </span>
@@ -142,20 +142,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva hKplzc sc-button"
+    className="sc-dQppl LYfXL sc-button"
     disabled={false}
     size="base"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           secondary
         </span>
@@ -163,20 +163,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva fttbeB sc-button"
+    className="sc-dQppl jIbosm sc-button"
     disabled={false}
     size="base"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           healthy
         </span>
@@ -184,20 +184,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva bHFUnw sc-button"
+    className="sc-dQppl kMeQwD sc-button"
     disabled={false}
     size="base"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           warning
         </span>
@@ -205,20 +205,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva gmmxKE sc-button"
+    className="sc-dQppl dIBdhv sc-button"
     disabled={false}
     size="base"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           danger
         </span>
@@ -226,12 +226,12 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Button Outlined
   </h3>
   <button
-    className="sc-bqyKva bjrIqZ sc-button"
+    className="sc-dQppl jQGaAu sc-button"
     disabled={false}
     onClick={[Function]}
     size="base"
@@ -239,13 +239,13 @@ exports[`Storyshots Components/Button Default 1`] = `
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           Hello
         </span>
@@ -253,12 +253,12 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Button Disabled
   </h3>
   <button
-    className="sc-bqyKva bwSabE sc-button"
+    className="sc-dQppl iOysKn sc-button"
     disabled={true}
     onClick={[Function]}
     size="base"
@@ -266,13 +266,13 @@ exports[`Storyshots Components/Button Default 1`] = `
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           Hello
         </span>
@@ -280,7 +280,7 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva gCXsyX sc-button"
+    className="sc-dQppl PGmtc sc-button"
     disabled={true}
     onClick={[Function]}
     size="base"
@@ -288,13 +288,13 @@ exports[`Storyshots Components/Button Default 1`] = `
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           secondary
         </span>
@@ -302,7 +302,7 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva elcSoi sc-button"
+    className="sc-dQppl fxlcsh sc-button"
     disabled={true}
     onClick={[Function]}
     size="base"
@@ -310,13 +310,13 @@ exports[`Storyshots Components/Button Default 1`] = `
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           danger
         </span>
@@ -324,20 +324,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva cIBxjO sc-button"
+    className="sc-dQppl cywuZN sc-button"
     disabled={true}
     size="larger"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="larger"
         >
           <i
@@ -345,7 +345,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -353,45 +353,45 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Button Link
   </h3>
   <a
-    className="sc-fFubgz jqjXsW sc-button"
+    className="sc-fodVxV gSZtnd sc-button"
     disabled={false}
     href="/"
     size="base"
     title=""
   >
     <span
-      className="sc-hBEYos jaVYGW"
+      className="sc-kstrdz ZegCk"
     >
       Hello
     </span>
   </a>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Button Loading
   </h3>
   <button
-    className="sc-bqyKva ixLUty sc-button"
+    className="sc-dQppl eTqvBV sc-button"
     disabled={true}
     size="base"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <div
-        className="sc-iqHYGH gSBJUA sc-loader"
+        className="sc-kEjbxe kicGPR sc-loader"
         color="#87929D"
         size="base"
       >
         <span
-          className="sc-dQppl cbDpju"
+          className="sc-crrsfI bkmyhs"
         >
           <svg
             height="50"
@@ -513,7 +513,7 @@ exports[`Storyshots Components/Button Default 1`] = `
         className="sc-button-text"
       >
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -521,25 +521,25 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Button Text Icon
   </h3>
   <button
-    className="sc-bqyKva kZELOW sc-button"
+    className="sc-dQppl gAXfRJ sc-button"
     disabled={false}
     size="smaller"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz gLcDls"
+          className="sc-bqyKva klTaQG"
           size="smaller"
         >
           <i
@@ -547,7 +547,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           Smaller
         </span>
@@ -555,20 +555,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva cCYwKy sc-button"
+    className="sc-dQppl dDQpFl sc-button"
     disabled={false}
     size="small"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz gLcDls"
+          className="sc-bqyKva klTaQG"
           size="small"
         >
           <i
@@ -576,7 +576,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           Small
         </span>
@@ -584,20 +584,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva iTJbnG sc-button"
+    className="sc-dQppl ebkNMt sc-button"
     disabled={false}
     size="base"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz gLcDls"
+          className="sc-bqyKva klTaQG"
           size="base"
         >
           <i
@@ -605,7 +605,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           default
         </span>
@@ -613,20 +613,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva dKAgHb sc-button"
+    className="sc-dQppl kVQnZo sc-button"
     disabled={false}
     size="large"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz gLcDls"
+          className="sc-bqyKva klTaQG"
           size="large"
         >
           <i
@@ -634,7 +634,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           Large
         </span>
@@ -642,20 +642,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva lcpyWu sc-button"
+    className="sc-dQppl ctPsRF sc-button"
     disabled={false}
     size="larger"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz gLcDls"
+          className="sc-bqyKva klTaQG"
           size="larger"
         >
           <i
@@ -663,7 +663,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           Larger
         </span>
@@ -671,25 +671,25 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Icon Button
   </h3>
   <button
-    className="sc-bqyKva kZELOW sc-button"
+    className="sc-dQppl gAXfRJ sc-button"
     disabled={false}
     size="smaller"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="smaller"
         >
           <i
@@ -697,7 +697,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -705,20 +705,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva cCYwKy sc-button"
+    className="sc-dQppl dDQpFl sc-button"
     disabled={false}
     size="small"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="small"
         >
           <i
@@ -726,7 +726,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -734,20 +734,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva iTJbnG sc-button"
+    className="sc-dQppl ebkNMt sc-button"
     disabled={false}
     size="base"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="base"
         >
           <i
@@ -755,7 +755,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -763,20 +763,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva dKAgHb sc-button"
+    className="sc-dQppl kVQnZo sc-button"
     disabled={false}
     size="large"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="large"
         >
           <i
@@ -784,7 +784,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -792,20 +792,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva lcpyWu sc-button"
+    className="sc-dQppl ctPsRF sc-button"
     disabled={false}
     size="larger"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="larger"
         >
           <i
@@ -813,7 +813,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -821,25 +821,25 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Icon Button Inverted
   </h3>
   <button
-    className="sc-bqyKva iDvvJB sc-button"
+    className="sc-dQppl hToZKi sc-button"
     disabled={false}
     size="smaller"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="smaller"
         >
           <i
@@ -847,7 +847,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -855,20 +855,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva jIZbPl sc-button"
+    className="sc-dQppl hbVkTC sc-button"
     disabled={false}
     size="small"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="small"
         >
           <i
@@ -876,7 +876,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -884,20 +884,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva bzbetx sc-button"
+    className="sc-dQppl hxKeQu sc-button"
     disabled={false}
     size="base"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="base"
         >
           <i
@@ -905,7 +905,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -913,20 +913,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva boiKsk sc-button"
+    className="sc-dQppl ipoxcf sc-button"
     disabled={false}
     size="large"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="large"
         >
           <i
@@ -934,7 +934,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
@@ -942,20 +942,20 @@ exports[`Storyshots Components/Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bqyKva iKYrvF sc-button"
+    className="sc-dQppl jlYxZq sc-button"
     disabled={false}
     size="larger"
     title=""
     type="button"
   >
     <span
-      className="sc-fodVxV ckNcPt"
+      className="sc-hBEYos hgFzca"
     >
       <span
         className="sc-button-text"
       >
         <span
-          className="sc-kstrdz hFNOsv"
+          className="sc-bqyKva osfTx"
           size="larger"
         >
           <i
@@ -963,7 +963,7 @@ exports[`Storyshots Components/Button Default 1`] = `
           />
         </span>
         <span
-          className="sc-hBEYos jaVYGW"
+          className="sc-kstrdz ZegCk"
         >
           
         </span>
diff --git a/src/__snapshots__/checkbox.stories.storyshot b/src/__snapshots__/checkbox.stories.storyshot
index 69169361de..00a64c031d 100644
--- a/src/__snapshots__/checkbox.stories.storyshot
+++ b/src/__snapshots__/checkbox.stories.storyshot
@@ -2,16 +2,16 @@
 
 exports[`Storyshots Components/Checkbox Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Checkbox checked
   </h3>
   <label
     checked={true}
-    className="sc-idOhPF gHixSi sc-checkbox"
+    className="sc-bkzZxe tlWPm sc-checkbox"
   >
     <input
       checked={true}
@@ -23,19 +23,19 @@ exports[`Storyshots Components/Checkbox Default 1`] = `
       className="fas fa-check"
     />
     <span
-      className="sc-bkzZxe ktuikY text"
+      className="sc-fFubgz kTNXQm text"
     >
       interested?
     </span>
   </label>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Checkbox unchecked
   </h3>
   <label
     checked={false}
-    className="sc-idOhPF kSxlDv sc-checkbox"
+    className="sc-bkzZxe lcxcuX sc-checkbox"
   >
     <input
       checked={false}
@@ -46,19 +46,19 @@ exports[`Storyshots Components/Checkbox Default 1`] = `
       className="fas fa-check"
     />
     <span
-      className="sc-bkzZxe ktuikY text"
+      className="sc-fFubgz kTNXQm text"
     >
       interested?
     </span>
   </label>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Checkbox unchecked disabled
   </h3>
   <label
     checked={false}
-    className="sc-idOhPF jJIINz sc-checkbox"
+    className="sc-bkzZxe iHwOKD sc-checkbox"
     disabled={true}
   >
     <input
@@ -71,19 +71,19 @@ exports[`Storyshots Components/Checkbox Default 1`] = `
       className="fas fa-check"
     />
     <span
-      className="sc-bkzZxe ktuikY text"
+      className="sc-fFubgz kTNXQm text"
     >
       interested?
     </span>
   </label>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Checkbox checked disabled
   </h3>
   <label
     checked={true}
-    className="sc-idOhPF eIdlzD sc-checkbox"
+    className="sc-bkzZxe jkWkgr sc-checkbox"
     disabled={true}
   >
     <input
@@ -96,7 +96,7 @@ exports[`Storyshots Components/Checkbox Default 1`] = `
       className="fas fa-check"
     />
     <span
-      className="sc-bkzZxe ktuikY text"
+      className="sc-fFubgz kTNXQm text"
     >
       interested?
     </span>
diff --git a/src/__snapshots__/chips.stories.storyshot b/src/__snapshots__/chips.stories.storyshot
index 6efac57cc8..52b2526689 100644
--- a/src/__snapshots__/chips.stories.storyshot
+++ b/src/__snapshots__/chips.stories.storyshot
@@ -2,65 +2,65 @@
 
 exports[`Storyshots Components/Chips Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl storybook-chips"
+  className="sc-bdfBwQ gFQERV storybook-chips"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Basic Chip
   </h3>
   <div
-    className="sc-dIUggk gVKqXH sc-chips"
+    className="sc-idOhPF ooLBo sc-chips"
     size="base"
   >
     <span
-      className="sc-dmlrTW fhXrnp sc-chips-text"
+      className="sc-hHftDr klQHPV sc-chips-text"
     >
       Basic Chip
     </span>
   </div>
   <div
-    className="sc-dIUggk gwdtRz sc-chips"
+    className="sc-idOhPF fMJxAs sc-chips"
     size="base"
   >
     <span
-      className="sc-dmlrTW fhXrnp sc-chips-text"
+      className="sc-hHftDr klQHPV sc-chips-text"
     >
       Basic Chip
     </span>
   </div>
   <div
-    className="sc-dIUggk njtXS sc-chips"
+    className="sc-idOhPF bwaybR sc-chips"
     size="base"
   >
     <span
-      className="sc-dmlrTW fhXrnp sc-chips-text"
+      className="sc-hHftDr klQHPV sc-chips-text"
     >
       Basic Chip
     </span>
   </div>
   <div
-    className="sc-dIUggk kbDLC sc-chips"
+    className="sc-idOhPF gTvWCp sc-chips"
     size="base"
   >
     <span
-      className="sc-dmlrTW fhXrnp sc-chips-text"
+      className="sc-hHftDr klQHPV sc-chips-text"
     >
       Basic Chip
     </span>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Clickable Chip
   </h3>
   <div
-    className="sc-dIUggk PuuLy sc-chips"
+    className="sc-idOhPF kZKZWJ sc-chips"
     onClick={[Function]}
     size="base"
   >
     <span
-      className="sc-hHftDr iHKdwt sc-chips-icon"
+      className="sc-dIUggk dVMmdW sc-chips-icon"
       size="base"
     >
       <i
@@ -68,18 +68,18 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Clickable Chip
     </span>
   </div>
   <div
-    className="sc-dIUggk hXLEuJ sc-chips"
+    className="sc-idOhPF vJchq sc-chips"
     onClick={[Function]}
     size="base"
   >
     <span
-      className="sc-hHftDr kywOs sc-chips-icon"
+      className="sc-dIUggk iddiDb sc-chips-icon"
       size="base"
     >
       <i
@@ -87,18 +87,18 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Clickable Chip
     </span>
   </div>
   <div
-    className="sc-dIUggk hRRbMQ sc-chips"
+    className="sc-idOhPF dsiJQf sc-chips"
     onClick={[Function]}
     size="base"
   >
     <span
-      className="sc-hHftDr cLQKOz sc-chips-icon"
+      className="sc-dIUggk vUwNc sc-chips-icon"
       size="base"
     >
       <i
@@ -106,18 +106,18 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Clickable Chip
     </span>
   </div>
   <div
-    className="sc-dIUggk cEsIkU sc-chips"
+    className="sc-idOhPF jVGgOz sc-chips"
     onClick={[Function]}
     size="base"
   >
     <span
-      className="sc-hHftDr iPHUov sc-chips-icon"
+      className="sc-dIUggk dNhKdE sc-chips-icon"
       size="base"
     >
       <i
@@ -125,22 +125,22 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Clickable Chip
     </span>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Deletable Chip
   </h3>
   <div
-    className="sc-dIUggk gVKqXH sc-chips"
+    className="sc-idOhPF ooLBo sc-chips"
     size="base"
   >
     <span
-      className="sc-hHftDr iHKdwt sc-chips-icon"
+      className="sc-dIUggk dVMmdW sc-chips-icon"
       size="base"
     >
       <i
@@ -148,12 +148,12 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Deletable
     </span>
     <button
-      className="sc-bqyKva bzbetx sc-chips-remove"
+      className="sc-dQppl hxKeQu sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -161,13 +161,13 @@ exports[`Storyshots Components/Chips Default 1`] = `
       type="button"
     >
       <span
-        className="sc-fodVxV ckNcPt"
+        className="sc-hBEYos hgFzca"
       >
         <span
           className="sc-button-text"
         >
           <span
-            className="sc-kstrdz hFNOsv"
+            className="sc-bqyKva osfTx"
             size="base"
           >
             <i
@@ -175,7 +175,7 @@ exports[`Storyshots Components/Chips Default 1`] = `
             />
           </span>
           <span
-            className="sc-hBEYos jaVYGW"
+            className="sc-kstrdz ZegCk"
           >
             
           </span>
@@ -184,11 +184,11 @@ exports[`Storyshots Components/Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-dIUggk gwdtRz sc-chips"
+    className="sc-idOhPF fMJxAs sc-chips"
     size="base"
   >
     <span
-      className="sc-hHftDr kywOs sc-chips-icon"
+      className="sc-dIUggk iddiDb sc-chips-icon"
       size="base"
     >
       <i
@@ -196,12 +196,12 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Deletable
     </span>
     <button
-      className="sc-bqyKva bzbetx sc-chips-remove"
+      className="sc-dQppl hxKeQu sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -209,13 +209,13 @@ exports[`Storyshots Components/Chips Default 1`] = `
       type="button"
     >
       <span
-        className="sc-fodVxV ckNcPt"
+        className="sc-hBEYos hgFzca"
       >
         <span
           className="sc-button-text"
         >
           <span
-            className="sc-kstrdz hFNOsv"
+            className="sc-bqyKva osfTx"
             size="base"
           >
             <i
@@ -223,7 +223,7 @@ exports[`Storyshots Components/Chips Default 1`] = `
             />
           </span>
           <span
-            className="sc-hBEYos jaVYGW"
+            className="sc-kstrdz ZegCk"
           >
             
           </span>
@@ -232,11 +232,11 @@ exports[`Storyshots Components/Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-dIUggk njtXS sc-chips"
+    className="sc-idOhPF bwaybR sc-chips"
     size="base"
   >
     <span
-      className="sc-hHftDr cLQKOz sc-chips-icon"
+      className="sc-dIUggk vUwNc sc-chips-icon"
       size="base"
     >
       <i
@@ -244,12 +244,12 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Deletable
     </span>
     <button
-      className="sc-bqyKva bzbetx sc-chips-remove"
+      className="sc-dQppl hxKeQu sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -257,13 +257,13 @@ exports[`Storyshots Components/Chips Default 1`] = `
       type="button"
     >
       <span
-        className="sc-fodVxV ckNcPt"
+        className="sc-hBEYos hgFzca"
       >
         <span
           className="sc-button-text"
         >
           <span
-            className="sc-kstrdz hFNOsv"
+            className="sc-bqyKva osfTx"
             size="base"
           >
             <i
@@ -271,7 +271,7 @@ exports[`Storyshots Components/Chips Default 1`] = `
             />
           </span>
           <span
-            className="sc-hBEYos jaVYGW"
+            className="sc-kstrdz ZegCk"
           >
             
           </span>
@@ -280,11 +280,11 @@ exports[`Storyshots Components/Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-dIUggk kbDLC sc-chips"
+    className="sc-idOhPF gTvWCp sc-chips"
     size="base"
   >
     <span
-      className="sc-hHftDr iPHUov sc-chips-icon"
+      className="sc-dIUggk dNhKdE sc-chips-icon"
       size="base"
     >
       <i
@@ -292,12 +292,12 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Deletable
     </span>
     <button
-      className="sc-bqyKva bzbetx sc-chips-remove"
+      className="sc-dQppl hxKeQu sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -305,13 +305,13 @@ exports[`Storyshots Components/Chips Default 1`] = `
       type="button"
     >
       <span
-        className="sc-fodVxV ckNcPt"
+        className="sc-hBEYos hgFzca"
       >
         <span
           className="sc-button-text"
         >
           <span
-            className="sc-kstrdz hFNOsv"
+            className="sc-bqyKva osfTx"
             size="base"
           >
             <i
@@ -319,7 +319,7 @@ exports[`Storyshots Components/Chips Default 1`] = `
             />
           </span>
           <span
-            className="sc-hBEYos jaVYGW"
+            className="sc-kstrdz ZegCk"
           >
             
           </span>
@@ -328,16 +328,16 @@ exports[`Storyshots Components/Chips Default 1`] = `
     </button>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Different sizes
   </h3>
   <div
-    className="sc-dIUggk jYqbWI sc-chips"
+    className="sc-idOhPF cxUJAf sc-chips"
     size="smaller"
   >
     <span
-      className="sc-hHftDr iHKdwt sc-chips-icon"
+      className="sc-dIUggk dVMmdW sc-chips-icon"
       size="smaller"
     >
       <i
@@ -345,12 +345,12 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Smaller
     </span>
     <button
-      className="sc-bqyKva iDvvJB sc-chips-remove"
+      className="sc-dQppl hToZKi sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="smaller"
@@ -358,13 +358,13 @@ exports[`Storyshots Components/Chips Default 1`] = `
       type="button"
     >
       <span
-        className="sc-fodVxV ckNcPt"
+        className="sc-hBEYos hgFzca"
       >
         <span
           className="sc-button-text"
         >
           <span
-            className="sc-kstrdz hFNOsv"
+            className="sc-bqyKva osfTx"
             size="smaller"
           >
             <i
@@ -372,7 +372,7 @@ exports[`Storyshots Components/Chips Default 1`] = `
             />
           </span>
           <span
-            className="sc-hBEYos jaVYGW"
+            className="sc-kstrdz ZegCk"
           >
             
           </span>
@@ -381,11 +381,11 @@ exports[`Storyshots Components/Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-dIUggk kxnBjp sc-chips"
+    className="sc-idOhPF ehOTJW sc-chips"
     size="small"
   >
     <span
-      className="sc-hHftDr iHKdwt sc-chips-icon"
+      className="sc-dIUggk dVMmdW sc-chips-icon"
       size="small"
     >
       <i
@@ -393,12 +393,12 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Small
     </span>
     <button
-      className="sc-bqyKva jIZbPl sc-chips-remove"
+      className="sc-dQppl hbVkTC sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="small"
@@ -406,13 +406,13 @@ exports[`Storyshots Components/Chips Default 1`] = `
       type="button"
     >
       <span
-        className="sc-fodVxV ckNcPt"
+        className="sc-hBEYos hgFzca"
       >
         <span
           className="sc-button-text"
         >
           <span
-            className="sc-kstrdz hFNOsv"
+            className="sc-bqyKva osfTx"
             size="small"
           >
             <i
@@ -420,7 +420,7 @@ exports[`Storyshots Components/Chips Default 1`] = `
             />
           </span>
           <span
-            className="sc-hBEYos jaVYGW"
+            className="sc-kstrdz ZegCk"
           >
             
           </span>
@@ -429,11 +429,11 @@ exports[`Storyshots Components/Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-dIUggk njtXS sc-chips"
+    className="sc-idOhPF bwaybR sc-chips"
     size="base"
   >
     <span
-      className="sc-hHftDr cLQKOz sc-chips-icon"
+      className="sc-dIUggk vUwNc sc-chips-icon"
       size="base"
     >
       <i
@@ -441,12 +441,12 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Base
     </span>
     <button
-      className="sc-bqyKva bzbetx sc-chips-remove"
+      className="sc-dQppl hxKeQu sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -454,13 +454,13 @@ exports[`Storyshots Components/Chips Default 1`] = `
       type="button"
     >
       <span
-        className="sc-fodVxV ckNcPt"
+        className="sc-hBEYos hgFzca"
       >
         <span
           className="sc-button-text"
         >
           <span
-            className="sc-kstrdz hFNOsv"
+            className="sc-bqyKva osfTx"
             size="base"
           >
             <i
@@ -468,7 +468,7 @@ exports[`Storyshots Components/Chips Default 1`] = `
             />
           </span>
           <span
-            className="sc-hBEYos jaVYGW"
+            className="sc-kstrdz ZegCk"
           >
             
           </span>
@@ -477,11 +477,11 @@ exports[`Storyshots Components/Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-dIUggk WkicF sc-chips"
+    className="sc-idOhPF dXsLPK sc-chips"
     size="large"
   >
     <span
-      className="sc-hHftDr kywOs sc-chips-icon"
+      className="sc-dIUggk iddiDb sc-chips-icon"
       size="large"
     >
       <i
@@ -489,12 +489,12 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Large
     </span>
     <button
-      className="sc-bqyKva boiKsk sc-chips-remove"
+      className="sc-dQppl ipoxcf sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="large"
@@ -502,13 +502,13 @@ exports[`Storyshots Components/Chips Default 1`] = `
       type="button"
     >
       <span
-        className="sc-fodVxV ckNcPt"
+        className="sc-hBEYos hgFzca"
       >
         <span
           className="sc-button-text"
         >
           <span
-            className="sc-kstrdz hFNOsv"
+            className="sc-bqyKva osfTx"
             size="large"
           >
             <i
@@ -516,7 +516,7 @@ exports[`Storyshots Components/Chips Default 1`] = `
             />
           </span>
           <span
-            className="sc-hBEYos jaVYGW"
+            className="sc-kstrdz ZegCk"
           >
             
           </span>
@@ -525,11 +525,11 @@ exports[`Storyshots Components/Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-dIUggk jcTcME sc-chips"
+    className="sc-idOhPF bKppaj sc-chips"
     size="larger"
   >
     <span
-      className="sc-hHftDr cLQKOz sc-chips-icon"
+      className="sc-dIUggk vUwNc sc-chips-icon"
       size="larger"
     >
       <i
@@ -537,12 +537,12 @@ exports[`Storyshots Components/Chips Default 1`] = `
       />
     </span>
     <span
-      className="sc-dmlrTW hHyQDg sc-chips-text"
+      className="sc-hHftDr fkYAUI sc-chips-text"
     >
       Larger
     </span>
     <button
-      className="sc-bqyKva iKYrvF sc-chips-remove"
+      className="sc-dQppl jlYxZq sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="larger"
@@ -550,13 +550,13 @@ exports[`Storyshots Components/Chips Default 1`] = `
       type="button"
     >
       <span
-        className="sc-fodVxV ckNcPt"
+        className="sc-hBEYos hgFzca"
       >
         <span
           className="sc-button-text"
         >
           <span
-            className="sc-kstrdz hFNOsv"
+            className="sc-bqyKva osfTx"
             size="larger"
           >
             <i
@@ -564,7 +564,7 @@ exports[`Storyshots Components/Chips Default 1`] = `
             />
           </span>
           <span
-            className="sc-hBEYos jaVYGW"
+            className="sc-kstrdz ZegCk"
           >
             
           </span>
diff --git a/src/__snapshots__/circularprogressbar.stories.storyshot b/src/__snapshots__/circularprogressbar.stories.storyshot
index 8c17b44ba1..7c97c2e858 100644
--- a/src/__snapshots__/circularprogressbar.stories.storyshot
+++ b/src/__snapshots__/circularprogressbar.stories.storyshot
@@ -2,18 +2,18 @@
 
 exports[`Storyshots Components/Progress & loading/CircularProgressBar Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     With Default Color
   </h3>
   <div
-    className="sc-kfzAmx IljFH sc-circularprogressbar"
+    className="sc-dmlrTW kwDnaA sc-circularprogressbar"
   >
     <span
-      className="sc-fKFyDc jxiMIy"
+      className="sc-kfzAmx cHkBzY"
     >
       Total Capacity
     </span>
@@ -22,14 +22,14 @@ exports[`Storyshots Components/Progress & loading/CircularProgressBar Default 1`
       width={150}
     >
       <circle
-        className="sc-iwyYcG iCIahW"
+        className="sc-bBXqnf iZFxIV"
         cx={75}
         cy={75}
         r={70}
         strokeWidth={10}
       />
       <circle
-        className="sc-bBXqnf dIxZQw"
+        className="sc-fKFyDc cXixBo"
         cx={75}
         cy={75}
         r={70}
@@ -37,7 +37,7 @@ exports[`Storyshots Components/Progress & loading/CircularProgressBar Default 1`
         transform="rotate(-90 75  75)"
       />
       <text
-        className="sc-eCssSg dAsEiI sc-circularprogressbar-text"
+        className="sc-hKgILt jVqleL sc-circularprogressbar-text"
         dominantBaseline="middle"
         textAnchor="middle"
         x="50%"
@@ -48,15 +48,15 @@ exports[`Storyshots Components/Progress & loading/CircularProgressBar Default 1`
     </svg>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     With Custom Color
   </h3>
   <div
-    className="sc-kfzAmx IljFH sc-circularprogressbar"
+    className="sc-dmlrTW kwDnaA sc-circularprogressbar"
   >
     <span
-      className="sc-fKFyDc jxiMIy"
+      className="sc-kfzAmx cHkBzY"
     >
       Total Capacity
     </span>
@@ -65,14 +65,14 @@ exports[`Storyshots Components/Progress & loading/CircularProgressBar Default 1`
       width={110}
     >
       <circle
-        className="sc-iwyYcG iCIahW"
+        className="sc-bBXqnf iZFxIV"
         cx={55}
         cy={55}
         r={50}
         strokeWidth={10}
       />
       <circle
-        className="sc-bBXqnf JpIUy"
+        className="sc-fKFyDc iVpSWK"
         color="#00ff43"
         cx={55}
         cy={55}
@@ -81,7 +81,7 @@ exports[`Storyshots Components/Progress & loading/CircularProgressBar Default 1`
         transform="rotate(-90 55  55)"
       />
       <text
-        className="sc-eCssSg dAsEiI sc-circularprogressbar-text"
+        className="sc-hKgILt jVqleL sc-circularprogressbar-text"
         dominantBaseline="middle"
         style={
           Object {
@@ -96,7 +96,7 @@ exports[`Storyshots Components/Progress & loading/CircularProgressBar Default 1`
         4.9 PB
       </text>
       <text
-        className="sc-eCssSg dAsEiI sc-circularprogressbar-text"
+        className="sc-hKgILt jVqleL sc-circularprogressbar-text"
         dominantBaseline="middle"
         textAnchor="middle"
         x="50%"
diff --git a/src/__snapshots__/cloudprogressbar.stories.storyshot b/src/__snapshots__/cloudprogressbar.stories.storyshot
index 2ff13dd4cb..715286f557 100644
--- a/src/__snapshots__/cloudprogressbar.stories.storyshot
+++ b/src/__snapshots__/cloudprogressbar.stories.storyshot
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     CloudProgressBar
   </h3>
@@ -18,7 +18,7 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
     }
   >
     <div
-      className="sc-cxFLnm dqeAFY sc-cloudprogressbar"
+      className="sc-iwyYcG henefs sc-cloudprogressbar"
     >
       <svg
         enableBackground="new 0 0 72 72"
@@ -38,7 +38,7 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
         </g>
       </svg>
       <div
-        className="sc-lmoMRL bFcxGh"
+        className="sc-cxFLnm eLwFsG"
       >
         <svg
           enableBackground="new 0 0 72 72"
@@ -69,12 +69,12 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
         }
       >
         <h3
-          className="sc-dlfnbm dxKCyT"
+          className="sc-gsTCUz iNyAAg"
         >
           30%
         </h3>
         <span
-          className="sc-hKgILt bLCYoF"
+          className="sc-dlfnbm dxKCyT"
         >
           of the quotas has been reached.
         </span>
@@ -90,7 +90,7 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
     }
   >
     <div
-      className="sc-cxFLnm dqeAFY sc-cloudprogressbar"
+      className="sc-iwyYcG henefs sc-cloudprogressbar"
     >
       <svg
         enableBackground="new 0 0 72 72"
@@ -110,7 +110,7 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
         </g>
       </svg>
       <div
-        className="sc-lmoMRL eiuDfE"
+        className="sc-cxFLnm fTcnqT"
       >
         <svg
           enableBackground="new 0 0 72 72"
@@ -141,12 +141,12 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
         }
       >
         <h3
-          className="sc-dlfnbm dxKCyT"
+          className="sc-gsTCUz iNyAAg"
         >
           50%
         </h3>
         <span
-          className="sc-hKgILt bLCYoF"
+          className="sc-dlfnbm dxKCyT"
         >
           of the quotas has been reached
         </span>
@@ -162,7 +162,7 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
     }
   >
     <div
-      className="sc-cxFLnm dqeAFY sc-cloudprogressbar"
+      className="sc-iwyYcG henefs sc-cloudprogressbar"
     >
       <svg
         enableBackground="new 0 0 72 72"
@@ -182,7 +182,7 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
         </g>
       </svg>
       <div
-        className="sc-lmoMRL fSWjKy"
+        className="sc-cxFLnm cGYhGh"
       >
         <svg
           enableBackground="new 0 0 72 72"
@@ -213,12 +213,12 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
         }
       >
         <h3
-          className="sc-dlfnbm dxKCyT"
+          className="sc-gsTCUz iNyAAg"
         >
           80%
         </h3>
         <span
-          className="sc-hKgILt bLCYoF"
+          className="sc-dlfnbm dxKCyT"
         >
           of the quotas has been reached
         </span>
@@ -234,7 +234,7 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
     }
   >
     <div
-      className="sc-cxFLnm dqeAFY sc-cloudprogressbar"
+      className="sc-iwyYcG henefs sc-cloudprogressbar"
     >
       <svg
         enableBackground="new 0 0 72 72"
@@ -254,7 +254,7 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
         </g>
       </svg>
       <div
-        className="sc-lmoMRL fiPYuo"
+        className="sc-cxFLnm krAKPD"
       >
         <svg
           enableBackground="new 0 0 72 72"
@@ -285,12 +285,12 @@ exports[`Storyshots Components/Progress & loading/CloudProgressBar Default 1`] =
         }
       >
         <h3
-          className="sc-dlfnbm dxKCyT"
+          className="sc-gsTCUz iNyAAg"
         >
           70%
         </h3>
         <span
-          className="sc-hKgILt bLCYoF"
+          className="sc-dlfnbm dxKCyT"
         >
           of the quotas has been reached
         </span>
diff --git a/src/__snapshots__/collapsiblepanel.stories.storyshot b/src/__snapshots__/collapsiblepanel.stories.storyshot
index 0ebf077a55..7c76996a11 100644
--- a/src/__snapshots__/collapsiblepanel.stories.storyshot
+++ b/src/__snapshots__/collapsiblepanel.stories.storyshot
@@ -2,48 +2,48 @@
 
 exports[`Storyshots Components/Navigation/CollapsiblePanel Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl storybook-collapsiblepanel"
+  className="sc-bdfBwQ gFQERV storybook-collapsiblepanel"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Collapsed
   </h3>
   <div
-    className="sc-bYEvPH blPZTe sc-collapsiblepanel"
+    className="sc-ezrdKe kDTPMh sc-collapsiblepanel"
   >
     <div
-      className="sc-kLgntA joCKUT sc-collapsiblepanel-header"
+      className="sc-bYEvPH eJcLZI sc-collapsiblepanel-header"
       onClick={[Function]}
     >
       <div
-        className="sc-iJuUWI fEVegm"
+        className="sc-lmoMRL jjoAXq"
       >
         <div
-          className="sc-giIncl OATST"
+          className="sc-iJuUWI bDvYfs"
         >
           <i
             className="fas fa-carrot"
           />
         </div>
         <div
-          className="sc-giIncl OATST"
+          className="sc-iJuUWI bDvYfs"
         >
           banana
         </div>
         <div
-          className="sc-giIncl OATST"
+          className="sc-iJuUWI bDvYfs"
         >
           apple
         </div>
         <div
-          className="sc-giIncl OATST"
+          className="sc-iJuUWI bDvYfs"
         >
           grape
         </div>
       </div>
       <div
-        className="sc-ezrdKe jtjGlR"
+        className="sc-giIncl cBwAgo"
       >
         <i
           className="fas fa-angle-down"
@@ -52,45 +52,45 @@ exports[`Storyshots Components/Navigation/CollapsiblePanel Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Expanded
   </h3>
   <div
-    className="sc-bYEvPH blPZTe sc-collapsiblepanel"
+    className="sc-ezrdKe kDTPMh sc-collapsiblepanel"
   >
     <div
-      className="sc-kLgntA joCKUT sc-collapsiblepanel-header"
+      className="sc-bYEvPH eJcLZI sc-collapsiblepanel-header"
       onClick={[Function]}
     >
       <div
-        className="sc-iJuUWI fEVegm"
+        className="sc-lmoMRL jjoAXq"
       >
         <div
-          className="sc-giIncl OATST"
+          className="sc-iJuUWI bDvYfs"
         >
           <i
             className="fas fa-carrot"
           />
         </div>
         <div
-          className="sc-giIncl OATST"
+          className="sc-iJuUWI bDvYfs"
         >
           banana
         </div>
         <div
-          className="sc-giIncl OATST"
+          className="sc-iJuUWI bDvYfs"
         >
           apple
         </div>
         <div
-          className="sc-giIncl OATST"
+          className="sc-iJuUWI bDvYfs"
         >
           grape
         </div>
       </div>
       <div
-        className="sc-ezrdKe jtjGlR"
+        className="sc-giIncl cBwAgo"
       >
         <i
           className="fas fa-angle-up"
@@ -98,7 +98,7 @@ exports[`Storyshots Components/Navigation/CollapsiblePanel Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-iktFzd jQFtXw sc-collapsiblepanel-content"
+      className="sc-kLgntA hwWoCF sc-collapsiblepanel-content"
     >
       orange
     </div>
diff --git a/src/__snapshots__/constrainedtext.stories.storyshot b/src/__snapshots__/constrainedtext.stories.storyshot
index feafc0cb67..4ec25f9cd4 100644
--- a/src/__snapshots__/constrainedtext.stories.storyshot
+++ b/src/__snapshots__/constrainedtext.stories.storyshot
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Components/Constrainedtext Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Constrained Text
   </h3>
@@ -18,15 +18,15 @@ exports[`Storyshots Components/Constrainedtext Default 1`] = `
     }
   >
     <div
-      className="sc-cBNfnY fdVsYI"
+      className="sc-gWHgXt hVcWAF"
     >
       <div
-        className="sc-jJEJSO jHwXvj sc-tooltip"
+        className="sc-iktFzd hojOeW sc-tooltip"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
         <div
-          className="sc-gWHgXt lataRC sc-constrainedtext"
+          className="sc-hiSbYr cxcVSW sc-constrainedtext"
         >
           This is a long phrase
         </div>
@@ -34,7 +34,7 @@ exports[`Storyshots Components/Constrainedtext Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     With the ability to customize the style of tooltip
   </h3>
@@ -47,15 +47,15 @@ exports[`Storyshots Components/Constrainedtext Default 1`] = `
     }
   >
     <div
-      className="sc-cBNfnY fdVsYI"
+      className="sc-gWHgXt hVcWAF"
     >
       <div
-        className="sc-jJEJSO jHwXvj sc-tooltip"
+        className="sc-iktFzd hojOeW sc-tooltip"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
         <div
-          className="sc-gWHgXt lataRC sc-constrainedtext"
+          className="sc-hiSbYr cxcVSW sc-constrainedtext"
         >
           This is a long phrase
         </div>
diff --git a/src/__snapshots__/dropdown.stories.storyshot b/src/__snapshots__/dropdown.stories.storyshot
index 6e5306e420..83c59ac13e 100644
--- a/src/__snapshots__/dropdown.stories.storyshot
+++ b/src/__snapshots__/dropdown.stories.storyshot
@@ -2,18 +2,18 @@
 
 exports[`Storyshots Components/Dropdown Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl storybook-dropdown"
+  className="sc-bdfBwQ gFQERV storybook-dropdown"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Dropdown with text/icon
   </h3>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD jrnDWk trigger"
+      className="sc-iUuytg jTmSDr trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -21,7 +21,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz gLcDls"
+        className="sc-bqyKva klTaQG"
         size="smaller"
       >
         <i
@@ -29,12 +29,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
         />
       </span>
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         Help
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
@@ -43,10 +43,10 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD ivcEBw trigger"
+      className="sc-iUuytg iuBerP trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -54,7 +54,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz gLcDls"
+        className="sc-bqyKva klTaQG"
         size="small"
       >
         <i
@@ -62,12 +62,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
         />
       </span>
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         Help
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
@@ -76,10 +76,10 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD kETsRs trigger"
+      className="sc-iUuytg gjitmb trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -87,7 +87,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz gLcDls"
+        className="sc-bqyKva klTaQG"
         size="base"
       >
         <i
@@ -95,12 +95,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
         />
       </span>
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         Help
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
@@ -109,10 +109,10 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD cCqbrR trigger"
+      className="sc-iUuytg dYnqjm trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -120,7 +120,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz gLcDls"
+        className="sc-bqyKva klTaQG"
         size="large"
       >
         <i
@@ -128,12 +128,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
         />
       </span>
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         Help
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
@@ -142,10 +142,10 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD bDMcNI trigger"
+      className="sc-iUuytg fEdNZv trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -153,7 +153,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz gLcDls"
+        className="sc-bqyKva klTaQG"
         size="larger"
       >
         <i
@@ -161,12 +161,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
         />
       </span>
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         Help
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
@@ -175,15 +175,15 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Dropdown with icon
   </h3>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD kETsRs trigger"
+      className="sc-iUuytg gjitmb trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -191,7 +191,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz hFNOsv"
+        className="sc-bqyKva osfTx"
         size="base"
       >
         <i
@@ -201,15 +201,15 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Dropdown with text
   </h3>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD kETsRs trigger"
+      className="sc-iUuytg gjitmb trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -217,12 +217,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         Help
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
@@ -231,15 +231,15 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Dropdown with variant
   </h3>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD kETsRs trigger"
+      className="sc-iUuytg gjitmb trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -247,7 +247,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz gLcDls"
+        className="sc-bqyKva klTaQG"
         size="base"
       >
         <i
@@ -255,12 +255,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
         />
       </span>
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         primary
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
@@ -269,10 +269,10 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD bGBRHy trigger"
+      className="sc-iUuytg dqFYhN trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -280,7 +280,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz gLcDls"
+        className="sc-bqyKva klTaQG"
         size="base"
       >
         <i
@@ -288,12 +288,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
         />
       </span>
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         secondary
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
@@ -302,10 +302,10 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD jzMauX trigger"
+      className="sc-iUuytg bfUdBI trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -313,7 +313,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz gLcDls"
+        className="sc-bqyKva klTaQG"
         size="base"
       >
         <i
@@ -321,12 +321,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
         />
       </span>
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         healthy
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
@@ -335,10 +335,10 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD fNA-deG trigger"
+      className="sc-iUuytg imedtJ trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -346,7 +346,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz gLcDls"
+        className="sc-bqyKva klTaQG"
         size="base"
       >
         <i
@@ -354,12 +354,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
         />
       </span>
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         warning
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
@@ -368,10 +368,10 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-citwmv cZSRlS sc-dropdown"
+    className="sc-cBNfnY iBrVvG sc-dropdown"
   >
     <div
-      className="sc-iBaPrD bIgRCe trigger"
+      className="sc-iUuytg bOBTHN trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -379,7 +379,7 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
       tabIndex="0"
     >
       <span
-        className="sc-kstrdz gLcDls"
+        className="sc-bqyKva klTaQG"
         size="base"
       >
         <i
@@ -387,12 +387,12 @@ exports[`Storyshots Components/Dropdown Default 1`] = `
         />
       </span>
       <span
-        className="sc-hBEYos jaVYGW sc-trigger-text"
+        className="sc-kstrdz ZegCk sc-trigger-text"
       >
         danger
       </span>
       <span
-        className="sc-iUuytg kpKxJm"
+        className="sc-bZSQDF etVKrp"
       >
         <i
           className="fas fa-caret-down"
diff --git a/src/__snapshots__/emptystate.stories.storyshot b/src/__snapshots__/emptystate.stories.storyshot
index 65370d9092..e6a61e753c 100644
--- a/src/__snapshots__/emptystate.stories.storyshot
+++ b/src/__snapshots__/emptystate.stories.storyshot
@@ -2,16 +2,16 @@
 
 exports[`Storyshots Components/EmptyState With Link 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div
-    className="sc-eggNIi fRKxUt sc-emptystate"
+    className="sc-iBaPrD bNTjvi sc-emptystate"
   >
     <div
-      className="sc-jNMdTA ideqbN"
+      className="sc-cTkwdZ jTIFDc"
     >
       <div
-        className="sc-bBrOnJ kslhCT"
+        className="sc-dOSReg cMAFeC"
       >
         <i
           className="fas fa-server"
@@ -19,10 +19,10 @@ exports[`Storyshots Components/EmptyState With Link 1`] = `
       </div>
     </div>
     <div
-      className="sc-jNMdTA ideqbN"
+      className="sc-cTkwdZ jTIFDc"
     >
       <h3
-        className="sc-cTkwdZ jgiGzD"
+        className="sc-eggNIi hdlQqV"
       >
         A list of 
         nodes
@@ -30,10 +30,10 @@ exports[`Storyshots Components/EmptyState With Link 1`] = `
       </h3>
     </div>
     <div
-      className="sc-jNMdTA ideqbN"
+      className="sc-cTkwdZ jTIFDc"
     >
       <h3
-        className="sc-cTkwdZ jgiGzD"
+        className="sc-eggNIi hdlQqV"
       >
         There are no 
         nodes
@@ -44,10 +44,10 @@ exports[`Storyshots Components/EmptyState With Link 1`] = `
       </h3>
     </div>
     <div
-      className="sc-dOSReg YzaVf"
+      className="sc-jNMdTA iAGQPn"
     >
       <button
-        className="sc-bqyKva jdKiEV sc-button"
+        className="sc-dQppl jLhaey sc-button"
         disabled={false}
         onClick={[Function]}
         size="large"
@@ -55,13 +55,13 @@ exports[`Storyshots Components/EmptyState With Link 1`] = `
         type="button"
       >
         <span
-          className="sc-fodVxV ckNcPt"
+          className="sc-hBEYos hgFzca"
         >
           <span
             className="sc-button-text"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="large"
             >
               <i
@@ -69,7 +69,7 @@ exports[`Storyshots Components/EmptyState With Link 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW"
+              className="sc-kstrdz ZegCk"
             >
               Create node
             </span>
@@ -83,16 +83,16 @@ exports[`Storyshots Components/EmptyState With Link 1`] = `
 
 exports[`Storyshots Components/EmptyState Without Link 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div
-    className="sc-eggNIi fRKxUt sc-emptystate"
+    className="sc-iBaPrD bNTjvi sc-emptystate"
   >
     <div
-      className="sc-jNMdTA ideqbN"
+      className="sc-cTkwdZ jTIFDc"
     >
       <div
-        className="sc-bBrOnJ kslhCT"
+        className="sc-dOSReg cMAFeC"
       >
         <i
           className="fas fa-server"
@@ -100,10 +100,10 @@ exports[`Storyshots Components/EmptyState Without Link 1`] = `
       </div>
     </div>
     <div
-      className="sc-jNMdTA ideqbN"
+      className="sc-cTkwdZ jTIFDc"
     >
       <h3
-        className="sc-cTkwdZ jgiGzD"
+        className="sc-eggNIi hdlQqV"
       >
         A list of 
         nodes
@@ -111,10 +111,10 @@ exports[`Storyshots Components/EmptyState Without Link 1`] = `
       </h3>
     </div>
     <div
-      className="sc-jNMdTA ideqbN"
+      className="sc-cTkwdZ jTIFDc"
     >
       <h3
-        className="sc-cTkwdZ jgiGzD"
+        className="sc-eggNIi hdlQqV"
       >
         There are no 
         nodes
diff --git a/src/__snapshots__/globalhealthbar.stories.storyshot b/src/__snapshots__/globalhealthbar.stories.storyshot
new file mode 100644
index 0000000000..bd3a843955
--- /dev/null
+++ b/src/__snapshots__/globalhealthbar.stories.storyshot
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components/Chart/GlobalHealthBar Default 1`] = `
+<div
+  className="sc-bdfBwQ gFQERV"
+>
+  <h3
+    className="sc-gsTCUz iNyAAg"
+  >
+    Global Health Component Demo
+  </h3>
+  <div
+    style={
+      Object {
+        "paddingTop": "50px",
+      }
+    }
+  >
+    <div
+      className="sc-vegachart"
+      id="vis"
+    />
+  </div>
+</div>
+`;
diff --git a/src/__snapshots__/healthselector.stories.storyshot b/src/__snapshots__/healthselector.stories.storyshot
index 0e4d4ce68f..9cd2b8f577 100644
--- a/src/__snapshots__/healthselector.stories.storyshot
+++ b/src/__snapshots__/healthselector.stories.storyshot
@@ -2,41 +2,41 @@
 
 exports[`Storyshots Components/Selector/Healthselector Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Basic usage
   </h3>
   <div
-    className="sc-cOajty jdUgVl sc-healthselector"
+    className="sc-bBrOnJ dnejfq sc-healthselector"
   >
     <button
-      className="sc-bqyKva sc-jgHCyG iTJbnG hWrxbt trigger"
+      className="sc-dQppl sc-hTZhsR ebkNMt gLMXVu trigger"
       onBlur={[Function]}
       onClick={[Function]}
       size="base"
     >
       <div
-        className="sc-gTgzIj iBbPvr"
+        className="sc-jgHCyG ggoAVK"
       >
         <span
-          className="sc-hTZhsR efszGr"
+          className="sc-khAkjo czGiUk"
         >
           <span
-            className="sc-AzgDb KWrWa"
+            className="sc-cOajty bhOZzC"
           />
           <span
-            className="sc-AzgDb oLHEo"
+            className="sc-cOajty YhWvc"
           />
           <span
-            className="sc-AzgDb kljPav"
+            className="sc-cOajty ixXHBj"
           />
         </span>
       </div>
       <div
-        className="sc-laRPJI WcEGc"
+        className="sc-gTgzIj ocZsR"
       >
         All
       </div>
@@ -46,44 +46,44 @@ exports[`Storyshots Components/Selector/Healthselector Default 1`] = `
     </button>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Health Selector Sizes (Triggering StoryBook actions)
   </h3>
   <div
-    className="sc-eJMQSu cQCFip"
+    className="sc-jeGSBP cGbzPF"
   >
     <div
-      className="sc-nFpLZ jvfehY"
+      className="sc-eJMQSu iCAypz"
     >
       <div
-        className="sc-cOajty jdUgVl sc-healthselector"
+        className="sc-bBrOnJ dnejfq sc-healthselector"
       >
         <button
-          className="sc-bqyKva sc-jgHCyG kZELOW eTFCbd trigger"
+          className="sc-dQppl sc-hTZhsR gAXfRJ czraGW trigger"
           onBlur={[Function]}
           onClick={[Function]}
           size="smaller"
         >
           <div
-            className="sc-gTgzIj iBbPvr"
+            className="sc-jgHCyG ggoAVK"
           >
             <span
-              className="sc-hTZhsR efszGr"
+              className="sc-khAkjo czGiUk"
             >
               <span
-                className="sc-AzgDb KWrWa"
+                className="sc-cOajty bhOZzC"
               />
               <span
-                className="sc-AzgDb oLHEo"
+                className="sc-cOajty YhWvc"
               />
               <span
-                className="sc-AzgDb kljPav"
+                className="sc-cOajty ixXHBj"
               />
             </span>
           </div>
           <div
-            className="sc-laRPJI WcEGc"
+            className="sc-gTgzIj ocZsR"
           >
             All
           </div>
@@ -94,36 +94,36 @@ exports[`Storyshots Components/Selector/Healthselector Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-nFpLZ jvfehY"
+      className="sc-eJMQSu iCAypz"
     >
       <div
-        className="sc-cOajty jdUgVl sc-healthselector"
+        className="sc-bBrOnJ dnejfq sc-healthselector"
       >
         <button
-          className="sc-bqyKva sc-jgHCyG cCYwKy irbKxR trigger"
+          className="sc-dQppl sc-hTZhsR dDQpFl ZutKq trigger"
           onBlur={[Function]}
           onClick={[Function]}
           size="small"
         >
           <div
-            className="sc-gTgzIj iBbPvr"
+            className="sc-jgHCyG ggoAVK"
           >
             <span
-              className="sc-hTZhsR efszGr"
+              className="sc-khAkjo czGiUk"
             >
               <span
-                className="sc-AzgDb KWrWa"
+                className="sc-cOajty bhOZzC"
               />
               <span
-                className="sc-AzgDb oLHEo"
+                className="sc-cOajty YhWvc"
               />
               <span
-                className="sc-AzgDb kljPav"
+                className="sc-cOajty ixXHBj"
               />
             </span>
           </div>
           <div
-            className="sc-laRPJI WcEGc"
+            className="sc-gTgzIj ocZsR"
           >
             All
           </div>
@@ -134,36 +134,36 @@ exports[`Storyshots Components/Selector/Healthselector Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-nFpLZ jvfehY"
+      className="sc-eJMQSu iCAypz"
     >
       <div
-        className="sc-cOajty jdUgVl sc-healthselector"
+        className="sc-bBrOnJ dnejfq sc-healthselector"
       >
         <button
-          className="sc-bqyKva sc-jgHCyG iTJbnG hWrxbt trigger"
+          className="sc-dQppl sc-hTZhsR ebkNMt gLMXVu trigger"
           onBlur={[Function]}
           onClick={[Function]}
           size="base"
         >
           <div
-            className="sc-gTgzIj iBbPvr"
+            className="sc-jgHCyG ggoAVK"
           >
             <span
-              className="sc-hTZhsR efszGr"
+              className="sc-khAkjo czGiUk"
             >
               <span
-                className="sc-AzgDb KWrWa"
+                className="sc-cOajty bhOZzC"
               />
               <span
-                className="sc-AzgDb oLHEo"
+                className="sc-cOajty YhWvc"
               />
               <span
-                className="sc-AzgDb kljPav"
+                className="sc-cOajty ixXHBj"
               />
             </span>
           </div>
           <div
-            className="sc-laRPJI WcEGc"
+            className="sc-gTgzIj ocZsR"
           >
             All
           </div>
@@ -175,39 +175,39 @@ exports[`Storyshots Components/Selector/Healthselector Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-eJMQSu cQCFip"
+    className="sc-jeGSBP cGbzPF"
   >
     <div
-      className="sc-nFpLZ jvfehY"
+      className="sc-eJMQSu iCAypz"
     >
       <div
-        className="sc-cOajty jdUgVl sc-healthselector"
+        className="sc-bBrOnJ dnejfq sc-healthselector"
       >
         <button
-          className="sc-bqyKva sc-jgHCyG dKAgHb OKJsF trigger"
+          className="sc-dQppl sc-hTZhsR kVQnZo kGXUhK trigger"
           onBlur={[Function]}
           onClick={[Function]}
           size="large"
         >
           <div
-            className="sc-gTgzIj iBbPvr"
+            className="sc-jgHCyG ggoAVK"
           >
             <span
-              className="sc-hTZhsR efszGr"
+              className="sc-khAkjo czGiUk"
             >
               <span
-                className="sc-AzgDb KWrWa"
+                className="sc-cOajty bhOZzC"
               />
               <span
-                className="sc-AzgDb oLHEo"
+                className="sc-cOajty YhWvc"
               />
               <span
-                className="sc-AzgDb kljPav"
+                className="sc-cOajty ixXHBj"
               />
             </span>
           </div>
           <div
-            className="sc-laRPJI WcEGc"
+            className="sc-gTgzIj ocZsR"
           >
             All
           </div>
@@ -218,36 +218,36 @@ exports[`Storyshots Components/Selector/Healthselector Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-nFpLZ jvfehY"
+      className="sc-eJMQSu iCAypz"
     >
       <div
-        className="sc-cOajty jdUgVl sc-healthselector"
+        className="sc-bBrOnJ dnejfq sc-healthselector"
       >
         <button
-          className="sc-bqyKva sc-jgHCyG lcpyWu jAhGeh trigger"
+          className="sc-dQppl sc-hTZhsR ctPsRF hNulgO trigger"
           onBlur={[Function]}
           onClick={[Function]}
           size="larger"
         >
           <div
-            className="sc-gTgzIj iBbPvr"
+            className="sc-jgHCyG ggoAVK"
           >
             <span
-              className="sc-hTZhsR efszGr"
+              className="sc-khAkjo czGiUk"
             >
               <span
-                className="sc-AzgDb KWrWa"
+                className="sc-cOajty bhOZzC"
               />
               <span
-                className="sc-AzgDb oLHEo"
+                className="sc-cOajty YhWvc"
               />
               <span
-                className="sc-AzgDb kljPav"
+                className="sc-cOajty ixXHBj"
               />
             </span>
           </div>
           <div
-            className="sc-laRPJI WcEGc"
+            className="sc-gTgzIj ocZsR"
           >
             All
           </div>
@@ -259,38 +259,38 @@ exports[`Storyshots Components/Selector/Healthselector Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     With custom labels (Triggering StoryBook actions)
   </h3>
   <div
-    className="sc-cOajty jdUgVl sc-healthselector"
+    className="sc-bBrOnJ dnejfq sc-healthselector"
   >
     <button
-      className="sc-bqyKva sc-jgHCyG iTJbnG hWrxbt trigger"
+      className="sc-dQppl sc-hTZhsR ebkNMt gLMXVu trigger"
       onBlur={[Function]}
       onClick={[Function]}
       size="base"
     >
       <div
-        className="sc-gTgzIj iBbPvr"
+        className="sc-jgHCyG ggoAVK"
       >
         <span
-          className="sc-hTZhsR efszGr"
+          className="sc-khAkjo czGiUk"
         >
           <span
-            className="sc-AzgDb KWrWa"
+            className="sc-cOajty bhOZzC"
           />
           <span
-            className="sc-AzgDb oLHEo"
+            className="sc-cOajty YhWvc"
           />
           <span
-            className="sc-AzgDb kljPav"
+            className="sc-cOajty ixXHBj"
           />
         </span>
       </div>
       <div
-        className="sc-laRPJI WcEGc"
+        className="sc-gTgzIj ocZsR"
       >
         Custom1
       </div>
diff --git a/src/__snapshots__/input.stories.storyshot b/src/__snapshots__/input.stories.storyshot
index 2266d71702..4f5b53e2e8 100644
--- a/src/__snapshots__/input.stories.storyshot
+++ b/src/__snapshots__/input.stories.storyshot
@@ -2,18 +2,18 @@
 
 exports[`Storyshots Components/Input/Input Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Input without label
   </h3>
   <div
-    className="sc-lcujXC fvEOYM sc-input"
+    className="sc-ehSCib gyAKjF sc-input"
   >
     <div
-      className="sc-fbkhIv efjuAa sc-input-wrapper"
+      className="sc-clsHhM gcPLJv sc-input-wrapper"
     >
       <input
         autoComplete="off"
@@ -29,21 +29,21 @@ exports[`Storyshots Components/Input/Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Input with label
   </h3>
   <div
-    className="sc-lcujXC fvEOYM sc-input"
+    className="sc-ehSCib gyAKjF sc-input"
   >
     <label
-      className="sc-gGmIRh juInJw sc-input-label"
+      className="sc-lcujXC beGhzZ sc-input-label"
       htmlFor="id2"
     >
       label
     </label>
     <div
-      className="sc-fbkhIv efjuAa sc-input-wrapper"
+      className="sc-clsHhM gcPLJv sc-input-wrapper"
     >
       <input
         autoComplete="off"
@@ -58,21 +58,21 @@ exports[`Storyshots Components/Input/Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Input with error
   </h3>
   <div
-    className="sc-lcujXC jELnLd sc-input"
+    className="sc-ehSCib XlrPg sc-input"
   >
     <label
-      className="sc-gGmIRh juInJw sc-input-label"
+      className="sc-lcujXC beGhzZ sc-input-label"
       htmlFor="id3"
     >
       label
     </label>
     <div
-      className="sc-fbkhIv efjuAa sc-input-wrapper"
+      className="sc-clsHhM gcPLJv sc-input-wrapper"
     >
       <input
         autoComplete="off"
@@ -85,31 +85,31 @@ exports[`Storyshots Components/Input/Input Default 1`] = `
         value="value"
       />
       <span
-        className="sc-clsHhM zJfVP sc-input-error"
+        className="sc-gGmIRh kChVIs sc-input-error"
       >
         error
       </span>
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Input with long error
   </h3>
   <div
-    className="sc-gsBrbv eEoDIn"
+    className="sc-iIEYCM LzFwF"
   >
     <div
-      className="sc-lcujXC jELnLd sc-input"
+      className="sc-ehSCib XlrPg sc-input"
     >
       <label
-        className="sc-gGmIRh juInJw sc-input-label"
+        className="sc-lcujXC beGhzZ sc-input-label"
         htmlFor="id3"
       >
         label
       </label>
       <div
-        className="sc-fbkhIv efjuAa sc-input-wrapper"
+        className="sc-clsHhM gcPLJv sc-input-wrapper"
       >
         <input
           autoComplete="off"
@@ -122,7 +122,7 @@ exports[`Storyshots Components/Input/Input Default 1`] = `
           value="value"
         />
         <span
-          className="sc-clsHhM zJfVP sc-input-error"
+          className="sc-gGmIRh kChVIs sc-input-error"
         >
           long error error error error error error error error error
         </span>
@@ -130,26 +130,26 @@ exports[`Storyshots Components/Input/Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Checkbox Input
   </h3>
   <div
-    className="sc-lcujXC fvEOYM sc-input"
+    className="sc-ehSCib gyAKjF sc-input"
     type="checkbox"
   >
     <label
-      className="sc-gGmIRh juInJw sc-input-label"
+      className="sc-lcujXC beGhzZ sc-input-label"
       htmlFor="id4"
     >
       label
     </label>
     <div
-      className="sc-fbkhIv efjuAa sc-input-wrapper"
+      className="sc-clsHhM gcPLJv sc-input-wrapper"
     >
       <label
         checked={false}
-        className="sc-idOhPF kSxlDv sc-checkbox"
+        className="sc-bkzZxe lcxcuX sc-checkbox"
       >
         <input
           checked={false}
@@ -165,26 +165,26 @@ exports[`Storyshots Components/Input/Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Checkbox Input with error
   </h3>
   <div
-    className="sc-lcujXC jELnLd sc-input"
+    className="sc-ehSCib XlrPg sc-input"
     type="checkbox"
   >
     <label
-      className="sc-gGmIRh juInJw sc-input-label"
+      className="sc-lcujXC beGhzZ sc-input-label"
       htmlFor="id5"
     >
       label
     </label>
     <div
-      className="sc-fbkhIv efjuAa sc-input-wrapper"
+      className="sc-clsHhM gcPLJv sc-input-wrapper"
     >
       <label
         checked={false}
-        className="sc-idOhPF kSxlDv sc-checkbox"
+        className="sc-bkzZxe lcxcuX sc-checkbox"
       >
         <input
           checked={false}
@@ -198,32 +198,32 @@ exports[`Storyshots Components/Input/Input Default 1`] = `
         />
       </label>
       <span
-        className="sc-clsHhM zJfVP sc-input-error"
+        className="sc-gGmIRh kChVIs sc-input-error"
       >
         error
       </span>
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Select Input
   </h3>
   <div
-    className="sc-lcujXC fvEOYM sc-input"
+    className="sc-ehSCib gyAKjF sc-input"
     type="select"
   >
     <label
-      className="sc-gGmIRh juInJw sc-input-label"
+      className="sc-lcujXC beGhzZ sc-input-label"
       htmlFor="id6"
     >
       label
     </label>
     <div
-      className="sc-fbkhIv efjuAa sc-input-wrapper"
+      className="sc-clsHhM gcPLJv sc-input-wrapper"
     >
       <div
-        className="sc-higXBA eESVnP sc-select-container"
+        className="sc-nFpLZ fZfiNc sc-select-container"
       >
         <div
           className="sc-select css-2b097c-container"
@@ -339,25 +339,25 @@ exports[`Storyshots Components/Input/Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Textarea Input
   </h3>
   <div
-    className="sc-lcujXC fvEOYM sc-input"
+    className="sc-ehSCib gyAKjF sc-input"
     type="textarea"
   >
     <label
-      className="sc-gGmIRh juInJw sc-input-label"
+      className="sc-lcujXC beGhzZ sc-input-label"
       htmlFor="id7"
     >
       label
     </label>
     <div
-      className="sc-fbkhIv efjuAa sc-input-wrapper"
+      className="sc-clsHhM gcPLJv sc-input-wrapper"
     >
       <textarea
-        className="sc-ehSCib gEDqjT sc-textarea"
+        className="sc-higXBA fAJmzw sc-textarea"
         cols={20}
         id="id7"
         onChange={[Function]}
@@ -368,25 +368,25 @@ exports[`Storyshots Components/Input/Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Textarea Input with error
   </h3>
   <div
-    className="sc-lcujXC jELnLd sc-input"
+    className="sc-ehSCib XlrPg sc-input"
     type="textarea"
   >
     <label
-      className="sc-gGmIRh juInJw sc-input-label"
+      className="sc-lcujXC beGhzZ sc-input-label"
       htmlFor="id7"
     >
       label
     </label>
     <div
-      className="sc-fbkhIv efjuAa sc-input-wrapper"
+      className="sc-clsHhM gcPLJv sc-input-wrapper"
     >
       <textarea
-        className="sc-ehSCib gEDqjT sc-textarea"
+        className="sc-higXBA fAJmzw sc-textarea"
         cols={50}
         id="id7"
         onChange={[Function]}
@@ -395,23 +395,23 @@ exports[`Storyshots Components/Input/Input Default 1`] = `
         value="Hello"
       />
       <span
-        className="sc-clsHhM zJfVP sc-input-error"
+        className="sc-gGmIRh kChVIs sc-input-error"
       >
         error
       </span>
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Number Input (Max 100)
   </h3>
   <div
-    className="sc-lcujXC iYTsbO sc-input"
+    className="sc-ehSCib isqjGr sc-input"
     type="number"
   >
     <div
-      className="sc-fbkhIv efjuAa sc-input-wrapper"
+      className="sc-clsHhM gcPLJv sc-input-wrapper"
     >
       <div
         className="sc-number-input-wrapper"
diff --git a/src/__snapshots__/lateralnavbarlayout.stories.storyshot b/src/__snapshots__/lateralnavbarlayout.stories.storyshot
index 5407e0f0b2..91d908e1bf 100644
--- a/src/__snapshots__/lateralnavbarlayout.stories.storyshot
+++ b/src/__snapshots__/lateralnavbarlayout.stories.storyshot
@@ -2,21 +2,21 @@
 
 exports[`Storyshots Components/Navigation/LateralNavbarLayout Hoverable Sidebar 1`] = `
 <div
-  className="sc-jONnTn jIwPKP sc-lateralnavbarlayout"
+  className="sc-aemoO iEESht sc-lateralnavbarlayout"
 >
   <div
-    className="sc-hlTvYk gZjpFN"
+    className="sc-jONnTn bqkHYq"
   >
     <div
-      className="sc-GqfZa deLbXA"
+      className="sc-fbkhIv hTSJbj"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kvsuhP sc-sidebar"
+        className="sc-GqfZa iyMSLX sc-sidebar"
       >
         <button
-          className="sc-bqyKva lcpyWu sc-button"
+          className="sc-dQppl ctPsRF sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -24,13 +24,13 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Hoverable Sidebar
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="larger"
               >
                 <i
@@ -38,7 +38,7 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Hoverable Sidebar
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -46,30 +46,30 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Hoverable Sidebar
           </span>
         </button>
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           data-cy="Dashboard"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Servers"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
@@ -77,13 +77,13 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Hoverable Sidebar
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Disks"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
@@ -93,15 +93,15 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Hoverable Sidebar
       </div>
     </div>
     <div
-      className="sc-eLgOdN esBcHq main"
+      className="sc-hlTvYk dXOCjh main"
     >
       <div
-        className="sc-iqHYGH iErTGX sc-loader"
+        className="sc-kEjbxe ktYAhq sc-loader"
         color="#87929D"
         size="massive"
       >
         <span
-          className="sc-dQppl cbDpju"
+          className="sc-crrsfI bkmyhs"
         >
           <svg
             height="50"
@@ -227,44 +227,44 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Hoverable Sidebar
 exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar Docked 1`] = `
 <div>
   <div
-    className="sc-jONnTn jIwPKP sc-lateralnavbarlayout"
+    className="sc-aemoO iEESht sc-lateralnavbarlayout"
   >
     <div
-      className="sc-hlTvYk gZjpFN"
+      className="sc-jONnTn bqkHYq"
     >
       <div
-        className="sc-GqfZa deLbXA"
+        className="sc-fbkhIv hTSJbj"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
         <div
-          className="sc-fWSCIC kvsuhP sc-sidebar"
+          className="sc-GqfZa iyMSLX sc-sidebar"
         >
           <div
-            className="sc-dwfUOf egTwPX sc-sidebar-item"
+            className="sc-fWSCIC frzHjd sc-sidebar-item"
             data-cy="Dashboard"
             onClick={[Function]}
             title="Dashboard"
           >
             <div
-              className="sc-aemoO hANCoY"
+              className="sc-jHVexB hUAfxS"
             >
               <i
                 className="fas fa-tachometer-alt"
               />
             </div>
             <div
-              className="sc-jHVexB bKzHav"
+              className="sc-TmcTc fJKvGZ"
             />
           </div>
           <div
-            className="sc-dwfUOf hVoQQq sc-sidebar-item"
+            className="sc-fWSCIC bJYPKA sc-sidebar-item"
             data-cy="Servers"
             onClick={[Function]}
             title="Servers"
           >
             <div
-              className="sc-aemoO hANCoY"
+              className="sc-jHVexB hUAfxS"
             >
               <i
                 className="fas fa-server"
@@ -272,13 +272,13 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar Docked 1`]
             </div>
           </div>
           <div
-            className="sc-dwfUOf hVoQQq sc-sidebar-item"
+            className="sc-fWSCIC bJYPKA sc-sidebar-item"
             data-cy="Disks"
             onClick={[Function]}
             title="Disks"
           >
             <div
-              className="sc-aemoO hANCoY"
+              className="sc-jHVexB hUAfxS"
             >
               <i
                 className="fas fa-hdd"
@@ -288,15 +288,15 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar Docked 1`]
         </div>
       </div>
       <div
-        className="sc-eLgOdN esBcHq main"
+        className="sc-hlTvYk dXOCjh main"
       >
         <div
-          className="sc-iqHYGH iErTGX sc-loader"
+          className="sc-kEjbxe ktYAhq sc-loader"
           color="#87929D"
           size="massive"
         >
           <span
-            className="sc-dQppl cbDpju"
+            className="sc-crrsfI bkmyhs"
           >
             <svg
               height="50"
@@ -422,75 +422,75 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar Docked 1`]
 
 exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar Expanded 1`] = `
 <div
-  className="sc-jONnTn jIwPKP sc-lateralnavbarlayout"
+  className="sc-aemoO iEESht sc-lateralnavbarlayout"
 >
   <div
-    className="sc-hlTvYk gZjpFN"
+    className="sc-jONnTn bqkHYq"
   >
     <div
-      className="sc-GqfZa jOrJEv"
+      className="sc-fbkhIv kvlkHA"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kjFTGg sc-sidebar"
+        className="sc-GqfZa iSWIaw sc-sidebar"
       >
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           data-cy="Dashboard"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Dashboard
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Servers"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Servers
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Disks"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Disks
           </div>
@@ -498,15 +498,15 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar Expanded 1
       </div>
     </div>
     <div
-      className="sc-eLgOdN esBcHq main"
+      className="sc-hlTvYk dXOCjh main"
     >
       <div
-        className="sc-iqHYGH iErTGX sc-loader"
+        className="sc-kEjbxe ktYAhq sc-loader"
         color="#87929D"
         size="massive"
       >
         <span
-          className="sc-dQppl cbDpju"
+          className="sc-crrsfI bkmyhs"
         >
           <svg
             height="50"
@@ -631,24 +631,24 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar Expanded 1
 
 exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar With Toggle 1`] = `
 <div
-  className="sc-jONnTn jIwPKP sc-lateralnavbarlayout"
+  className="sc-aemoO iEESht sc-lateralnavbarlayout"
 >
   <div
-    className="sc-hlTvYk gZjpFN"
+    className="sc-jONnTn bqkHYq"
   >
     <div
-      className="sc-GqfZa jOrJEv"
+      className="sc-fbkhIv kvlkHA"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kjFTGg sc-sidebar"
+        className="sc-GqfZa iSWIaw sc-sidebar"
       >
         <div
-          className="sc-aemoO hANCoY"
+          className="sc-jHVexB hUAfxS"
         >
           <button
-            className="sc-bqyKva lcpyWu sc-button"
+            className="sc-dQppl ctPsRF sc-button"
             disabled={false}
             onClick={[Function]}
             size="larger"
@@ -656,13 +656,13 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar With Toggl
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="larger"
                 >
                   <i
@@ -670,7 +670,7 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar With Toggl
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -679,61 +679,61 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar With Toggl
           </button>
         </div>
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           data-cy="Dashboard"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Dashboard
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Servers"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Servers
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Disks"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Disks
           </div>
@@ -741,15 +741,15 @@ exports[`Storyshots Components/Navigation/LateralNavbarLayout Sidebar With Toggl
       </div>
     </div>
     <div
-      className="sc-eLgOdN esBcHq main"
+      className="sc-hlTvYk dXOCjh main"
     >
       <div
-        className="sc-iqHYGH iErTGX sc-loader"
+        className="sc-kEjbxe ktYAhq sc-loader"
         color="#87929D"
         size="massive"
       >
         <span
-          className="sc-dQppl cbDpju"
+          className="sc-crrsfI bkmyhs"
         >
           <svg
             height="50"
diff --git a/src/__snapshots__/layout.stories.storyshot b/src/__snapshots__/layout.stories.storyshot
index c557287824..fbd8347c5c 100644
--- a/src/__snapshots__/layout.stories.storyshot
+++ b/src/__snapshots__/layout.stories.storyshot
@@ -2,19 +2,19 @@
 
 exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
 <div
-  className="sc-fbNXWD kCNnvw sc-layout"
+  className="sc-fvhGYg hvdbUc sc-layout"
 >
   <div
-    className="sc-bTvRPi iyMCKI sc-navbar"
+    className="sc-eLgOdN hxBvEk sc-navbar"
   >
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-fvhGYg iuOwQo sc-logo"
+          className="sc-jQbIHB cgHPNr sc-logo"
         >
           <svg
             height="49"
@@ -86,26 +86,26 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
         </div>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <h1
-          className="sc-jQbIHB gDUTJe"
+          className="sc-jUEnpm legIER"
         >
           Harware UI
         </h1>
       </div>
     </div>
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -113,7 +113,7 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -121,17 +121,17 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               FR
             </span>
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -139,7 +139,7 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -149,10 +149,10 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -160,7 +160,7 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -170,10 +170,10 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -181,7 +181,7 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -189,7 +189,7 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               Carlito
             </span>
@@ -199,18 +199,18 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
     </div>
   </div>
   <div
-    className="sc-GTWni hVkvGt"
+    className="sc-fbNXWD hPXqzT"
   >
     <div
-      className="sc-GqfZa deLbXA"
+      className="sc-fbkhIv hTSJbj"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kvsuhP sc-sidebar"
+        className="sc-GqfZa iyMSLX sc-sidebar"
       >
         <button
-          className="sc-bqyKva lcpyWu sc-button"
+          className="sc-dQppl ctPsRF sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -218,13 +218,13 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="larger"
               >
                 <i
@@ -232,7 +232,7 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -240,30 +240,30 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
           </span>
         </button>
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           data-cy="Dashboard"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Servers"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
@@ -271,13 +271,13 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Disks"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
@@ -287,15 +287,15 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
       </div>
     </div>
     <div
-      className="sc-gsxnyZ kLBaJs main"
+      className="sc-GTWni cQYfNq main"
     >
       <div
-        className="sc-iqHYGH iErTGX sc-loader"
+        className="sc-kEjbxe ktYAhq sc-loader"
         color="#87929D"
         size="massive"
       >
         <span
-          className="sc-dQppl cbDpju"
+          className="sc-crrsfI bkmyhs"
         >
           <svg
             height="50"
@@ -420,33 +420,33 @@ exports[`Storyshots Components/Navigation/Layout Hoverable Sidebar 1`] = `
 
 exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
 <div
-  className="sc-fbNXWD kCNnvw sc-layout"
+  className="sc-fvhGYg hvdbUc sc-layout"
 >
   <div
-    className="sc-bTvRPi iyMCKI sc-navbar"
+    className="sc-eLgOdN hxBvEk sc-navbar"
   >
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
         onClick={[Function]}
       >
         <button
-          className="sc-bqyKva lcpyWu sc-button"
+          className="sc-dQppl ctPsRF sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="larger"
               >
                 <i
@@ -454,7 +454,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -463,10 +463,10 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
         </button>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-fvhGYg iuOwQo sc-logo"
+          className="sc-jQbIHB cgHPNr sc-logo"
         >
           <svg
             height="49"
@@ -538,26 +538,26 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
         </div>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <h1
-          className="sc-jQbIHB gDUTJe"
+          className="sc-jUEnpm legIER"
         >
           Harware UI
         </h1>
       </div>
     </div>
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -565,7 +565,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -573,17 +573,17 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               FR
             </span>
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -591,7 +591,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -601,10 +601,10 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -612,7 +612,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -622,10 +622,10 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -633,7 +633,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -641,7 +641,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               Carlito
             </span>
@@ -651,41 +651,41 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
     </div>
   </div>
   <div
-    className="sc-GTWni hVkvGt"
+    className="sc-fbNXWD hPXqzT"
   >
     <div
-      className="sc-GqfZa deLbXA"
+      className="sc-fbkhIv hTSJbj"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kvsuhP sc-sidebar"
+        className="sc-GqfZa iyMSLX sc-sidebar"
       >
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           data-cy="Dashboard"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Servers"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
@@ -693,13 +693,13 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Disks"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
@@ -709,15 +709,15 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
       </div>
     </div>
     <div
-      className="sc-gsxnyZ kLBaJs main"
+      className="sc-GTWni cQYfNq main"
     >
       <div
-        className="sc-iqHYGH iErTGX sc-loader"
+        className="sc-kEjbxe ktYAhq sc-loader"
         color="#87929D"
         size="massive"
       >
         <span
-          className="sc-dQppl cbDpju"
+          className="sc-crrsfI bkmyhs"
         >
           <svg
             height="50"
@@ -842,33 +842,33 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Docked 1`] = `
 
 exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
 <div
-  className="sc-fbNXWD kCNnvw sc-layout"
+  className="sc-fvhGYg hvdbUc sc-layout"
 >
   <div
-    className="sc-bTvRPi iyMCKI sc-navbar"
+    className="sc-eLgOdN hxBvEk sc-navbar"
   >
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
         onClick={[Function]}
       >
         <button
-          className="sc-bqyKva lcpyWu sc-button"
+          className="sc-dQppl ctPsRF sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="larger"
               >
                 <i
@@ -876,7 +876,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -885,10 +885,10 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
         </button>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-fvhGYg iuOwQo sc-logo"
+          className="sc-jQbIHB cgHPNr sc-logo"
         >
           <svg
             height="49"
@@ -960,26 +960,26 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
         </div>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <h1
-          className="sc-jQbIHB gDUTJe"
+          className="sc-jUEnpm legIER"
         >
           Harware UI
         </h1>
       </div>
     </div>
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -987,7 +987,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -995,17 +995,17 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               FR
             </span>
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1013,7 +1013,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -1023,10 +1023,10 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1034,7 +1034,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -1044,10 +1044,10 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1055,7 +1055,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -1063,7 +1063,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               Carlito
             </span>
@@ -1073,72 +1073,72 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
     </div>
   </div>
   <div
-    className="sc-GTWni hVkvGt"
+    className="sc-fbNXWD hPXqzT"
   >
     <div
-      className="sc-GqfZa jOrJEv"
+      className="sc-fbkhIv kvlkHA"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kjFTGg sc-sidebar"
+        className="sc-GqfZa iSWIaw sc-sidebar"
       >
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           data-cy="Dashboard"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Dashboard
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Servers"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Servers
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Disks"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Disks
           </div>
@@ -1146,15 +1146,15 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
       </div>
     </div>
     <div
-      className="sc-gsxnyZ kLBaJs main"
+      className="sc-GTWni cQYfNq main"
     >
       <div
-        className="sc-iqHYGH iErTGX sc-loader"
+        className="sc-kEjbxe ktYAhq sc-loader"
         color="#87929D"
         size="massive"
       >
         <span
-          className="sc-dQppl cbDpju"
+          className="sc-crrsfI bkmyhs"
         >
           <svg
             height="50"
@@ -1279,19 +1279,19 @@ exports[`Storyshots Components/Navigation/Layout Sidebar Expanded 1`] = `
 
 exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
 <div
-  className="sc-fbNXWD kCNnvw sc-layout"
+  className="sc-fvhGYg hvdbUc sc-layout"
 >
   <div
-    className="sc-bTvRPi iyMCKI sc-navbar"
+    className="sc-eLgOdN hxBvEk sc-navbar"
   >
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-fvhGYg iuOwQo sc-logo"
+          className="sc-jQbIHB cgHPNr sc-logo"
         >
           <svg
             height="49"
@@ -1363,26 +1363,26 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
         </div>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <h1
-          className="sc-jQbIHB gDUTJe"
+          className="sc-jUEnpm legIER"
         >
           Harware UI
         </h1>
       </div>
     </div>
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1390,7 +1390,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -1398,17 +1398,17 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               FR
             </span>
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1416,7 +1416,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -1426,10 +1426,10 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1437,7 +1437,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -1447,10 +1447,10 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1458,7 +1458,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -1466,7 +1466,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               Carlito
             </span>
@@ -1476,21 +1476,21 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
     </div>
   </div>
   <div
-    className="sc-GTWni hVkvGt"
+    className="sc-fbNXWD hPXqzT"
   >
     <div
-      className="sc-GqfZa jOrJEv"
+      className="sc-fbkhIv kvlkHA"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kjFTGg sc-sidebar"
+        className="sc-GqfZa iSWIaw sc-sidebar"
       >
         <div
-          className="sc-aemoO hANCoY"
+          className="sc-jHVexB hUAfxS"
         >
           <button
-            className="sc-bqyKva lcpyWu sc-button"
+            className="sc-dQppl ctPsRF sc-button"
             disabled={false}
             onClick={[Function]}
             size="larger"
@@ -1498,13 +1498,13 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="larger"
                 >
                   <i
@@ -1512,7 +1512,7 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -1521,61 +1521,61 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
           </button>
         </div>
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           data-cy="Dashboard"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Dashboard
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Servers"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Servers
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           data-cy="Disks"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Disks
           </div>
@@ -1583,15 +1583,15 @@ exports[`Storyshots Components/Navigation/Layout Sidebar With Toggle 1`] = `
       </div>
     </div>
     <div
-      className="sc-gsxnyZ kLBaJs main"
+      className="sc-GTWni cQYfNq main"
     >
       <div
-        className="sc-iqHYGH iErTGX sc-loader"
+        className="sc-kEjbxe ktYAhq sc-loader"
         color="#87929D"
         size="massive"
       >
         <span
-          className="sc-dQppl cbDpju"
+          className="sc-crrsfI bkmyhs"
         >
           <svg
             height="50"
diff --git a/src/__snapshots__/linechart.stories.storyshot b/src/__snapshots__/linechart.stories.storyshot
index a7e64e0e73..a70e725c74 100644
--- a/src/__snapshots__/linechart.stories.storyshot
+++ b/src/__snapshots__/linechart.stories.storyshot
@@ -2,42 +2,42 @@
 
 exports[`Storyshots Components/Chart/LineChart Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Vega-Lite line chart demo
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="vis"
   />
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Vega-Lite line chart without axis
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="vis2"
   />
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Vega-Lite forecast chart
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="vis_forecast_chart"
   />
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Vega-Lite with strokeDash config, opacity config and custom Tooltip
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="id_strokedash"
   />
 </div>
diff --git a/src/__snapshots__/loader.stories.storyshot b/src/__snapshots__/loader.stories.storyshot
index 5eed4b96d8..beaafa2d5b 100644
--- a/src/__snapshots__/loader.stories.storyshot
+++ b/src/__snapshots__/loader.stories.storyshot
@@ -6,12 +6,12 @@ exports[`Storyshots Components/Progress & loading/Loader Combinations 1`] = `
     style={Object {}}
   >
     <div
-      className="sc-iqHYGH gSBJUA sc-loader"
+      className="sc-kEjbxe kicGPR sc-loader"
       color="#87929D"
       size="base"
     >
       <span
-        className="sc-dQppl cbDpju"
+        className="sc-crrsfI bkmyhs"
       >
         <svg
           height="50"
@@ -141,12 +141,12 @@ exports[`Storyshots Components/Progress & loading/Loader Combinations 1`] = `
     style={Object {}}
   >
     <div
-      className="sc-iqHYGH gOrUsy sc-loader"
+      className="sc-kEjbxe hATnlX sc-loader"
       color="#87929D"
       size="large"
     >
       <span
-        className="sc-dQppl cbDpju"
+        className="sc-crrsfI bkmyhs"
       >
         <svg
           height="50"
@@ -276,12 +276,12 @@ exports[`Storyshots Components/Progress & loading/Loader Combinations 1`] = `
     style={Object {}}
   >
     <div
-      className="sc-iqHYGH eUFvdz sc-loader"
+      className="sc-kEjbxe sSfdS sc-loader"
       color="#87929D"
       size="larger"
     >
       <span
-        className="sc-dQppl cbDpju"
+        className="sc-crrsfI bkmyhs"
       >
         <svg
           height="50"
@@ -411,12 +411,12 @@ exports[`Storyshots Components/Progress & loading/Loader Combinations 1`] = `
     style={Object {}}
   >
     <div
-      className="sc-iqHYGH czLqbZ sc-loader"
+      className="sc-kEjbxe Hrwpo sc-loader"
       color="#87929D"
       size="huge"
     >
       <span
-        className="sc-dQppl cbDpju"
+        className="sc-crrsfI bkmyhs"
       >
         <svg
           height="50"
@@ -546,12 +546,12 @@ exports[`Storyshots Components/Progress & loading/Loader Combinations 1`] = `
     style={Object {}}
   >
     <div
-      className="sc-iqHYGH iErTGX sc-loader"
+      className="sc-kEjbxe ktYAhq sc-loader"
       color="#87929D"
       size="massive"
     >
       <span
-        className="sc-dQppl cbDpju"
+        className="sc-crrsfI bkmyhs"
       >
         <svg
           height="50"
@@ -682,15 +682,15 @@ exports[`Storyshots Components/Progress & loading/Loader Combinations 1`] = `
 
 exports[`Storyshots Components/Progress & loading/Loader With Dynamic Props 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div
-    className="sc-iqHYGH gSBJUA sc-loader"
+    className="sc-kEjbxe kicGPR sc-loader"
     color="#87929D"
     size="base"
   >
     <span
-      className="sc-dQppl cbDpju"
+      className="sc-crrsfI bkmyhs"
     >
       <svg
         height="50"
@@ -807,7 +807,7 @@ exports[`Storyshots Components/Progress & loading/Loader With Dynamic Props 1`]
         </g>
       </svg>
       <span
-        className="sc-crrsfI dUUMaE"
+        className="sc-iqHYGH icalzd"
       >
          
         Loading
diff --git a/src/__snapshots__/modal.stories.storyshot b/src/__snapshots__/modal.stories.storyshot
index ef47aa4486..c6a79c7bc3 100644
--- a/src/__snapshots__/modal.stories.storyshot
+++ b/src/__snapshots__/modal.stories.storyshot
@@ -2,24 +2,24 @@
 
 exports[`Storyshots Components/Notification/Modal Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div
-    className="sc-bXDlPE jlAsWn sc-modal"
+    className="sc-gsxnyZ hPDxAt sc-modal"
   >
     <div
-      className="sc-eGCarw dfayLe sc-modal-content"
+      className="sc-bXDlPE eSfzeQ sc-modal-content"
     >
       <div
-        className="sc-ctaXAZ ewmcrK sc-modal-header"
+        className="sc-eGCarw iDWAqi sc-modal-header"
       >
         <span
-          className="sc-dFJsGO gDAzYA"
+          className="sc-ctaXAZ BZlcC"
         >
           Hello
         </span>
         <div
-          className="sc-euMpXR cjoeSH"
+          className="sc-gInsOo bsvNpP"
           onClick={[Function]}
         >
           <i
@@ -28,14 +28,14 @@ exports[`Storyshots Components/Notification/Modal Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-bsipQr iUDhfb sc-modal-body"
+        className="sc-dFJsGO klfQcL sc-modal-body"
       >
         <span>
           Do you want a cookie?
         </span>
       </div>
       <div
-        className="sc-gInsOo WqTNV sc-modal-footer"
+        className="sc-bsipQr gQiLdN sc-modal-footer"
       >
         <div
           style={
@@ -46,7 +46,7 @@ exports[`Storyshots Components/Notification/Modal Default 1`] = `
           }
         >
           <button
-            className="sc-bqyKva jRjpjl sc-button"
+            className="sc-dQppl lkukzS sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
@@ -54,13 +54,13 @@ exports[`Storyshots Components/Notification/Modal Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   No
                 </span>
@@ -68,7 +68,7 @@ exports[`Storyshots Components/Notification/Modal Default 1`] = `
             </span>
           </button>
           <button
-            className="sc-bqyKva bEwriQ sc-button"
+            className="sc-dQppl dbiXPX sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
@@ -76,13 +76,13 @@ exports[`Storyshots Components/Notification/Modal Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   Yes
                 </span>
diff --git a/src/__snapshots__/multiselect.stories.storyshot b/src/__snapshots__/multiselect.stories.storyshot
index 1703c69512..5af2a99f01 100644
--- a/src/__snapshots__/multiselect.stories.storyshot
+++ b/src/__snapshots__/multiselect.stories.storyshot
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     MultiSelect List
   </h3>
@@ -13,18 +13,18 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-fHuLdG lgJurI sc-multi-select-list"
+      className="sc-euMpXR csoCtj sc-multi-select-list"
     >
       <h3
-        className="sc-dtTInj kgRkqh"
+        className="sc-fHuLdG hKljWk"
       >
         Destination Locations
       </h3>
       <div
-        className="sc-XhUPp kXrsRW sc-multi-select-list-search"
+        className="sc-dkIXFM gCvjLO sc-multi-select-list-search"
       >
         <div
-          className="sc-higXBA eESVnP sc-select-container"
+          className="sc-nFpLZ fZfiNc sc-select-container"
         >
           <div
             className="sc-select css-2b097c-container"
@@ -131,7 +131,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bqyKva iTJbnG sc-button"
+          className="sc-dQppl ebkNMt sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -139,13 +139,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="base"
               >
                 <i
@@ -153,7 +153,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -162,14 +162,14 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         >
           <label
             checked={true}
-            className="sc-idOhPF gHixSi sc-checkbox"
+            className="sc-bkzZxe tlWPm sc-checkbox"
           >
             <input
               checked={true}
@@ -181,7 +181,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-bqyKva bzbetx sc-button"
+            className="sc-dQppl hxKeQu sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -189,13 +189,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -203,7 +203,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -212,24 +212,24 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </button>
         </div>
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             AWS
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Amazon
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         >
           <button
-            className="sc-bqyKva bMFvFs sc-button"
+            className="sc-dQppl gIKFLn sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -237,13 +237,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -251,7 +251,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -261,14 +261,14 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         >
           <label
             checked={false}
-            className="sc-idOhPF kSxlDv sc-checkbox"
+            className="sc-bkzZxe lcxcuX sc-checkbox"
           >
             <input
               checked={false}
@@ -280,7 +280,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-bqyKva bzbetx sc-button"
+            className="sc-dQppl hxKeQu sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -288,13 +288,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -302,7 +302,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -311,24 +311,24 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </button>
         </div>
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             WM
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Walmart
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         >
           <button
-            className="sc-bqyKva bMFvFs sc-button"
+            className="sc-dQppl gIKFLn sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -336,13 +336,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -350,7 +350,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -362,7 +362,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     MultiSelect List without search
   </h3>
@@ -370,22 +370,22 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-fHuLdG lgJurI sc-multi-select-list"
+      className="sc-euMpXR csoCtj sc-multi-select-list"
     >
       <h3
-        className="sc-dtTInj kgRkqh"
+        className="sc-fHuLdG hKljWk"
       >
         Destination Locations
       </h3>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         >
           <label
             checked={true}
-            className="sc-idOhPF gHixSi sc-checkbox"
+            className="sc-bkzZxe tlWPm sc-checkbox"
           >
             <input
               checked={true}
@@ -397,7 +397,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-bqyKva bzbetx sc-button"
+            className="sc-dQppl hxKeQu sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -405,13 +405,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -419,7 +419,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -428,24 +428,24 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </button>
         </div>
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             AWS
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Amazon
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         >
           <button
-            className="sc-bqyKva bMFvFs sc-button"
+            className="sc-dQppl gIKFLn sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -453,13 +453,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -467,7 +467,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -477,14 +477,14 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         >
           <label
             checked={false}
-            className="sc-idOhPF kSxlDv sc-checkbox"
+            className="sc-bkzZxe lcxcuX sc-checkbox"
           >
             <input
               checked={false}
@@ -496,7 +496,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-bqyKva bzbetx sc-button"
+            className="sc-dQppl hxKeQu sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -504,13 +504,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -518,7 +518,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -527,24 +527,24 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </button>
         </div>
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             WM
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Walmart
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         >
           <button
-            className="sc-bqyKva bMFvFs sc-button"
+            className="sc-dQppl gIKFLn sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -552,13 +552,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -566,7 +566,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -578,7 +578,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     MultiSelect List without Favourite
   </h3>
@@ -586,18 +586,18 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-fHuLdG lgJurI sc-multi-select-list"
+      className="sc-euMpXR csoCtj sc-multi-select-list"
     >
       <h3
-        className="sc-dtTInj kgRkqh"
+        className="sc-fHuLdG hKljWk"
       >
         Destination Locations
       </h3>
       <div
-        className="sc-XhUPp kXrsRW sc-multi-select-list-search"
+        className="sc-dkIXFM gCvjLO sc-multi-select-list-search"
       >
         <div
-          className="sc-higXBA eESVnP sc-select-container"
+          className="sc-nFpLZ fZfiNc sc-select-container"
         >
           <div
             className="sc-select css-2b097c-container"
@@ -704,7 +704,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bqyKva iTJbnG sc-button"
+          className="sc-dQppl ebkNMt sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -712,13 +712,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="base"
               >
                 <i
@@ -726,7 +726,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -735,14 +735,14 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         >
           <label
             checked={true}
-            className="sc-idOhPF gHixSi sc-checkbox"
+            className="sc-bkzZxe tlWPm sc-checkbox"
           >
             <input
               checked={true}
@@ -755,24 +755,24 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </label>
         </div>
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             AWS
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Amazon
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         >
           <button
-            className="sc-bqyKva bMFvFs sc-button"
+            className="sc-dQppl gIKFLn sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -780,13 +780,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -794,7 +794,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -804,14 +804,14 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         >
           <label
             checked={false}
-            className="sc-idOhPF kSxlDv sc-checkbox"
+            className="sc-bkzZxe lcxcuX sc-checkbox"
           >
             <input
               checked={false}
@@ -824,24 +824,24 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </label>
         </div>
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             WM
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Walmart
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         >
           <button
-            className="sc-bqyKva bMFvFs sc-button"
+            className="sc-dQppl gIKFLn sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -849,13 +849,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -863,7 +863,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -875,7 +875,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     MultiSelect List without Favourite and Selectbox
   </h3>
@@ -883,18 +883,18 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-fHuLdG lgJurI sc-multi-select-list"
+      className="sc-euMpXR csoCtj sc-multi-select-list"
     >
       <h3
-        className="sc-dtTInj kgRkqh"
+        className="sc-fHuLdG hKljWk"
       >
         Destination Locations
       </h3>
       <div
-        className="sc-XhUPp kXrsRW sc-multi-select-list-search"
+        className="sc-dkIXFM gCvjLO sc-multi-select-list-search"
       >
         <div
-          className="sc-higXBA eESVnP sc-select-container"
+          className="sc-nFpLZ fZfiNc sc-select-container"
         >
           <div
             className="sc-select css-2b097c-container"
@@ -1001,7 +1001,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bqyKva iTJbnG sc-button"
+          className="sc-dQppl ebkNMt sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -1009,13 +1009,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="base"
               >
                 <i
@@ -1023,7 +1023,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -1032,30 +1032,30 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         />
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             AWS
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Amazon
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         >
           <button
-            className="sc-bqyKva bMFvFs sc-button"
+            className="sc-dQppl gIKFLn sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -1063,13 +1063,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -1077,7 +1077,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -1087,30 +1087,30 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         />
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             WM
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Walmart
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         >
           <button
-            className="sc-bqyKva bMFvFs sc-button"
+            className="sc-dQppl gIKFLn sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -1118,13 +1118,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="base"
                 >
                   <i
@@ -1132,7 +1132,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -1144,7 +1144,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     MultiSelect List without Remove Button, Favourite and Selectbox
   </h3>
@@ -1152,18 +1152,18 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-fHuLdG lgJurI sc-multi-select-list"
+      className="sc-euMpXR csoCtj sc-multi-select-list"
     >
       <h3
-        className="sc-dtTInj kgRkqh"
+        className="sc-fHuLdG hKljWk"
       >
         Destination Locations
       </h3>
       <div
-        className="sc-XhUPp kXrsRW sc-multi-select-list-search"
+        className="sc-dkIXFM gCvjLO sc-multi-select-list-search"
       >
         <div
-          className="sc-higXBA eESVnP sc-select-container"
+          className="sc-nFpLZ fZfiNc sc-select-container"
         >
           <div
             className="sc-select css-2b097c-container"
@@ -1270,7 +1270,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bqyKva iTJbnG sc-button"
+          className="sc-dQppl ebkNMt sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -1278,13 +1278,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="base"
               >
                 <i
@@ -1292,7 +1292,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -1301,57 +1301,57 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         />
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             AWS
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Amazon
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         />
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         />
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             WM
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Walmart
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         />
       </div>
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     MultiSelect List without Title, Remove Button, Favourite and Selectbox
   </h3>
@@ -1359,14 +1359,14 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-fHuLdG lgJurI sc-multi-select-list"
+      className="sc-euMpXR csoCtj sc-multi-select-list"
     >
       
       <div
-        className="sc-XhUPp kXrsRW sc-multi-select-list-search"
+        className="sc-dkIXFM gCvjLO sc-multi-select-list-search"
       >
         <div
-          className="sc-higXBA eESVnP sc-select-container"
+          className="sc-nFpLZ fZfiNc sc-select-container"
         >
           <div
             className="sc-select css-2b097c-container"
@@ -1473,7 +1473,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bqyKva iTJbnG sc-button"
+          className="sc-dQppl ebkNMt sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -1481,13 +1481,13 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="base"
               >
                 <i
@@ -1495,7 +1495,7 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -1504,51 +1504,51 @@ exports[`Storyshots Components/Selector/MultiSelect Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         />
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             AWS
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Amazon
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         />
       </div>
       <div
-        className="sc-dkIXFM jAfPmq sc-multi-select-item"
+        className="sc-dtTInj jeglHi sc-multi-select-item"
       >
         <div
-          className="sc-ikPAkQ glgfEM sc-multi-select-item-left"
+          className="sc-XhUPp kPQOEk sc-multi-select-item-left"
         />
         <div
-          className="sc-tYoTV iypQOB sc-multi-select-item-center"
+          className="sc-ikPAkQ dLDZMk sc-multi-select-item-center"
         >
           <span
-            className="sc-eHfQar dEbBxL sc-multi-select-item-label"
+            className="sc-biBrSq gMjJCr sc-multi-select-item-label"
           >
             WM
           </span>
           <span
-            className="sc-hzMMCg sc-multi-select-item-description"
+            className="sc-eHfQar sc-multi-select-item-description"
           >
             Walmart
           </span>
         </div>
         <div
-          className="sc-biBrSq limCoZ sc-multi-select-item-right"
+          className="sc-tYoTV bLGwys sc-multi-select-item-right"
         />
       </div>
     </div>
diff --git a/src/__snapshots__/navbar.stories.storyshot b/src/__snapshots__/navbar.stories.storyshot
index cf7a916758..db51c20472 100644
--- a/src/__snapshots__/navbar.stories.storyshot
+++ b/src/__snapshots__/navbar.stories.storyshot
@@ -6,30 +6,30 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
     Navbar with toggle
   </h3>
   <div
-    className="sc-bTvRPi iyMCKI sc-navbar"
+    className="sc-eLgOdN hxBvEk sc-navbar"
   >
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
         onClick={[Function]}
       >
         <button
-          className="sc-bqyKva lcpyWu sc-button"
+          className="sc-dQppl ctPsRF sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="larger"
               >
                 <i
@@ -37,7 +37,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -46,10 +46,10 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-fvhGYg iuOwQo sc-logo"
+          className="sc-jQbIHB cgHPNr sc-logo"
         >
           <svg
             height="49"
@@ -121,21 +121,21 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <h1
-          className="sc-jQbIHB gDUTJe"
+          className="sc-jUEnpm legIER"
         >
           Hardware UI
         </h1>
       </div>
     </div>
     <div
-      className="sc-hOqqkJ dvoaWK"
+      className="sc-kIeTtH iBMJPj"
     >
       <div
         aria-selected={true}
-        className="sc-dtwoBo jvVXwL"
+        className="sc-hOqqkJ esGEZs"
         onClick={[Function]}
         role="tab"
         selected={true}
@@ -146,7 +146,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -157,7 +157,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -168,7 +168,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -179,7 +179,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -190,16 +190,16 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -207,7 +207,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -215,17 +215,17 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               FR
             </span>
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -233,7 +233,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -243,10 +243,10 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -254,7 +254,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -264,7 +264,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bqyKva lcpyWu sc-button"
+          className="sc-dQppl ctPsRF sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -272,13 +272,13 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="larger"
               >
                 <i
@@ -286,7 +286,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -294,10 +294,10 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           </span>
         </button>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -305,7 +305,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -313,7 +313,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               Carlito
             </span>
@@ -326,16 +326,16 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
     Navbar without toggle
   </h3>
   <div
-    className="sc-bTvRPi iyMCKI sc-navbar"
+    className="sc-eLgOdN hxBvEk sc-navbar"
   >
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-fvhGYg iuOwQo sc-logo"
+          className="sc-jQbIHB cgHPNr sc-logo"
         >
           <svg
             height="49"
@@ -407,21 +407,21 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <h1
-          className="sc-jQbIHB gDUTJe"
+          className="sc-jUEnpm legIER"
         >
           Hardware UI
         </h1>
       </div>
     </div>
     <div
-      className="sc-hOqqkJ dvoaWK"
+      className="sc-kIeTtH iBMJPj"
     >
       <div
         aria-selected={true}
-        className="sc-dtwoBo jvVXwL"
+        className="sc-hOqqkJ esGEZs"
         onClick={[Function]}
         role="tab"
         selected={true}
@@ -432,7 +432,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -443,7 +443,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -454,7 +454,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -465,7 +465,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -476,16 +476,16 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -493,7 +493,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -501,17 +501,17 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               FR
             </span>
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -519,7 +519,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -529,10 +529,10 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -540,7 +540,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -550,7 +550,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bqyKva lcpyWu sc-button"
+          className="sc-dQppl ctPsRF sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -558,13 +558,13 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="larger"
               >
                 <i
@@ -572,7 +572,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -580,10 +580,10 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           </span>
         </button>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -591,7 +591,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -599,7 +599,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               Carlito
             </span>
@@ -612,30 +612,30 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
     Navbar with customized logo
   </h3>
   <div
-    className="sc-bTvRPi iyMCKI sc-navbar"
+    className="sc-eLgOdN hxBvEk sc-navbar"
   >
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
         onClick={[Function]}
       >
         <button
-          className="sc-bqyKva lcpyWu sc-button"
+          className="sc-dQppl ctPsRF sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="larger"
               >
                 <i
@@ -643,7 +643,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -652,10 +652,10 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-fvhGYg iuOwQo sc-logo"
+          className="sc-jQbIHB cgHPNr sc-logo"
         >
           <i
             className="fas fa-ring"
@@ -663,21 +663,21 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <h1
-          className="sc-jQbIHB gDUTJe"
+          className="sc-jUEnpm legIER"
         >
           Hardware UI
         </h1>
       </div>
     </div>
     <div
-      className="sc-hOqqkJ dvoaWK"
+      className="sc-kIeTtH iBMJPj"
     >
       <div
         aria-selected={true}
-        className="sc-dtwoBo jvVXwL"
+        className="sc-hOqqkJ esGEZs"
         onClick={[Function]}
         role="tab"
         selected={true}
@@ -688,7 +688,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -699,7 +699,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -710,7 +710,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -721,7 +721,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -732,16 +732,16 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -749,7 +749,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -757,17 +757,17 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               FR
             </span>
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -775,7 +775,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -785,10 +785,10 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           </div>
         </div>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -796,7 +796,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz hFNOsv"
+              className="sc-bqyKva osfTx"
               size="larger"
             >
               <i
@@ -806,7 +806,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bqyKva lcpyWu sc-button"
+          className="sc-dQppl ctPsRF sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -814,13 +814,13 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="larger"
               >
                 <i
@@ -828,7 +828,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -836,10 +836,10 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
           </span>
         </button>
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -847,7 +847,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -855,7 +855,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               Carlito
             </span>
@@ -868,16 +868,16 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
     Navbar with only tabs
   </h3>
   <div
-    className="sc-bTvRPi iyMCKI sc-navbar"
+    className="sc-eLgOdN hxBvEk sc-navbar"
   >
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-fvhGYg iuOwQo sc-logo"
+          className="sc-jQbIHB cgHPNr sc-logo"
         >
           <svg
             height="49"
@@ -950,11 +950,11 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-hOqqkJ dvoaWK"
+      className="sc-kIeTtH iBMJPj"
     >
       <div
         aria-selected={true}
-        className="sc-dtwoBo jvVXwL"
+        className="sc-hOqqkJ esGEZs"
         onClick={[Function]}
         role="tab"
         selected={true}
@@ -965,7 +965,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -976,7 +976,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -987,7 +987,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -998,7 +998,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
       <div
         aria-selected={false}
-        className="sc-dtwoBo dMxJXd"
+        className="sc-hOqqkJ ivyiMm"
         onClick={[Function]}
         role="tab"
         selected={false}
@@ -1009,16 +1009,16 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1026,7 +1026,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -1034,7 +1034,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               Carlito
             </span>
@@ -1047,16 +1047,16 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
     Navbar with only link tabs
   </h3>
   <div
-    className="sc-bTvRPi iyMCKI sc-navbar"
+    className="sc-eLgOdN hxBvEk sc-navbar"
   >
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-fvhGYg iuOwQo sc-logo"
+          className="sc-jQbIHB cgHPNr sc-logo"
         >
           <svg
             height="49"
@@ -1129,11 +1129,11 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-hOqqkJ dvoaWK"
+      className="sc-kIeTtH iBMJPj"
     >
       <div
         aria-selected={true}
-        className="sc-dtwoBo sc-dacFzL jvVXwL kNoNju"
+        className="sc-hOqqkJ sc-dtwoBo esGEZs jCfvfx"
         role="tab"
         selected={true}
       >
@@ -1144,7 +1144,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
         </a>
       </div>
       <div
-        className="sc-dtwoBo sc-dacFzL dMxJXd gSuNGK"
+        className="sc-hOqqkJ sc-dtwoBo ivyiMm fLtiRl"
         role="tab"
       >
         <a
@@ -1154,7 +1154,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
         </a>
       </div>
       <div
-        className="sc-dtwoBo sc-dacFzL dMxJXd gSuNGK"
+        className="sc-hOqqkJ sc-dtwoBo ivyiMm fLtiRl"
         role="tab"
       >
         <a
@@ -1164,7 +1164,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
         </a>
       </div>
       <div
-        className="sc-dtwoBo sc-dacFzL dMxJXd gSuNGK"
+        className="sc-hOqqkJ sc-dtwoBo ivyiMm fLtiRl"
         role="tab"
       >
         <a
@@ -1174,7 +1174,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
         </a>
       </div>
       <div
-        className="sc-dtwoBo sc-dacFzL dMxJXd gSuNGK"
+        className="sc-hOqqkJ sc-dtwoBo ivyiMm fLtiRl"
         role="tab"
       >
         <a
@@ -1185,16 +1185,16 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-kIeTtH dLjTGb"
+      className="sc-bTvRPi diyyAn"
     >
       <div
-        className="sc-jUEnpm DPzaS"
+        className="sc-dacFzL JlzF"
       >
         <div
-          className="sc-citwmv cZSRlS sc-dropdown"
+          className="sc-cBNfnY iBrVvG sc-dropdown"
         >
           <div
-            className="sc-iBaPrD bDMcNI trigger"
+            className="sc-iUuytg fEdNZv trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1202,7 +1202,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
             tabIndex="0"
           >
             <span
-              className="sc-kstrdz gLcDls"
+              className="sc-bqyKva klTaQG"
               size="larger"
             >
               <i
@@ -1210,7 +1210,7 @@ exports[`Storyshots Components/Navigation/Navbar Default 1`] = `
               />
             </span>
             <span
-              className="sc-hBEYos jaVYGW sc-trigger-text"
+              className="sc-kstrdz ZegCk sc-trigger-text"
             >
               Carlito
             </span>
diff --git a/src/__snapshots__/notifications.stories.storyshot b/src/__snapshots__/notifications.stories.storyshot
index 8bd10f038a..1abfa35cdf 100644
--- a/src/__snapshots__/notifications.stories.storyshot
+++ b/src/__snapshots__/notifications.stories.storyshot
@@ -2,19 +2,19 @@
 
 exports[`Storyshots Components/Notification/Notifications Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div
-    className="sc-bQdQlF hAJtRV sc-notifications"
+    className="sc-jGVbCA gTpVIu sc-notifications"
   >
     <div
-      className="sc-kYrkKh ixFJIg sc-notification"
+      className="sc-hzMMCg bNOCzm sc-notification"
       data-cy="Carlito_notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-xyEjG ehxNdL"
+        className="sc-kYrkKh fZmdlK"
       >
         Hi
       </div>
@@ -22,7 +22,7 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
         I am Carlito. I live at TOP_RIGHT
       </div>
       <div
-        className="sc-jGVbCA clAzfx"
+        className="sc-dWdcrH jdVsSU"
         onClick={[Function]}
       >
         <i
@@ -31,13 +31,13 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-kYrkKh evqfrO sc-notification"
+      className="sc-hzMMCg giMBEk sc-notification"
       data-cy="Patrick_notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-xyEjG ehxNdL"
+        className="sc-kYrkKh fZmdlK"
       >
         Hi
       </div>
@@ -45,7 +45,7 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
         I am Patrick. I live at TOP_RIGHT
       </div>
       <div
-        className="sc-jGVbCA clAzfx"
+        className="sc-dWdcrH jdVsSU"
         onClick={[Function]}
       >
         <i
@@ -55,15 +55,15 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-bQdQlF eqXDDS sc-notifications"
+    className="sc-jGVbCA hfEVqh sc-notifications"
   >
     <div
-      className="sc-kYrkKh kZRxUt sc-notification"
+      className="sc-hzMMCg boBKaL sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-xyEjG ehxNdL"
+        className="sc-kYrkKh fZmdlK"
       >
         Hi
       </div>
@@ -71,7 +71,7 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
         I am Jordi. I live at TOP_LEFT
       </div>
       <div
-        className="sc-jGVbCA clAzfx"
+        className="sc-dWdcrH jdVsSU"
         onClick={[Function]}
       >
         <i
@@ -80,12 +80,12 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-kYrkKh kTnqJY sc-notification"
+      className="sc-hzMMCg cbNYXC sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-xyEjG ehxNdL"
+        className="sc-kYrkKh fZmdlK"
       >
         Hi
       </div>
@@ -93,12 +93,12 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
         I am Guidllaume. I live at TOP_LEFT
       </div>
       <div
-        className="sc-dWdcrH bhluln"
+        className="sc-xyEjG kJbBlI"
         max={10000}
         value={0}
       />
       <div
-        className="sc-jGVbCA clAzfx"
+        className="sc-dWdcrH jdVsSU"
         onClick={[Function]}
       >
         <i
@@ -108,15 +108,15 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-bQdQlF gvcCUm sc-notifications"
+    className="sc-jGVbCA cgKcmd sc-notifications"
   >
     <div
-      className="sc-kYrkKh gFeDje sc-notification"
+      className="sc-hzMMCg bFiCvs sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-xyEjG ehxNdL"
+        className="sc-kYrkKh fZmdlK"
       >
         Hi
       </div>
@@ -124,7 +124,7 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
         I am Teddy. I live at BOTTOM_LEFT
       </div>
       <div
-        className="sc-jGVbCA clAzfx"
+        className="sc-dWdcrH jdVsSU"
         onClick={[Function]}
       >
         <i
@@ -133,12 +133,12 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-kYrkKh kTnqJY sc-notification"
+      className="sc-hzMMCg cbNYXC sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-xyEjG ehxNdL"
+        className="sc-kYrkKh fZmdlK"
       >
         Hi
       </div>
@@ -146,12 +146,12 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
         I am Yanjin. I live at BOTTOM_LEFT
       </div>
       <div
-        className="sc-dWdcrH bhluln"
+        className="sc-xyEjG kJbBlI"
         max={10000}
         value={0}
       />
       <div
-        className="sc-jGVbCA clAzfx"
+        className="sc-dWdcrH jdVsSU"
         onClick={[Function]}
       >
         <i
@@ -161,15 +161,15 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-bQdQlF dxzNCF sc-notifications"
+    className="sc-jGVbCA dZYWzu sc-notifications"
   >
     <div
-      className="sc-kYrkKh kZRxUt sc-notification"
+      className="sc-hzMMCg boBKaL sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-xyEjG ehxNdL"
+        className="sc-kYrkKh fZmdlK"
       >
         Hi
       </div>
@@ -177,7 +177,7 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
         I am Charles. I live at BOTTOM_RIGHT
       </div>
       <div
-        className="sc-jGVbCA clAzfx"
+        className="sc-dWdcrH jdVsSU"
         onClick={[Function]}
       >
         <i
@@ -186,12 +186,12 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-kYrkKh gFeDje sc-notification"
+      className="sc-hzMMCg bFiCvs sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-xyEjG ehxNdL"
+        className="sc-kYrkKh fZmdlK"
       >
         Hi
       </div>
@@ -199,7 +199,7 @@ exports[`Storyshots Components/Notification/Notifications Default 1`] = `
         I am Claude. I live at BOTTOM_RIGHT
       </div>
       <div
-        className="sc-jGVbCA clAzfx"
+        className="sc-dWdcrH jdVsSU"
         onClick={[Function]}
       >
         <i
diff --git a/src/__snapshots__/progressbar.stories.storyshot b/src/__snapshots__/progressbar.stories.storyshot
index c0fb38e2cd..045d09b188 100644
--- a/src/__snapshots__/progressbar.stories.storyshot
+++ b/src/__snapshots__/progressbar.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Progress & loading/ProgressBar Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div
     style={
@@ -12,289 +12,289 @@ exports[`Storyshots Components/Progress & loading/ProgressBar Default 1`] = `
     }
   >
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Smaller
     </h3>
     <div
-      className="sc-fXoxut sc-progressbar"
+      className="sc-bQdQlF sc-progressbar"
     >
       <div
-        className="sc-ljRboo dsAZE"
+        className="sc-fmlJLJ hZaMpB"
       >
         <span
-          className="sc-jXktwP inffXm sc-progressbar-topLeftLabel"
+          className="sc-Fyfyc ijHBMr sc-progressbar-topLeftLabel"
         >
           50%
         </span>
         <span
-          className="sc-eFubAy jmPmrF sc-progressbar-toprightlabel"
+          className="sc-jXktwP iNla-dz sc-progressbar-toprightlabel"
         >
           100GB Total
         </span>
       </div>
       <div
-        className="sc-Fyfyc bHNlsz sc-progressbarcontainer"
+        className="sc-fXoxut cCHSXM sc-progressbarcontainer"
         size="smaller"
       >
         <div
-          className="sc-dUrnRO fVidBC"
+          className="sc-jmhFOf iLeWPe"
           width={50}
         >
           <div
-            className="sc-httYMd gEWdLN"
+            className="sc-dUrnRO chcpUl"
           >
             50%
           </div>
         </div>
       </div>
       <div
-        className="sc-ljRboo sc-jmhFOf dsAZE pfBzm"
+        className="sc-fmlJLJ sc-ljRboo hZaMpB fSxJiw"
       >
         <span
-          className="sc-fmlJLJ jPyQMN sc-progressbar-bottomleftlabel"
+          className="sc-eFubAy fSnOfu sc-progressbar-bottomleftlabel"
         >
           50GB Used
         </span>
         <span
-          className="sc-fmlJLJ jPyQMN sc-progressbar-bottomrightlabel"
+          className="sc-eFubAy fSnOfu sc-progressbar-bottomrightlabel"
         >
           50GB Free
         </span>
       </div>
     </div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Base
     </h3>
     <div
-      className="sc-fXoxut sc-progressbar"
+      className="sc-bQdQlF sc-progressbar"
     >
       <div
-        className="sc-ljRboo dsAZE"
+        className="sc-fmlJLJ hZaMpB"
       >
         <span
-          className="sc-jXktwP inffXm sc-progressbar-topLeftLabel"
+          className="sc-Fyfyc ijHBMr sc-progressbar-topLeftLabel"
         >
           Usage
         </span>
         <span
-          className="sc-eFubAy jmPmrF sc-progressbar-toprightlabel"
+          className="sc-jXktwP iNla-dz sc-progressbar-toprightlabel"
         >
           50%
         </span>
       </div>
       <div
-        className="sc-Fyfyc jXcbrK sc-progressbarcontainer"
+        className="sc-fXoxut hKlQdh sc-progressbarcontainer"
         size="base"
       >
         <div
-          className="sc-dUrnRO fVidBC"
+          className="sc-jmhFOf iLeWPe"
           width={50}
         >
           <div
-            className="sc-httYMd gEWdLN"
+            className="sc-dUrnRO chcpUl"
           >
             50%
           </div>
         </div>
       </div>
       <div
-        className="sc-ljRboo sc-jmhFOf dsAZE pfBzm"
+        className="sc-fmlJLJ sc-ljRboo hZaMpB fSxJiw"
       >
         <span
-          className="sc-fmlJLJ jPyQMN sc-progressbar-bottomleftlabel"
+          className="sc-eFubAy fSnOfu sc-progressbar-bottomleftlabel"
         >
           5.17TB STORED - 13TB USED
         </span>
         <span
-          className="sc-fmlJLJ jPyQMN sc-progressbar-bottomrightlabel"
+          className="sc-eFubAy fSnOfu sc-progressbar-bottomrightlabel"
         >
           12.9TB FREE - 25.83TB TOTAL
         </span>
       </div>
     </div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Large with animation
     </h3>
     <div
-      className="sc-fXoxut sc-progressbar"
+      className="sc-bQdQlF sc-progressbar"
     >
       <div
-        className="sc-ljRboo dsAZE"
+        className="sc-fmlJLJ hZaMpB"
       >
         <span
-          className="sc-jXktwP inffXm sc-progressbar-topLeftLabel"
+          className="sc-Fyfyc ijHBMr sc-progressbar-topLeftLabel"
         >
           50%
         </span>
         <span
-          className="sc-eFubAy jmPmrF sc-progressbar-toprightlabel"
+          className="sc-jXktwP iNla-dz sc-progressbar-toprightlabel"
         >
           100GB Total
         </span>
       </div>
       <div
-        className="sc-Fyfyc bIVnFu sc-progressbarcontainer"
+        className="sc-fXoxut ANguR sc-progressbarcontainer"
         size="large"
       >
         <div
-          className="sc-dUrnRO hjgbhY"
+          className="sc-jmhFOf fxfbjA"
           width={50}
         >
           <div
-            className="sc-httYMd gEWdLN"
+            className="sc-dUrnRO chcpUl"
           >
             50%
           </div>
         </div>
       </div>
       <div
-        className="sc-ljRboo sc-jmhFOf dsAZE pfBzm"
+        className="sc-fmlJLJ sc-ljRboo hZaMpB fSxJiw"
       >
         <span
-          className="sc-fmlJLJ jPyQMN sc-progressbar-bottomleftlabel"
+          className="sc-eFubAy fSnOfu sc-progressbar-bottomleftlabel"
         >
           50GB Used
         </span>
         <span
-          className="sc-fmlJLJ jPyQMN sc-progressbar-bottomrightlabel"
+          className="sc-eFubAy fSnOfu sc-progressbar-bottomrightlabel"
         >
           50GB Free
         </span>
       </div>
     </div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Larger
     </h3>
     <div
-      className="sc-fXoxut sc-progressbar"
+      className="sc-bQdQlF sc-progressbar"
     >
       <div
-        className="sc-ljRboo dsAZE"
+        className="sc-fmlJLJ hZaMpB"
       >
         <span
-          className="sc-jXktwP inffXm sc-progressbar-topLeftLabel"
+          className="sc-Fyfyc ijHBMr sc-progressbar-topLeftLabel"
         >
           50%
         </span>
         <span
-          className="sc-eFubAy jmPmrF sc-progressbar-toprightlabel"
+          className="sc-jXktwP iNla-dz sc-progressbar-toprightlabel"
         >
           100GB Total
         </span>
       </div>
       <div
-        className="sc-Fyfyc gqfoyR sc-progressbarcontainer"
+        className="sc-fXoxut ebHPFe sc-progressbarcontainer"
         size="larger"
       >
         <div
-          className="sc-dUrnRO fVidBC"
+          className="sc-jmhFOf iLeWPe"
           width={50}
         >
           <div
-            className="sc-httYMd gEWdLN"
+            className="sc-dUrnRO chcpUl"
           >
             50%
           </div>
         </div>
       </div>
       <div
-        className="sc-ljRboo sc-jmhFOf dsAZE pfBzm"
+        className="sc-fmlJLJ sc-ljRboo hZaMpB fSxJiw"
       >
         <span
-          className="sc-fmlJLJ jPyQMN sc-progressbar-bottomleftlabel"
+          className="sc-eFubAy fSnOfu sc-progressbar-bottomleftlabel"
         >
           50GB Used
         </span>
         <span
-          className="sc-fmlJLJ jPyQMN sc-progressbar-bottomrightlabel"
+          className="sc-eFubAy fSnOfu sc-progressbar-bottomrightlabel"
         >
           50GB Free
         </span>
       </div>
     </div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Different colors
     </h3>
     <div
-      className="sc-fXoxut sc-progressbar"
+      className="sc-bQdQlF sc-progressbar"
     >
       <div
-        className="sc-ljRboo dsAZE"
+        className="sc-fmlJLJ hZaMpB"
       >
         <span
-          className="sc-jXktwP inffXm sc-progressbar-topLeftLabel"
+          className="sc-Fyfyc ijHBMr sc-progressbar-topLeftLabel"
         >
           50%
         </span>
         <span
-          className="sc-eFubAy jmPmrF sc-progressbar-toprightlabel"
+          className="sc-jXktwP iNla-dz sc-progressbar-toprightlabel"
         >
           100GB Total
         </span>
       </div>
       <div
-        className="sc-Fyfyc bHNlsz sc-progressbarcontainer"
+        className="sc-fXoxut cCHSXM sc-progressbarcontainer"
         size="smaller"
       >
         <div
-          className="sc-dUrnRO dzfmkq"
+          className="sc-jmhFOf cdNRfu"
           color="#2f67ac"
           width={50}
         >
           <div
-            className="sc-httYMd gEWdLN"
+            className="sc-dUrnRO chcpUl"
           >
             50%
           </div>
         </div>
       </div>
       <div
-        className="sc-ljRboo sc-jmhFOf dsAZE pfBzm"
+        className="sc-fmlJLJ sc-ljRboo hZaMpB fSxJiw"
       >
         <span
-          className="sc-fmlJLJ jPyQMN sc-progressbar-bottomleftlabel"
+          className="sc-eFubAy fSnOfu sc-progressbar-bottomleftlabel"
         >
           50GB Used
         </span>
         <span
-          className="sc-fmlJLJ jPyQMN sc-progressbar-bottomrightlabel"
+          className="sc-eFubAy fSnOfu sc-progressbar-bottomrightlabel"
         >
           50GB Free
         </span>
       </div>
     </div>
     <div
-      className="sc-fXoxut sc-progressbar"
+      className="sc-bQdQlF sc-progressbar"
     >
       <div
-        className="sc-ljRboo dsAZE"
+        className="sc-fmlJLJ hZaMpB"
       >
         <span
-          className="sc-jXktwP inffXm sc-progressbar-topLeftLabel"
+          className="sc-Fyfyc ijHBMr sc-progressbar-topLeftLabel"
         >
           10%
         </span>
       </div>
       <div
-        className="sc-Fyfyc bHNlsz sc-progressbarcontainer"
+        className="sc-fXoxut cCHSXM sc-progressbarcontainer"
         size="smaller"
       >
         <div
-          className="sc-dUrnRO jXobaz"
+          className="sc-jmhFOf dMKEPf"
           color="#ff5722"
           width={10}
         >
           <div
-            className="sc-httYMd gEWdLN"
+            className="sc-dUrnRO chcpUl"
           >
             10%
           </div>
@@ -302,33 +302,33 @@ exports[`Storyshots Components/Progress & loading/ProgressBar Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-fXoxut sc-progressbar"
+      className="sc-bQdQlF sc-progressbar"
     >
       <div
-        className="sc-ljRboo dsAZE"
+        className="sc-fmlJLJ hZaMpB"
       >
         <span
-          className="sc-jXktwP inffXm sc-progressbar-topLeftLabel"
+          className="sc-Fyfyc ijHBMr sc-progressbar-topLeftLabel"
         >
           90% Used
         </span>
         <span
-          className="sc-eFubAy jmPmrF sc-progressbar-toprightlabel"
+          className="sc-jXktwP iNla-dz sc-progressbar-toprightlabel"
         >
           100GB Total
         </span>
       </div>
       <div
-        className="sc-Fyfyc bHNlsz sc-progressbarcontainer"
+        className="sc-fXoxut cCHSXM sc-progressbarcontainer"
         size="smaller"
       >
         <div
-          className="sc-dUrnRO fVpMmB"
+          className="sc-jmhFOf CUMCR"
           color="#982803"
           width={90}
         >
           <div
-            className="sc-httYMd gEWdLN"
+            className="sc-dUrnRO chcpUl"
           >
             90%
           </div>
diff --git a/src/__snapshots__/searchinput.stories.storyshot b/src/__snapshots__/searchinput.stories.storyshot
index 4a19925fc1..9d5ffac734 100644
--- a/src/__snapshots__/searchinput.stories.storyshot
+++ b/src/__snapshots__/searchinput.stories.storyshot
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Components/Input/SearchInput Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Default
   </h3>
@@ -17,14 +17,14 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
     }
   >
     <div
-      className="sc-cbDGPM gjnIXK sc-searchinput"
+      className="sc-httYMd bmRNtt sc-searchinput"
     >
       <div
-        className="sc-lcujXC fvEOYM sc-input"
+        className="sc-ehSCib gyAKjF sc-input"
         type="text"
       >
         <div
-          className="sc-fbkhIv efjuAa sc-input-wrapper"
+          className="sc-clsHhM gcPLJv sc-input-wrapper"
         >
           <input
             autoComplete="off"
@@ -40,7 +40,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
         </div>
       </div>
       <button
-        className="sc-hjWSAi sc-gVgnHT eusfsO jBAXGj"
+        className="sc-cbDGPM sc-hjWSAi iZwYhL hVZPp"
         disabled={false}
         onClick={[Function]}
       >
@@ -49,7 +49,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
         />
       </button>
       <button
-        className="sc-hjWSAi sc-fWPcDo eusfsO gCxoxK"
+        className="sc-cbDGPM sc-gVgnHT iZwYhL jkdbtr"
         onClick={[Function]}
       >
         <i
@@ -59,7 +59,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Search Input filled
   </h3>
@@ -71,15 +71,15 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
     }
   >
     <div
-      className="sc-cbDGPM gjnIXK sc-searchinput"
+      className="sc-httYMd bmRNtt sc-searchinput"
       data-cy="carlito_searchinput"
     >
       <div
-        className="sc-lcujXC fvEOYM sc-input"
+        className="sc-ehSCib gyAKjF sc-input"
         type="text"
       >
         <div
-          className="sc-fbkhIv efjuAa sc-input-wrapper"
+          className="sc-clsHhM gcPLJv sc-input-wrapper"
         >
           <input
             autoComplete="off"
@@ -94,7 +94,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
         </div>
       </div>
       <button
-        className="sc-hjWSAi sc-gVgnHT eusfsO jBAXGj"
+        className="sc-cbDGPM sc-hjWSAi iZwYhL hVZPp"
         disabled={false}
         onClick={[Function]}
       >
@@ -103,7 +103,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
         />
       </button>
       <button
-        className="sc-hjWSAi sc-fWPcDo eusfsO gCxoxK"
+        className="sc-cbDGPM sc-gVgnHT iZwYhL jkdbtr"
         onClick={[Function]}
       >
         <i
@@ -113,7 +113,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Disable the default toggle
   </h3>
@@ -125,14 +125,14 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
     }
   >
     <div
-      className="sc-cbDGPM eXvaJY sc-searchinput"
+      className="sc-httYMd emRlAX sc-searchinput"
     >
       <div
-        className="sc-lcujXC fvEOYM sc-input"
+        className="sc-ehSCib gyAKjF sc-input"
         type="text"
       >
         <div
-          className="sc-fbkhIv efjuAa sc-input-wrapper"
+          className="sc-clsHhM gcPLJv sc-input-wrapper"
         >
           <input
             autoComplete="off"
@@ -148,7 +148,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
         </div>
       </div>
       <button
-        className="sc-hjWSAi sc-gVgnHT kiLAFY jBAXGj"
+        className="sc-cbDGPM sc-hjWSAi kMvAWV hVZPp"
         disabled={true}
         onClick={[Function]}
       >
@@ -157,7 +157,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
         />
       </button>
       <button
-        className="sc-hjWSAi sc-fWPcDo eusfsO gCxoxK"
+        className="sc-cbDGPM sc-gVgnHT iZwYhL jkdbtr"
         onClick={[Function]}
       >
         <i
@@ -167,7 +167,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Disable the default toggle undefined onReset action
   </h3>
@@ -179,14 +179,14 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
     }
   >
     <div
-      className="sc-cbDGPM eXvaJY sc-searchinput"
+      className="sc-httYMd emRlAX sc-searchinput"
     >
       <div
-        className="sc-lcujXC fvEOYM sc-input"
+        className="sc-ehSCib gyAKjF sc-input"
         type="text"
       >
         <div
-          className="sc-fbkhIv efjuAa sc-input-wrapper"
+          className="sc-clsHhM gcPLJv sc-input-wrapper"
         >
           <input
             autoComplete="off"
@@ -202,7 +202,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
         </div>
       </div>
       <button
-        className="sc-hjWSAi sc-gVgnHT kiLAFY jBAXGj"
+        className="sc-cbDGPM sc-hjWSAi kMvAWV hVZPp"
         disabled={true}
         onClick={[Function]}
       >
@@ -211,7 +211,7 @@ exports[`Storyshots Components/Input/SearchInput Default 1`] = `
         />
       </button>
       <button
-        className="sc-hjWSAi sc-fWPcDo eusfsO gCxoxK"
+        className="sc-cbDGPM sc-gVgnHT iZwYhL jkdbtr"
         onClick={[Function]}
       >
         <i
diff --git a/src/__snapshots__/select.stories.storyshot b/src/__snapshots__/select.stories.storyshot
index 9d590cd2ea..ef22838212 100644
--- a/src/__snapshots__/select.stories.storyshot
+++ b/src/__snapshots__/select.stories.storyshot
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Components/Selector/Select Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Default
   </h3>
@@ -17,7 +17,7 @@ exports[`Storyshots Components/Selector/Select Default 1`] = `
     }
   >
     <div
-      className="sc-higXBA eESVnP sc-select-container"
+      className="sc-nFpLZ fZfiNc sc-select-container"
     >
       <div
         className="sc-select css-2b097c-container"
@@ -130,7 +130,7 @@ exports[`Storyshots Components/Selector/Select Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Default with custom formatOptionLabel
   </h3>
@@ -142,7 +142,7 @@ exports[`Storyshots Components/Selector/Select Default 1`] = `
     }
   >
     <div
-      className="sc-higXBA eESVnP sc-select-container"
+      className="sc-nFpLZ fZfiNc sc-select-container"
     >
       <div
         className="sc-select css-2b097c-container"
@@ -265,7 +265,7 @@ exports[`Storyshots Components/Selector/Select Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Multi Select
   </h3>
@@ -277,7 +277,7 @@ exports[`Storyshots Components/Selector/Select Default 1`] = `
     }
   >
     <div
-      className="sc-higXBA eESVnP sc-select-container"
+      className="sc-nFpLZ fZfiNc sc-select-container"
     >
       <div
         className="sc-select css-2b097c-container"
diff --git a/src/__snapshots__/sidebar.stories.storyshot b/src/__snapshots__/sidebar.stories.storyshot
index 3f8c3303e2..2646819792 100644
--- a/src/__snapshots__/sidebar.stories.storyshot
+++ b/src/__snapshots__/sidebar.stories.storyshot
@@ -13,36 +13,36 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
     }
   >
     <div
-      className="sc-GqfZa deLbXA"
+      className="sc-fbkhIv hTSJbj"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kvsuhP sc-sidebar"
+        className="sc-GqfZa iyMSLX sc-sidebar"
       >
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
@@ -50,12 +50,12 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
@@ -76,66 +76,66 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
     }
   >
     <div
-      className="sc-GqfZa jOrJEv"
+      className="sc-fbkhIv kvlkHA"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kjFTGg sc-sidebar"
+        className="sc-GqfZa iSWIaw sc-sidebar"
       >
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Dashboard
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Servers
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Disks
           </div>
@@ -154,18 +154,18 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
     }
   >
     <div
-      className="sc-GqfZa jOrJEv"
+      className="sc-fbkhIv kvlkHA"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kjFTGg sc-sidebar"
+        className="sc-GqfZa iSWIaw sc-sidebar"
       >
         <div
-          className="sc-aemoO hANCoY"
+          className="sc-jHVexB hUAfxS"
         >
           <button
-            className="sc-bqyKva lcpyWu sc-button"
+            className="sc-dQppl ctPsRF sc-button"
             disabled={false}
             onClick={[Function]}
             size="larger"
@@ -173,13 +173,13 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-kstrdz hFNOsv"
+                  className="sc-bqyKva osfTx"
                   size="larger"
                 >
                   <i
@@ -187,7 +187,7 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
                   />
                 </span>
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   
                 </span>
@@ -196,58 +196,58 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
           </button>
         </div>
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Dashboard
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Servers
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
             />
           </div>
           <div
-            className="sc-TmcTc ipaHtC"
+            className="sc-dwfUOf hZHSou"
           >
             Disks
           </div>
@@ -266,15 +266,15 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
     }
   >
     <div
-      className="sc-GqfZa deLbXA"
+      className="sc-fbkhIv hTSJbj"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <div
-        className="sc-fWSCIC kvsuhP sc-sidebar"
+        className="sc-GqfZa iyMSLX sc-sidebar"
       >
         <button
-          className="sc-bqyKva lcpyWu sc-button"
+          className="sc-dQppl ctPsRF sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -282,13 +282,13 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
           type="button"
         >
           <span
-            className="sc-fodVxV ckNcPt"
+            className="sc-hBEYos hgFzca"
           >
             <span
               className="sc-button-text"
             >
               <span
-                className="sc-kstrdz hFNOsv"
+                className="sc-bqyKva osfTx"
                 size="larger"
               >
                 <i
@@ -296,7 +296,7 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
                 />
               </span>
               <span
-                className="sc-hBEYos jaVYGW"
+                className="sc-kstrdz ZegCk"
               >
                 
               </span>
@@ -304,28 +304,28 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
           </span>
         </button>
         <div
-          className="sc-dwfUOf egTwPX sc-sidebar-item"
+          className="sc-fWSCIC frzHjd sc-sidebar-item"
           onClick={[Function]}
           title="Dashboard"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-tachometer-alt"
             />
           </div>
           <div
-            className="sc-jHVexB bKzHav"
+            className="sc-TmcTc fJKvGZ"
           />
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           onClick={[Function]}
           title="Servers"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-server"
@@ -333,12 +333,12 @@ exports[`Storyshots Components/Navigation/Sidebar Default 1`] = `
           </div>
         </div>
         <div
-          className="sc-dwfUOf hVoQQq sc-sidebar-item"
+          className="sc-fWSCIC bJYPKA sc-sidebar-item"
           onClick={[Function]}
           title="Disks"
         >
           <div
-            className="sc-aemoO hANCoY"
+            className="sc-jHVexB hUAfxS"
           >
             <i
               className="fas fa-hdd"
diff --git a/src/__snapshots__/sparkline.stories.storyshot b/src/__snapshots__/sparkline.stories.storyshot
index 17b78f674d..6c45c50332 100644
--- a/src/__snapshots__/sparkline.stories.storyshot
+++ b/src/__snapshots__/sparkline.stories.storyshot
@@ -2,24 +2,24 @@
 
 exports[`Storyshots Components/Chart/SparkLine Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Vege-Lite sparkline chart demo
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="vis"
   />
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Vege-Lite sparkline multi chart demo
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="multiVis"
   />
 </div>
diff --git a/src/__snapshots__/steppers.stories.storyshot b/src/__snapshots__/steppers.stories.storyshot
index 3ec9b98341..e9d9b157ee 100644
--- a/src/__snapshots__/steppers.stories.storyshot
+++ b/src/__snapshots__/steppers.stories.storyshot
@@ -2,24 +2,24 @@
 
 exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Default Steppers 
   </h3>
   <div
-    className="sc-fHYxKZ sc-steppers"
+    className="sc-fWPcDo sc-steppers"
   >
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE kfCLPv"
+          className="sc-gkdzZj iuZfZx"
         >
           <span>
             <i
@@ -28,49 +28,49 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
           </span>
         </div>
         <hr
-          className="sc-irlOZD buBDUp"
+          className="sc-iGctRS hhpNzf"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Node Registerd
         </span>
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE eDGRne"
+          className="sc-gkdzZj kCyaHU"
         >
           <span>
             2
           </span>
         </div>
         <hr
-          className="sc-irlOZD PngGR"
+          className="sc-iGctRS fhhLjr"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Deploy Salt Minion on node
         </span>
         <div
-          className="sc-iGctRS kQUNIn"
+          className="sc-eWVKcp fxoiHT"
         >
           <button
-            className="sc-bqyKva cCYwKy sc-button"
+            className="sc-dQppl dDQpFl sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
@@ -78,13 +78,13 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   Apply
                 </span>
@@ -95,67 +95,67 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE jwihVj"
+          className="sc-gkdzZj hgsXip"
         >
           <span>
             3
           </span>
         </div>
         <hr
-          className="sc-irlOZD PngGR"
+          className="sc-iGctRS fhhLjr"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Add node to Workload Plane
         </span>
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE jwihVj"
+          className="sc-gkdzZj hgsXip"
         >
           <span>
             4
           </span>
         </div>
         <hr
-          className="sc-irlOZD PngGR"
+          className="sc-iGctRS fhhLjr"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Add node to Control Plane
         </span>
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE jwihVj"
+          className="sc-gkdzZj hgsXip"
         >
           <span>
             5
@@ -163,10 +163,10 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Extend etcd cluster to node
         </span>
@@ -174,21 +174,21 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Steppers with loading
   </h3>
   <div
-    className="sc-fHYxKZ sc-steppers"
+    className="sc-fWPcDo sc-steppers"
   >
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE kfCLPv"
+          className="sc-gkdzZj iuZfZx"
         >
           <span>
             <i
@@ -197,35 +197,35 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
           </span>
         </div>
         <hr
-          className="sc-irlOZD buBDUp"
+          className="sc-iGctRS hhpNzf"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Node Registerd
         </span>
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE eDGRne"
+          className="sc-gkdzZj kCyaHU"
         >
           <div
-            className="sc-iqHYGH gSBJUA sc-loader"
+            className="sc-kEjbxe kicGPR sc-loader"
             color="#87929D"
             size="base"
           >
             <span
-              className="sc-dQppl cbDpju"
+              className="sc-crrsfI bkmyhs"
             >
               <svg
                 height="50"
@@ -345,22 +345,22 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
           </div>
         </div>
         <hr
-          className="sc-irlOZD PngGR"
+          className="sc-iGctRS fhhLjr"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Deploy Salt Minion on node
         </span>
         <div
-          className="sc-iGctRS kQUNIn"
+          className="sc-eWVKcp fxoiHT"
         >
           <button
-            className="sc-bqyKva cCYwKy sc-button"
+            className="sc-dQppl dDQpFl sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
@@ -368,13 +368,13 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   Apply
                 </span>
@@ -385,67 +385,67 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE jwihVj"
+          className="sc-gkdzZj hgsXip"
         >
           <span>
             3
           </span>
         </div>
         <hr
-          className="sc-irlOZD PngGR"
+          className="sc-iGctRS fhhLjr"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Add node to Workload Plane
         </span>
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE jwihVj"
+          className="sc-gkdzZj hgsXip"
         >
           <span>
             4
           </span>
         </div>
         <hr
-          className="sc-irlOZD PngGR"
+          className="sc-iGctRS fhhLjr"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Add node to Control Plane
         </span>
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE jwihVj"
+          className="sc-gkdzZj hgsXip"
         >
           <span>
             5
@@ -453,10 +453,10 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Extend etcd cluster to node
         </span>
@@ -464,21 +464,21 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Steppers with error
   </h3>
   <div
-    className="sc-fHYxKZ sc-steppers"
+    className="sc-fWPcDo sc-steppers"
   >
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE kfCLPv"
+          className="sc-gkdzZj iuZfZx"
         >
           <span>
             <i
@@ -487,27 +487,27 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
           </span>
         </div>
         <hr
-          className="sc-irlOZD buBDUp"
+          className="sc-iGctRS hhpNzf"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Node Registerd
         </span>
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE kfCLPv"
+          className="sc-gkdzZj iuZfZx"
         >
           <span>
             <i
@@ -516,49 +516,49 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
           </span>
         </div>
         <hr
-          className="sc-irlOZD buBDUp"
+          className="sc-iGctRS hhpNzf"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Deploy Salt Minion on node
         </span>
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE dIbYaS"
+          className="sc-gkdzZj fWeins"
         >
           <span>
             3
           </span>
         </div>
         <hr
-          className="sc-irlOZD PngGR"
+          className="sc-iGctRS fhhLjr"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Add node to Workload Plane
         </span>
         <div
-          className="sc-iGctRS kQUNIn"
+          className="sc-eWVKcp fxoiHT"
         >
           <button
-            className="sc-bqyKva cCYwKy sc-button"
+            className="sc-dQppl dDQpFl sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
@@ -566,13 +566,13 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
             type="button"
           >
             <span
-              className="sc-fodVxV ckNcPt"
+              className="sc-hBEYos hgFzca"
             >
               <span
                 className="sc-button-text"
               >
                 <span
-                  className="sc-hBEYos jaVYGW"
+                  className="sc-kstrdz ZegCk"
                 >
                   Apply
                 </span>
@@ -583,40 +583,40 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE jwihVj"
+          className="sc-gkdzZj hgsXip"
         >
           <span>
             4
           </span>
         </div>
         <hr
-          className="sc-irlOZD PngGR"
+          className="sc-iGctRS fhhLjr"
         />
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Add node to Control Plane
         </span>
       </div>
     </div>
     <div
-      className="sc-gyUeRy fqBXzL"
+      className="sc-fHYxKZ jEzHLE"
     >
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <div
-          className="sc-flMoUE jwihVj"
+          className="sc-gkdzZj hgsXip"
         >
           <span>
             5
@@ -624,10 +624,10 @@ exports[`Storyshots Components/Progress & loading/Steppers Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-gkdzZj hxbqaY"
+        className="sc-gyUeRy bZdFfH"
       >
         <span
-          className="sc-eWVKcp kpGNoS"
+          className="sc-flMoUE eDHBMi"
         >
           Extend etcd cluster to node
         </span>
diff --git a/src/__snapshots__/tabs.stories.storyshot b/src/__snapshots__/tabs.stories.storyshot
index c147de6ae0..75b9a273ac 100644
--- a/src/__snapshots__/tabs.stories.storyshot
+++ b/src/__snapshots__/tabs.stories.storyshot
@@ -2,50 +2,50 @@
 
 exports[`Storyshots Components/Navigation/Tabs Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Default Tabs 
   </h3>
   <div
-    className="sc-eWvPJL dYDkXq sc-tabs"
+    className="sc-irlOZD iCiAyq sc-tabs"
   >
     <div
-      className="sc-kUbhmq fCVnfX sc-tabs-bar"
+      className="sc-eWvPJL dEToKV sc-tabs-bar"
     >
       <div
-        className="sc-dwcuIR kpnGIt sc-tabs-item"
+        className="sc-kUbhmq jSpNST sc-tabs-item"
         onClick={[Function]}
         selected={true}
       >
         <p
-          className="sc-jtHMlw gxItvj sc-tabs-item-title"
+          className="sc-dwcuIR crKszV sc-tabs-item-title"
           selected={true}
         >
           Detail
         </p>
       </div>
       <div
-        className="sc-dwcuIR hEWHoy sc-tabs-item"
+        className="sc-kUbhmq kdfyCg sc-tabs-item"
         onClick={[Function]}
         selected={false}
       >
         <p
-          className="sc-jtHMlw vwRUw sc-tabs-item-title"
+          className="sc-dwcuIR beeCjS sc-tabs-item-title"
           selected={false}
         >
           Pods
         </p>
       </div>
       <div
-        className="sc-dwcuIR hEWHoy sc-tabs-item"
+        className="sc-kUbhmq kdfyCg sc-tabs-item"
         onClick={[Function]}
         selected={false}
       >
         <p
-          className="sc-jtHMlw vwRUw sc-tabs-item-title"
+          className="sc-dwcuIR beeCjS sc-tabs-item-title"
           selected={false}
         >
           Volumes
@@ -53,7 +53,7 @@ exports[`Storyshots Components/Navigation/Tabs Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-eltcbb eMJeny sc-tabs-item-content"
+      className="sc-jtHMlw bisPQQ sc-tabs-item-content"
     />
   </div>
 </div>
diff --git a/src/__snapshots__/textarea.stories.storyshot b/src/__snapshots__/textarea.stories.storyshot
index da0dfa56dd..034a2bb1bc 100644
--- a/src/__snapshots__/textarea.stories.storyshot
+++ b/src/__snapshots__/textarea.stories.storyshot
@@ -2,15 +2,15 @@
 
 exports[`Storyshots Components/Input/TextArea Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Text Area without label
   </h3>
   <textarea
-    className="sc-ehSCib gEDqjT sc-textarea"
+    className="sc-higXBA fAJmzw sc-textarea"
     cols={50}
     id="text"
     onChange={[Function]}
@@ -18,12 +18,12 @@ exports[`Storyshots Components/Input/TextArea Default 1`] = `
     value="Add a note"
   />
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Text Area disabled
   </h3>
   <textarea
-    className="sc-ehSCib gEDqjT sc-textarea"
+    className="sc-higXBA fAJmzw sc-textarea"
     cols={50}
     disabled={true}
     onChange={[Function]}
diff --git a/src/__snapshots__/toggle.stories.storyshot b/src/__snapshots__/toggle.stories.storyshot
index d2bdfc2dc6..2d59823825 100644
--- a/src/__snapshots__/toggle.stories.storyshot
+++ b/src/__snapshots__/toggle.stories.storyshot
@@ -2,13 +2,13 @@
 
 exports[`Storyshots Components/Toggle Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div
-    className="sc-kiYtDG eMrDGU sc-toggle"
+    className="sc-eltcbb jaVIAe sc-toggle"
   >
     <label
-      className="sc-cKZHah jeeBBo"
+      className="sc-kiYtDG cDxCDH"
     >
       <input
         checked={false}
@@ -22,16 +22,16 @@ exports[`Storyshots Components/Toggle Default 1`] = `
       />
     </label>
     <span
-      className="sc-iIEYCM cDmDWy text"
+      className="sc-cKZHah ephyvL text"
     >
       Airplane Mode
     </span>
   </div>
   <div
-    className="sc-kiYtDG eMrDGU sc-toggle"
+    className="sc-eltcbb jaVIAe sc-toggle"
   >
     <label
-      className="sc-cKZHah jeeBBo"
+      className="sc-kiYtDG cDxCDH"
     >
       <input
         checked={true}
@@ -45,7 +45,7 @@ exports[`Storyshots Components/Toggle Default 1`] = `
       />
     </label>
     <span
-      className="sc-iIEYCM cDmDWy text"
+      className="sc-cKZHah ephyvL text"
     >
       Airplane Mode
     </span>
diff --git a/src/__snapshots__/tooltip.stories.storyshot b/src/__snapshots__/tooltip.stories.storyshot
index 8a52654c71..3b339ffce2 100644
--- a/src/__snapshots__/tooltip.stories.storyshot
+++ b/src/__snapshots__/tooltip.stories.storyshot
@@ -2,21 +2,21 @@
 
 exports[`Storyshots Components/Notification/Tooltip Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Default Tooltip
     </h3>
     <div
-      className="sc-jJEJSO jHwXvj sc-tooltip"
+      className="sc-iktFzd hojOeW sc-tooltip"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-hKgILt bLCYoF"
+        className="sc-dlfnbm dxKCyT"
       >
         Hover here!
       </span>
@@ -24,17 +24,17 @@ exports[`Storyshots Components/Notification/Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Tooltip right
     </h3>
     <div
-      className="sc-jJEJSO jHwXvj sc-tooltip"
+      className="sc-iktFzd hojOeW sc-tooltip"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-hKgILt bLCYoF"
+        className="sc-dlfnbm dxKCyT"
       >
         Hover here!
       </span>
@@ -48,17 +48,17 @@ exports[`Storyshots Components/Notification/Tooltip Default 1`] = `
     }
   >
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Tooltip left
     </h3>
     <div
-      className="sc-jJEJSO jHwXvj sc-tooltip"
+      className="sc-iktFzd hojOeW sc-tooltip"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-hKgILt bLCYoF"
+        className="sc-dlfnbm dxKCyT"
       >
         Hover here!
       </span>
@@ -66,17 +66,17 @@ exports[`Storyshots Components/Notification/Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Tooltip bottom
     </h3>
     <div
-      className="sc-jJEJSO jHwXvj sc-tooltip"
+      className="sc-iktFzd hojOeW sc-tooltip"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-hKgILt bLCYoF"
+        className="sc-dlfnbm dxKCyT"
       >
         Hover here!
       </span>
@@ -84,17 +84,17 @@ exports[`Storyshots Components/Notification/Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Customize your tooltip style
     </h3>
     <div
-      className="sc-jJEJSO jHwXvj sc-tooltip"
+      className="sc-iktFzd hojOeW sc-tooltip"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-hKgILt bLCYoF"
+        className="sc-dlfnbm dxKCyT"
       >
         Hover here!
       </span>
@@ -102,30 +102,30 @@ exports[`Storyshots Components/Notification/Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Tooltip with button
     </h3>
     <div
-      className="sc-jJEJSO jHwXvj sc-tooltip"
+      className="sc-iktFzd hojOeW sc-tooltip"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <button
-        className="sc-bqyKva cCYwKy sc-button"
+        className="sc-dQppl dDQpFl sc-button"
         disabled={false}
         size="small"
         title=""
         type="button"
       >
         <span
-          className="sc-fodVxV ckNcPt"
+          className="sc-hBEYos hgFzca"
         >
           <span
             className="sc-button-text"
           >
             <span
-              className="sc-hBEYos jaVYGW"
+              className="sc-kstrdz ZegCk"
             >
               Hover here
             </span>
@@ -136,17 +136,17 @@ exports[`Storyshots Components/Notification/Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       add icon in the overlay of tooltip
     </h3>
     <div
-      className="sc-jJEJSO jHwXvj sc-tooltip"
+      className="sc-iktFzd hojOeW sc-tooltip"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-hKgILt bLCYoF"
+        className="sc-dlfnbm dxKCyT"
       >
         tooltip with icon
       </span>
@@ -154,17 +154,17 @@ exports[`Storyshots Components/Notification/Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-dlfnbm dxKCyT"
+      className="sc-gsTCUz iNyAAg"
     >
       Tooltip doesn't trigger
     </h3>
     <div
-      className="sc-jJEJSO jHwXvj sc-tooltip"
+      className="sc-iktFzd hojOeW sc-tooltip"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-hKgILt bLCYoF"
+        className="sc-dlfnbm dxKCyT"
       >
         Hover here!
       </span>
diff --git a/src/__snapshots__/vegachart.stories.storyshot b/src/__snapshots__/vegachart.stories.storyshot
index a3ad9a4ed2..da267d4b07 100644
--- a/src/__snapshots__/vegachart.stories.storyshot
+++ b/src/__snapshots__/vegachart.stories.storyshot
@@ -2,15 +2,15 @@
 
 exports[`Storyshots Components/Chart/VegaChart Default 1`] = `
 <div
-  className="sc-gsTCUz dUzLYl"
+  className="sc-bdfBwQ gFQERV"
 >
   <h3
-    className="sc-dlfnbm dxKCyT"
+    className="sc-gsTCUz iNyAAg"
   >
     Vega-Lite wrapper - need to specify the entire spec
   </h3>
   <div
-    className="sc-bdfBwQ sc-vegachart"
+    className="sc-vegachart"
     id="vis"
   />
 </div>