diff --git a/src/lib/components/areachart/__snapshots__/AreaChart.component.test.js.snap b/src/lib/components/areachart/__snapshots__/AreaChart.component.test.js.snap
index f34b7196c9..eb61f7701a 100644
--- a/src/lib/components/areachart/__snapshots__/AreaChart.component.test.js.snap
+++ b/src/lib/components/areachart/__snapshots__/AreaChart.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots AreaChart Default 1`] = `
 <div
-  className="sc-bwzfXH hilSGa"
+  className="sc-bwzfXH hyPwIk"
 >
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Vege-Lite area chart
   </h3>
diff --git a/src/lib/components/banner/__snapshots__/Banner.component.test.js.snap b/src/lib/components/banner/__snapshots__/Banner.component.test.js.snap
index 56e6385838..2e99de3400 100644
--- a/src/lib/components/banner/__snapshots__/Banner.component.test.js.snap
+++ b/src/lib/components/banner/__snapshots__/Banner.component.test.js.snap
@@ -2,15 +2,15 @@
 
 exports[`Storyshots Banner Default 1`] = `
 <div
-  className="sc-ifAKCX krxbjr"
+  className="sc-ifAKCX ugGGx"
 >
   <h3
-    className="sc-EHOje jFyawi"
+    className="sc-EHOje ftwWfK"
   >
     Error banner 
   </h3>
   <div
-    className="sc-bdVaJa YGaMz sc-banner"
+    className="sc-bdVaJa bWrxOz sc-banner"
   >
     <i
       className="fas fa-exclamation-triangle"
@@ -31,12 +31,12 @@ exports[`Storyshots Banner Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-EHOje jFyawi"
+    className="sc-EHOje ftwWfK"
   >
     Warning banner 
   </h3>
   <div
-    className="sc-bdVaJa klmDVe sc-banner"
+    className="sc-bdVaJa jmTOYp sc-banner"
   >
     <i
       className="fas fa-exclamation-triangle"
@@ -57,12 +57,12 @@ exports[`Storyshots Banner Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-EHOje jFyawi"
+    className="sc-EHOje ftwWfK"
   >
     Success banner 
   </h3>
   <div
-    className="sc-bdVaJa fpTUGs sc-banner"
+    className="sc-bdVaJa fUTRqM sc-banner"
   >
     <i
       className="fas fa-check-circle"
diff --git a/src/lib/components/barchart/__snapshots__/BarChart.component.test.js.snap b/src/lib/components/barchart/__snapshots__/BarChart.component.test.js.snap
index 110971388e..637b89a589 100644
--- a/src/lib/components/barchart/__snapshots__/BarChart.component.test.js.snap
+++ b/src/lib/components/barchart/__snapshots__/BarChart.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots BarChart Default 1`] = `
 <div
-  className="sc-bwzfXH hilSGa"
+  className="sc-bwzfXH hyPwIk"
 >
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Vertical Stacked Bar Chart Demo 
   </h3>
@@ -14,7 +14,7 @@ exports[`Storyshots BarChart Default 1`] = `
     id="vis_vertical_stacked"
   />
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Horizontal Stacked Bar Chart Demo 
   </h3>
@@ -23,7 +23,7 @@ exports[`Storyshots BarChart Default 1`] = `
     id="vis_horizontal_stacked"
   />
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Vertical Bar Chart Demo 
   </h3>
@@ -32,7 +32,7 @@ exports[`Storyshots BarChart Default 1`] = `
     id="vis_vertical"
   />
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Horizontal Bar Chart Demo 
   </h3>
diff --git a/src/lib/components/breadcrumb/__snapshots__/Breadcrumb.component.test.js.snap b/src/lib/components/breadcrumb/__snapshots__/Breadcrumb.component.test.js.snap
index 39936e29ee..9e5fe9a084 100644
--- a/src/lib/components/breadcrumb/__snapshots__/Breadcrumb.component.test.js.snap
+++ b/src/lib/components/breadcrumb/__snapshots__/Breadcrumb.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Breadcrumb Default 1`] = `
 <div
-  className="sc-bxivhb eTQnSH"
+  className="sc-bxivhb ejYWWW"
 >
   <h3
-    className="sc-ifAKCX gDoZKl"
+    className="sc-ifAKCX bljzpw"
   >
     Default Breadcrumb 
   </h3>
@@ -13,7 +13,7 @@ exports[`Storyshots Breadcrumb Default 1`] = `
     className="sc-bdVaJa jCMsrW sc-breadcrumb"
   >
     <li
-      className="sc-bwzfXH dlBoTq sc-breadcrumb_item"
+      className="sc-bwzfXH flgizH sc-breadcrumb_item"
     >
       <a
         href="home"
@@ -29,7 +29,7 @@ exports[`Storyshots Breadcrumb Default 1`] = `
       />
     </li>
     <li
-      className="sc-bwzfXH dlBoTq sc-breadcrumb_item"
+      className="sc-bwzfXH flgizH sc-breadcrumb_item"
     >
       <label
         href="clusters"
@@ -45,7 +45,7 @@ exports[`Storyshots Breadcrumb Default 1`] = `
       />
     </li>
     <li
-      className="sc-bwzfXH dlBoTq sc-breadcrumb_item"
+      className="sc-bwzfXH flgizH sc-breadcrumb_item"
     >
       <a
         href="cluster"
@@ -61,7 +61,7 @@ exports[`Storyshots Breadcrumb Default 1`] = `
       />
     </li>
     <li
-      className="sc-bwzfXH dlBoTq sc-breadcrumb_item"
+      className="sc-bwzfXH flgizH sc-breadcrumb_item"
     >
       <label
         href="nodes"
@@ -77,7 +77,7 @@ exports[`Storyshots Breadcrumb Default 1`] = `
       />
     </li>
     <li
-      className="sc-bwzfXH dlBoTq sc-breadcrumb_item"
+      className="sc-bwzfXH flgizH sc-breadcrumb_item"
     >
       <a
         href="node"
@@ -94,7 +94,7 @@ exports[`Storyshots Breadcrumb Default 1`] = `
       />
     </li>
     <li
-      className="sc-bwzfXH dlBoTq sc-breadcrumb_item"
+      className="sc-bwzfXH flgizH sc-breadcrumb_item"
     >
       <a
         href="volumes"
@@ -110,7 +110,7 @@ exports[`Storyshots Breadcrumb Default 1`] = `
       />
     </li>
     <li
-      className="sc-bwzfXH hiUjIK sc-breadcrumb_item"
+      className="sc-bwzfXH etLMdN sc-breadcrumb_item"
     >
       <label
         title="volume_longlonglonglonglonglonglonglonglong"
diff --git a/src/lib/components/button/__snapshots__/Button.component.test.js.snap b/src/lib/components/button/__snapshots__/Button.component.test.js.snap
index ff228af3a9..fe6eef5260 100644
--- a/src/lib/components/button/__snapshots__/Button.component.test.js.snap
+++ b/src/lib/components/button/__snapshots__/Button.component.test.js.snap
@@ -2,15 +2,15 @@
 
 exports[`Storyshots Button Default 1`] = `
 <div
-  className="sc-htoDjs cSFtNk storybook-button"
+  className="sc-htoDjs kZdxXg storybook-button"
 >
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Button Default
   </h3>
   <button
-    className="sc-bxivhb jcmAnS sc-button"
+    className="sc-bxivhb cKwTWQ sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -31,7 +31,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dwixRZ sc-button"
+    className="sc-bxivhb iFyWGW sc-button"
     disabled={false}
     size="small"
     title=""
@@ -52,7 +52,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb gHwdeP sc-button"
+    className="sc-bxivhb dFpNAO sc-button"
     data-cy="default_button"
     disabled={false}
     size="base"
@@ -74,7 +74,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb ezdJJk sc-button"
+    className="sc-bxivhb iWiNWP sc-button"
     disabled={false}
     size="large"
     title=""
@@ -95,7 +95,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hAHRzA sc-button"
+    className="sc-bxivhb egRmZd sc-button"
     disabled={false}
     size="larger"
     title=""
@@ -116,12 +116,12 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Button Variant
   </h3>
   <button
-    className="sc-bxivhb gHwdeP sc-button"
+    className="sc-bxivhb dFpNAO sc-button"
     disabled={false}
     size="base"
     title=""
@@ -142,7 +142,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb kjJYVG sc-button"
+    className="sc-bxivhb iIASyT sc-button"
     disabled={false}
     size="base"
     title=""
@@ -163,7 +163,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb bdkBEo sc-button"
+    className="sc-bxivhb gIKpTZ sc-button"
     disabled={false}
     size="base"
     title=""
@@ -184,7 +184,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb cvBOSE sc-button"
+    className="sc-bxivhb kVJLDh sc-button"
     disabled={false}
     size="base"
     title=""
@@ -205,7 +205,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hwDzFo sc-button"
+    className="sc-bxivhb jmMpcQ sc-button"
     disabled={false}
     size="base"
     title=""
@@ -220,18 +220,18 @@ exports[`Storyshots Button Default 1`] = `
         <span
           className="sc-EHOje boinrg"
         >
-          critical
+          danger
         </span>
       </span>
     </span>
   </button>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Button Outlined
   </h3>
   <button
-    className="sc-bxivhb cXfwBU sc-button"
+    className="sc-bxivhb cZoUEv sc-button"
     disabled={false}
     onClick={[Function]}
     size="base"
@@ -253,12 +253,12 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Button Disabled
   </h3>
   <button
-    className="sc-bxivhb ddnOwU sc-button"
+    className="sc-bxivhb bWhQyw sc-button"
     disabled={true}
     onClick={[Function]}
     size="base"
@@ -280,7 +280,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb jpzxRX sc-button"
+    className="sc-bxivhb bMyHGN sc-button"
     disabled={true}
     onClick={[Function]}
     size="base"
@@ -302,7 +302,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb vrodH sc-button"
+    className="sc-bxivhb iKEcaQ sc-button"
     disabled={true}
     onClick={[Function]}
     size="base"
@@ -318,13 +318,13 @@ exports[`Storyshots Button Default 1`] = `
         <span
           className="sc-EHOje boinrg"
         >
-          critical
+          danger
         </span>
       </span>
     </span>
   </button>
   <button
-    className="sc-bxivhb dsiAlN sc-button"
+    className="sc-bxivhb kOQZaR sc-button"
     disabled={true}
     size="larger"
     title=""
@@ -353,12 +353,12 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Button Link
   </h3>
   <a
-    className="sc-gzVnrw jDZgZZ sc-button"
+    className="sc-gzVnrw bTufeB sc-button"
     disabled={false}
     href="/"
     size="base"
@@ -371,12 +371,12 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </a>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Button Loading
   </h3>
   <button
-    className="sc-bxivhb ddnOwU sc-button"
+    className="sc-bxivhb bWhQyw sc-button"
     disabled={true}
     size="base"
     title=""
@@ -386,7 +386,7 @@ exports[`Storyshots Button Default 1`] = `
       className="sc-bZQynM iMWVsx"
     >
       <div
-        className="sc-bdVaJa jGCmKI sc-loader"
+        className="sc-bdVaJa SpoMa sc-loader"
         color="#87929D"
         size="base"
       >
@@ -521,12 +521,12 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Button Text Icon
   </h3>
   <button
-    className="sc-bxivhb jcmAnS sc-button"
+    className="sc-bxivhb cKwTWQ sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -555,7 +555,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dwixRZ sc-button"
+    className="sc-bxivhb iFyWGW sc-button"
     disabled={false}
     size="small"
     title=""
@@ -584,7 +584,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb gHwdeP sc-button"
+    className="sc-bxivhb dFpNAO sc-button"
     disabled={false}
     size="base"
     title=""
@@ -613,7 +613,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb ezdJJk sc-button"
+    className="sc-bxivhb iWiNWP sc-button"
     disabled={false}
     size="large"
     title=""
@@ -642,7 +642,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hAHRzA sc-button"
+    className="sc-bxivhb egRmZd sc-button"
     disabled={false}
     size="larger"
     title=""
@@ -671,12 +671,12 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Icon Button
   </h3>
   <button
-    className="sc-bxivhb jcmAnS sc-button"
+    className="sc-bxivhb cKwTWQ sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -705,7 +705,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dwixRZ sc-button"
+    className="sc-bxivhb iFyWGW sc-button"
     disabled={false}
     size="small"
     title=""
@@ -734,7 +734,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb gHwdeP sc-button"
+    className="sc-bxivhb dFpNAO sc-button"
     disabled={false}
     size="base"
     title=""
@@ -763,7 +763,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb ezdJJk sc-button"
+    className="sc-bxivhb iWiNWP sc-button"
     disabled={false}
     size="large"
     title=""
@@ -792,7 +792,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hAHRzA sc-button"
+    className="sc-bxivhb egRmZd sc-button"
     disabled={false}
     size="larger"
     title=""
@@ -821,12 +821,12 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Icon Button Inverted
   </h3>
   <button
-    className="sc-bxivhb hZXHMm sc-button"
+    className="sc-bxivhb bHcGzu sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -855,7 +855,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dtzeEU sc-button"
+    className="sc-bxivhb ljLRny sc-button"
     disabled={false}
     size="small"
     title=""
@@ -884,7 +884,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hlXsmk sc-button"
+    className="sc-bxivhb ezRGKZ sc-button"
     disabled={false}
     size="base"
     title=""
@@ -913,7 +913,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb eHcDCr sc-button"
+    className="sc-bxivhb bEEwDq sc-button"
     disabled={false}
     size="large"
     title=""
@@ -942,7 +942,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb eSygCd sc-button"
+    className="sc-bxivhb bAnnui sc-button"
     disabled={false}
     size="larger"
     title=""
diff --git a/src/lib/components/checkbox/__snapshots__/Checkbox.component.test.js.snap b/src/lib/components/checkbox/__snapshots__/Checkbox.component.test.js.snap
index b40596e1b7..6ba4f2be5b 100644
--- a/src/lib/components/checkbox/__snapshots__/Checkbox.component.test.js.snap
+++ b/src/lib/components/checkbox/__snapshots__/Checkbox.component.test.js.snap
@@ -2,16 +2,16 @@
 
 exports[`Storyshots Checkbox Default 1`] = `
 <div
-  className="sc-htpNat iharJH"
+  className="sc-htpNat hvdPGZ"
 >
   <h3
-    className="sc-bxivhb fcltBK"
+    className="sc-bxivhb Igthg"
   >
     Checkbox checked
   </h3>
   <label
     checked={true}
-    className="sc-bwzfXH bLyocb sc-checkbox"
+    className="sc-bwzfXH ckJhMz sc-checkbox"
   >
     <input
       checked={true}
@@ -23,19 +23,19 @@ exports[`Storyshots Checkbox Default 1`] = `
       className="fas fa-check"
     />
     <span
-      className="sc-bdVaJa gQXApI text"
+      className="sc-bdVaJa lbwSSl text"
     >
       interested?
     </span>
   </label>
   <h3
-    className="sc-bxivhb fcltBK"
+    className="sc-bxivhb Igthg"
   >
     Checkbox unchecked
   </h3>
   <label
     checked={false}
-    className="sc-bwzfXH fPlAHx sc-checkbox"
+    className="sc-bwzfXH eHtcdR sc-checkbox"
   >
     <input
       checked={false}
@@ -46,19 +46,19 @@ exports[`Storyshots Checkbox Default 1`] = `
       className="fas fa-check"
     />
     <span
-      className="sc-bdVaJa gQXApI text"
+      className="sc-bdVaJa lbwSSl text"
     >
       interested?
     </span>
   </label>
   <h3
-    className="sc-bxivhb fcltBK"
+    className="sc-bxivhb Igthg"
   >
     Checkbox disabled
   </h3>
   <label
     checked={false}
-    className="sc-bwzfXH jOEcYl sc-checkbox"
+    className="sc-bwzfXH gQWBVU sc-checkbox"
     disabled={true}
   >
     <input
@@ -71,7 +71,7 @@ exports[`Storyshots Checkbox Default 1`] = `
       className="fas fa-check"
     />
     <span
-      className="sc-bdVaJa gQXApI text"
+      className="sc-bdVaJa lbwSSl text"
     >
       interested?
     </span>
diff --git a/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap b/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap
index 977dcfef56..563f10969c 100644
--- a/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap
+++ b/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap
@@ -2,15 +2,15 @@
 
 exports[`Storyshots Chips Default 1`] = `
 <div
-  className="sc-gZMcBi cINIPt storybook-chips"
+  className="sc-gZMcBi jnlvfH storybook-chips"
 >
   <h3
-    className="sc-gqjmRU eVYvlN"
+    className="sc-gqjmRU cRPCsH"
   >
     Basic Chip
   </h3>
   <div
-    className="sc-htoDjs kCoBe sc-chips"
+    className="sc-htoDjs oAfeq sc-chips"
     size="base"
   >
     <span
@@ -20,7 +20,7 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs czkcKz sc-chips"
+    className="sc-htoDjs kwCbVz sc-chips"
     size="base"
   >
     <span
@@ -30,7 +30,7 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs dLulgF sc-chips"
+    className="sc-htoDjs gktCMn sc-chips"
     size="base"
   >
     <span
@@ -40,7 +40,7 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs egXQuG sc-chips"
+    className="sc-htoDjs eqomIC sc-chips"
     size="base"
   >
     <span
@@ -50,17 +50,17 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <h3
-    className="sc-gqjmRU eVYvlN"
+    className="sc-gqjmRU cRPCsH"
   >
     Clickable Chip
   </h3>
   <div
-    className="sc-htoDjs iNNLyC sc-chips"
+    className="sc-htoDjs jherpk sc-chips"
     onClick={[Function]}
     size="base"
   >
     <span
-      className="sc-dnqmqq fUrOWU sc-chips-icon"
+      className="sc-dnqmqq fazWgf sc-chips-icon"
       size="base"
     >
       <i
@@ -74,12 +74,12 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs fNuadc sc-chips"
+    className="sc-htoDjs jLYxwU sc-chips"
     onClick={[Function]}
     size="base"
   >
     <span
-      className="sc-dnqmqq hIRPMN sc-chips-icon"
+      className="sc-dnqmqq bMnDSL sc-chips-icon"
       size="base"
     >
       <i
@@ -93,12 +93,12 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs dVYTkY sc-chips"
+    className="sc-htoDjs jgKGle sc-chips"
     onClick={[Function]}
     size="base"
   >
     <span
-      className="sc-dnqmqq gDHVpp sc-chips-icon"
+      className="sc-dnqmqq bBckuc sc-chips-icon"
       size="base"
     >
       <i
@@ -112,12 +112,12 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs khHVey sc-chips"
+    className="sc-htoDjs bWXOiM sc-chips"
     onClick={[Function]}
     size="base"
   >
     <span
-      className="sc-dnqmqq fmChSf sc-chips-icon"
+      className="sc-dnqmqq gSUsIw sc-chips-icon"
       size="base"
     >
       <i
@@ -131,16 +131,16 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <h3
-    className="sc-gqjmRU eVYvlN"
+    className="sc-gqjmRU cRPCsH"
   >
     Deletable Chip
   </h3>
   <div
-    className="sc-htoDjs kCoBe sc-chips"
+    className="sc-htoDjs oAfeq sc-chips"
     size="base"
   >
     <span
-      className="sc-dnqmqq fUrOWU sc-chips-icon"
+      className="sc-dnqmqq fazWgf sc-chips-icon"
       size="base"
     >
       <i
@@ -154,7 +154,7 @@ exports[`Storyshots Chips Default 1`] = `
       Deletable
     </span>
     <button
-      className="sc-bxivhb hlXsmk sc-chips-remove"
+      className="sc-bxivhb ezRGKZ sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -185,11 +185,11 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs czkcKz sc-chips"
+    className="sc-htoDjs kwCbVz sc-chips"
     size="base"
   >
     <span
-      className="sc-dnqmqq hIRPMN sc-chips-icon"
+      className="sc-dnqmqq bMnDSL sc-chips-icon"
       size="base"
     >
       <i
@@ -203,7 +203,7 @@ exports[`Storyshots Chips Default 1`] = `
       Deletable
     </span>
     <button
-      className="sc-bxivhb hlXsmk sc-chips-remove"
+      className="sc-bxivhb ezRGKZ sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -234,11 +234,11 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs dLulgF sc-chips"
+    className="sc-htoDjs gktCMn sc-chips"
     size="base"
   >
     <span
-      className="sc-dnqmqq gDHVpp sc-chips-icon"
+      className="sc-dnqmqq bBckuc sc-chips-icon"
       size="base"
     >
       <i
@@ -252,7 +252,7 @@ exports[`Storyshots Chips Default 1`] = `
       Deletable
     </span>
     <button
-      className="sc-bxivhb hlXsmk sc-chips-remove"
+      className="sc-bxivhb ezRGKZ sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -283,11 +283,11 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs egXQuG sc-chips"
+    className="sc-htoDjs eqomIC sc-chips"
     size="base"
   >
     <span
-      className="sc-dnqmqq fmChSf sc-chips-icon"
+      className="sc-dnqmqq gSUsIw sc-chips-icon"
       size="base"
     >
       <i
@@ -301,7 +301,7 @@ exports[`Storyshots Chips Default 1`] = `
       Deletable
     </span>
     <button
-      className="sc-bxivhb hlXsmk sc-chips-remove"
+      className="sc-bxivhb ezRGKZ sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -332,16 +332,16 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <h3
-    className="sc-gqjmRU eVYvlN"
+    className="sc-gqjmRU cRPCsH"
   >
     Different sizes
   </h3>
   <div
-    className="sc-htoDjs kYYWSZ sc-chips"
+    className="sc-htoDjs bZdUyG sc-chips"
     size="smaller"
   >
     <span
-      className="sc-dnqmqq fUrOWU sc-chips-icon"
+      className="sc-dnqmqq fazWgf sc-chips-icon"
       size="smaller"
     >
       <i
@@ -355,7 +355,7 @@ exports[`Storyshots Chips Default 1`] = `
       Smaller
     </span>
     <button
-      className="sc-bxivhb hZXHMm sc-chips-remove"
+      className="sc-bxivhb bHcGzu sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="smaller"
@@ -386,11 +386,11 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs cYckj sc-chips"
+    className="sc-htoDjs hOuyzW sc-chips"
     size="small"
   >
     <span
-      className="sc-dnqmqq fUrOWU sc-chips-icon"
+      className="sc-dnqmqq fazWgf sc-chips-icon"
       size="small"
     >
       <i
@@ -404,7 +404,7 @@ exports[`Storyshots Chips Default 1`] = `
       Small
     </span>
     <button
-      className="sc-bxivhb dtzeEU sc-chips-remove"
+      className="sc-bxivhb ljLRny sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="small"
@@ -435,11 +435,11 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs dLulgF sc-chips"
+    className="sc-htoDjs gktCMn sc-chips"
     size="base"
   >
     <span
-      className="sc-dnqmqq gDHVpp sc-chips-icon"
+      className="sc-dnqmqq bBckuc sc-chips-icon"
       size="base"
     >
       <i
@@ -453,7 +453,7 @@ exports[`Storyshots Chips Default 1`] = `
       Base
     </span>
     <button
-      className="sc-bxivhb hlXsmk sc-chips-remove"
+      className="sc-bxivhb ezRGKZ sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -484,11 +484,11 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs hkTTrw sc-chips"
+    className="sc-htoDjs eNzVGU sc-chips"
     size="large"
   >
     <span
-      className="sc-dnqmqq hIRPMN sc-chips-icon"
+      className="sc-dnqmqq bMnDSL sc-chips-icon"
       size="large"
     >
       <i
@@ -502,7 +502,7 @@ exports[`Storyshots Chips Default 1`] = `
       Large
     </span>
     <button
-      className="sc-bxivhb eHcDCr sc-chips-remove"
+      className="sc-bxivhb bEEwDq sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="large"
@@ -533,11 +533,11 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs jovKdM sc-chips"
+    className="sc-htoDjs beIFWW sc-chips"
     size="larger"
   >
     <span
-      className="sc-dnqmqq gDHVpp sc-chips-icon"
+      className="sc-dnqmqq bBckuc sc-chips-icon"
       size="larger"
     >
       <i
@@ -551,7 +551,7 @@ exports[`Storyshots Chips Default 1`] = `
       Larger
     </span>
     <button
-      className="sc-bxivhb eSygCd sc-chips-remove"
+      className="sc-bxivhb bAnnui sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="larger"
diff --git a/src/lib/components/circularprogressbar/__snapshots__/CircularProgressBar.component.test.js.snap b/src/lib/components/circularprogressbar/__snapshots__/CircularProgressBar.component.test.js.snap
index f1f6c6dd78..cd80957a88 100644
--- a/src/lib/components/circularprogressbar/__snapshots__/CircularProgressBar.component.test.js.snap
+++ b/src/lib/components/circularprogressbar/__snapshots__/CircularProgressBar.component.test.js.snap
@@ -2,15 +2,15 @@
 
 exports[`Storyshots CircularProgressBar Default 1`] = `
 <div
-  className="sc-ifAKCX krxbjr"
+  className="sc-ifAKCX ugGGx"
 >
   <h3
-    className="sc-EHOje jFyawi"
+    className="sc-EHOje ftwWfK"
   >
     With Default Color
   </h3>
   <div
-    className="sc-bdVaJa dSLzxR sc-circularprogressbar"
+    className="sc-bdVaJa cqYhqH sc-circularprogressbar"
   >
     <span
       className="sc-bwzfXH eKTvSU"
@@ -22,14 +22,14 @@ exports[`Storyshots CircularProgressBar Default 1`] = `
       width={150}
     >
       <circle
-        className="sc-bxivhb goMCKs"
+        className="sc-bxivhb dHwjaq"
         cx={75}
         cy={75}
         r={70}
         strokeWidth={10}
       />
       <circle
-        className="sc-htpNat cpWHxD"
+        className="sc-htpNat eKcDGS"
         cx={75}
         cy={75}
         r={70}
@@ -37,7 +37,7 @@ exports[`Storyshots CircularProgressBar Default 1`] = `
         transform="rotate(-90 75  75)"
       />
       <text
-        className="sc-gzVnrw gSWrpW sc-circularprogressbar-text"
+        className="sc-gzVnrw gXRwdg sc-circularprogressbar-text"
         dominantBaseline="middle"
         textAnchor="middle"
         x="50%"
@@ -48,12 +48,12 @@ exports[`Storyshots CircularProgressBar Default 1`] = `
     </svg>
   </div>
   <h3
-    className="sc-EHOje jFyawi"
+    className="sc-EHOje ftwWfK"
   >
     With Custom Color
   </h3>
   <div
-    className="sc-bdVaJa dSLzxR sc-circularprogressbar"
+    className="sc-bdVaJa cqYhqH sc-circularprogressbar"
   >
     <span
       className="sc-bwzfXH eKTvSU"
@@ -65,7 +65,7 @@ exports[`Storyshots CircularProgressBar Default 1`] = `
       width={110}
     >
       <circle
-        className="sc-bxivhb goMCKs"
+        className="sc-bxivhb dHwjaq"
         cx={55}
         cy={55}
         r={50}
@@ -81,7 +81,7 @@ exports[`Storyshots CircularProgressBar Default 1`] = `
         transform="rotate(-90 55  55)"
       />
       <text
-        className="sc-gzVnrw gSWrpW sc-circularprogressbar-text"
+        className="sc-gzVnrw gXRwdg sc-circularprogressbar-text"
         dominantBaseline="middle"
         style={
           Object {
@@ -96,7 +96,7 @@ exports[`Storyshots CircularProgressBar Default 1`] = `
         4.9 PB
       </text>
       <text
-        className="sc-gzVnrw gSWrpW sc-circularprogressbar-text"
+        className="sc-gzVnrw gXRwdg sc-circularprogressbar-text"
         dominantBaseline="middle"
         textAnchor="middle"
         x="50%"
diff --git a/src/lib/components/cloudprogressbar/__snapshots__/CloudProgressBar.component.test.js.snap b/src/lib/components/cloudprogressbar/__snapshots__/CloudProgressBar.component.test.js.snap
index 4373385f63..2898bf2cc2 100644
--- a/src/lib/components/cloudprogressbar/__snapshots__/CloudProgressBar.component.test.js.snap
+++ b/src/lib/components/cloudprogressbar/__snapshots__/CloudProgressBar.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots CloudProgressBar Default 1`] = `
 <div
-  className="sc-htpNat iharJH"
+  className="sc-htpNat hvdPGZ"
 >
   <h3
-    className="sc-bxivhb fcltBK"
+    className="sc-bxivhb Igthg"
   >
     CloudProgressBar
   </h3>
@@ -69,12 +69,12 @@ exports[`Storyshots CloudProgressBar Default 1`] = `
         }
       >
         <h3
-          className="sc-bxivhb fcltBK"
+          className="sc-bxivhb Igthg"
         >
           30%
         </h3>
         <span
-          className="sc-ifAKCX gDoZKl"
+          className="sc-ifAKCX bljzpw"
         >
           of the quotas has been reached.
         </span>
@@ -141,12 +141,12 @@ exports[`Storyshots CloudProgressBar Default 1`] = `
         }
       >
         <h3
-          className="sc-bxivhb fcltBK"
+          className="sc-bxivhb Igthg"
         >
           50%
         </h3>
         <span
-          className="sc-ifAKCX gDoZKl"
+          className="sc-ifAKCX bljzpw"
         >
           of the quotas has been reached
         </span>
@@ -213,12 +213,12 @@ exports[`Storyshots CloudProgressBar Default 1`] = `
         }
       >
         <h3
-          className="sc-bxivhb fcltBK"
+          className="sc-bxivhb Igthg"
         >
           80%
         </h3>
         <span
-          className="sc-ifAKCX gDoZKl"
+          className="sc-ifAKCX bljzpw"
         >
           of the quotas has been reached
         </span>
@@ -285,12 +285,12 @@ exports[`Storyshots CloudProgressBar Default 1`] = `
         }
       >
         <h3
-          className="sc-bxivhb fcltBK"
+          className="sc-bxivhb Igthg"
         >
           70%
         </h3>
         <span
-          className="sc-ifAKCX gDoZKl"
+          className="sc-ifAKCX bljzpw"
         >
           of the quotas has been reached
         </span>
diff --git a/src/lib/components/collapsiblepanel/__snapshots__/CollapsiblePanel.component.test.js.snap b/src/lib/components/collapsiblepanel/__snapshots__/CollapsiblePanel.component.test.js.snap
index 7de627c292..a9bf4a6de5 100644
--- a/src/lib/components/collapsiblepanel/__snapshots__/CollapsiblePanel.component.test.js.snap
+++ b/src/lib/components/collapsiblepanel/__snapshots__/CollapsiblePanel.component.test.js.snap
@@ -2,15 +2,15 @@
 
 exports[`Storyshots CollapsiblePanel Default 1`] = `
 <div
-  className="sc-bdVaJa iCguif storybook-collapsiblepanel"
+  className="sc-bdVaJa iAWYyR storybook-collapsiblepanel"
 >
   <h3
-    className="sc-bwzfXH fAaNVH"
+    className="sc-bwzfXH hGqmYS"
   >
     Collapsed
   </h3>
   <div
-    className="sc-gzVnrw kekhgO sc-collapsiblepanel"
+    className="sc-gzVnrw fPmDd sc-collapsiblepanel"
   >
     <div
       className="sc-htoDjs kLoPxj sc-collapsiblepanel-header"
@@ -52,12 +52,12 @@ exports[`Storyshots CollapsiblePanel Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-bwzfXH fAaNVH"
+    className="sc-bwzfXH hGqmYS"
   >
     Expanded
   </h3>
   <div
-    className="sc-gzVnrw kekhgO sc-collapsiblepanel"
+    className="sc-gzVnrw fPmDd sc-collapsiblepanel"
   >
     <div
       className="sc-htoDjs kLoPxj sc-collapsiblepanel-header"
@@ -98,7 +98,7 @@ exports[`Storyshots CollapsiblePanel Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-dnqmqq efoCkH sc-collapsiblepanel-content"
+      className="sc-dnqmqq iYujoE sc-collapsiblepanel-content"
     >
       orange
     </div>
diff --git a/src/lib/components/constants.js b/src/lib/components/constants.js
index 566d616df4..ec8551a0cb 100644
--- a/src/lib/components/constants.js
+++ b/src/lib/components/constants.js
@@ -17,11 +17,10 @@ export type Size =
   | "huge"
   | "massive";
 
+// Replace the "success" by "health", but keep the key in the color-paltte for the moment.
 export type Variant =
   | "base"
   | "secondary"
-  | "success"
+  | "healthy"
   | "warning"
   | "danger"
-  | "healthy"
-  | "critical";
diff --git a/src/lib/components/dropdown/__snapshots__/Dropdown.component.test.js.snap b/src/lib/components/dropdown/__snapshots__/Dropdown.component.test.js.snap
index 9bf329093b..9b671309b2 100644
--- a/src/lib/components/dropdown/__snapshots__/Dropdown.component.test.js.snap
+++ b/src/lib/components/dropdown/__snapshots__/Dropdown.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Dropdown Default 1`] = `
 <div
-  className="sc-VigVT ciOuIf storybook-dropdown"
+  className="sc-VigVT gbOMtC storybook-dropdown"
 >
   <h3
-    className="sc-jTzLTM iPMRrm"
+    className="sc-jTzLTM jGSHHo"
   >
     Dropdown with text/icon
   </h3>
@@ -13,7 +13,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU elGSqj trigger"
+      className="sc-gqjmRU gTuxFi trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -46,7 +46,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU ftAxIx trigger"
+      className="sc-gqjmRU ePuxge trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -79,7 +79,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU hogoHt trigger"
+      className="sc-gqjmRU cUuxgJ trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -112,7 +112,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU jFIEaO trigger"
+      className="sc-gqjmRU fpEGpx trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -145,7 +145,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU dZVVUo trigger"
+      className="sc-gqjmRU grWMbe trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -175,7 +175,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-jTzLTM iPMRrm"
+    className="sc-jTzLTM jGSHHo"
   >
     Dropdown with icon
   </h3>
@@ -183,7 +183,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU hogoHt trigger"
+      className="sc-gqjmRU cUuxgJ trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -201,7 +201,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-jTzLTM iPMRrm"
+    className="sc-jTzLTM jGSHHo"
   >
     Dropdown with text
   </h3>
@@ -209,7 +209,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU hogoHt trigger"
+      className="sc-gqjmRU cUuxgJ trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -231,7 +231,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-jTzLTM iPMRrm"
+    className="sc-jTzLTM jGSHHo"
   >
     Dropdown with variant
   </h3>
@@ -239,7 +239,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU hogoHt trigger"
+      className="sc-gqjmRU cUuxgJ trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -272,7 +272,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU dropla trigger"
+      className="sc-gqjmRU iWaZnD trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -305,7 +305,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU fJNeQP trigger"
+      className="sc-gqjmRU bplljX trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -338,7 +338,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU jCEBPE trigger"
+      className="sc-gqjmRU hWhkgq trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -371,7 +371,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs iIbcxe sc-dropdown"
   >
     <div
-      className="sc-gqjmRU ckujpm trigger"
+      className="sc-gqjmRU kTKjwy trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -389,7 +389,7 @@ exports[`Storyshots Dropdown Default 1`] = `
       <span
         className="sc-EHOje boinrg sc-trigger-text"
       >
-        critical
+        danger
       </span>
       <span
         className="sc-gZMcBi cfFiuj"
diff --git a/src/lib/components/healthselector/__snapshots__/Healthselector.component.test.js.snap b/src/lib/components/healthselector/__snapshots__/Healthselector.component.test.js.snap
index 3319451da2..9090afae7b 100644
--- a/src/lib/components/healthselector/__snapshots__/Healthselector.component.test.js.snap
+++ b/src/lib/components/healthselector/__snapshots__/Healthselector.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Healthselector Default 1`] = `
 <div
-  className="sc-cSHVUG ezjFEE"
+  className="sc-cSHVUG dZiVUo"
 >
   <h3
-    className="sc-kAzzGY gSNaEJ"
+    className="sc-kAzzGY cVbXJ"
   >
     Basic usage
   </h3>
@@ -13,7 +13,7 @@ exports[`Storyshots Healthselector Default 1`] = `
     className="sc-htoDjs ixiQr sc-healthselector"
   >
     <button
-      className="sc-bxivhb sc-gqjmRU iPKhEf trigger"
+      className="sc-bxivhb sc-gqjmRU bGfYun trigger"
       onBlur={[Function]}
       onClick={[Function]}
       size="base"
@@ -25,13 +25,13 @@ exports[`Storyshots Healthselector Default 1`] = `
           className="sc-gZMcBi bvGPfj"
         >
           <span
-            className="sc-dnqmqq fMtEyy"
+            className="sc-dnqmqq hPNZvv"
           />
           <span
-            className="sc-dnqmqq fyiBQy"
+            className="sc-dnqmqq gsxYuK"
           />
           <span
-            className="sc-dnqmqq eolozk"
+            className="sc-dnqmqq jrdsWP"
           />
         </span>
       </div>
@@ -46,7 +46,7 @@ exports[`Storyshots Healthselector Default 1`] = `
     </button>
   </div>
   <h3
-    className="sc-kAzzGY gSNaEJ"
+    className="sc-kAzzGY cVbXJ"
   >
     Health Selector Sizes (Triggering StoryBook actions)
   </h3>
@@ -60,7 +60,7 @@ exports[`Storyshots Healthselector Default 1`] = `
         className="sc-htoDjs ixiQr sc-healthselector"
       >
         <button
-          className="sc-bxivhb sc-gqjmRU ikavUJ trigger"
+          className="sc-bxivhb sc-gqjmRU fnjuum trigger"
           onBlur={[Function]}
           onClick={[Function]}
           size="smaller"
@@ -72,13 +72,13 @@ exports[`Storyshots Healthselector Default 1`] = `
               className="sc-gZMcBi bvGPfj"
             >
               <span
-                className="sc-dnqmqq fMtEyy"
+                className="sc-dnqmqq hPNZvv"
               />
               <span
-                className="sc-dnqmqq fyiBQy"
+                className="sc-dnqmqq gsxYuK"
               />
               <span
-                className="sc-dnqmqq eolozk"
+                className="sc-dnqmqq jrdsWP"
               />
             </span>
           </div>
@@ -100,7 +100,7 @@ exports[`Storyshots Healthselector Default 1`] = `
         className="sc-htoDjs ixiQr sc-healthselector"
       >
         <button
-          className="sc-bxivhb sc-gqjmRU eOBDLK trigger"
+          className="sc-bxivhb sc-gqjmRU eLVUCO trigger"
           onBlur={[Function]}
           onClick={[Function]}
           size="small"
@@ -112,13 +112,13 @@ exports[`Storyshots Healthselector Default 1`] = `
               className="sc-gZMcBi bvGPfj"
             >
               <span
-                className="sc-dnqmqq fMtEyy"
+                className="sc-dnqmqq hPNZvv"
               />
               <span
-                className="sc-dnqmqq fyiBQy"
+                className="sc-dnqmqq gsxYuK"
               />
               <span
-                className="sc-dnqmqq eolozk"
+                className="sc-dnqmqq jrdsWP"
               />
             </span>
           </div>
@@ -140,7 +140,7 @@ exports[`Storyshots Healthselector Default 1`] = `
         className="sc-htoDjs ixiQr sc-healthselector"
       >
         <button
-          className="sc-bxivhb sc-gqjmRU iPKhEf trigger"
+          className="sc-bxivhb sc-gqjmRU bGfYun trigger"
           onBlur={[Function]}
           onClick={[Function]}
           size="base"
@@ -152,13 +152,13 @@ exports[`Storyshots Healthselector Default 1`] = `
               className="sc-gZMcBi bvGPfj"
             >
               <span
-                className="sc-dnqmqq fMtEyy"
+                className="sc-dnqmqq hPNZvv"
               />
               <span
-                className="sc-dnqmqq fyiBQy"
+                className="sc-dnqmqq gsxYuK"
               />
               <span
-                className="sc-dnqmqq eolozk"
+                className="sc-dnqmqq jrdsWP"
               />
             </span>
           </div>
@@ -184,7 +184,7 @@ exports[`Storyshots Healthselector Default 1`] = `
         className="sc-htoDjs ixiQr sc-healthselector"
       >
         <button
-          className="sc-bxivhb sc-gqjmRU eYYYUH trigger"
+          className="sc-bxivhb sc-gqjmRU kbnfqG trigger"
           onBlur={[Function]}
           onClick={[Function]}
           size="large"
@@ -196,13 +196,13 @@ exports[`Storyshots Healthselector Default 1`] = `
               className="sc-gZMcBi bvGPfj"
             >
               <span
-                className="sc-dnqmqq fMtEyy"
+                className="sc-dnqmqq hPNZvv"
               />
               <span
-                className="sc-dnqmqq fyiBQy"
+                className="sc-dnqmqq gsxYuK"
               />
               <span
-                className="sc-dnqmqq eolozk"
+                className="sc-dnqmqq jrdsWP"
               />
             </span>
           </div>
@@ -224,7 +224,7 @@ exports[`Storyshots Healthselector Default 1`] = `
         className="sc-htoDjs ixiQr sc-healthselector"
       >
         <button
-          className="sc-bxivhb sc-gqjmRU euNQmC trigger"
+          className="sc-bxivhb sc-gqjmRU fdNFQC trigger"
           onBlur={[Function]}
           onClick={[Function]}
           size="larger"
@@ -236,13 +236,13 @@ exports[`Storyshots Healthselector Default 1`] = `
               className="sc-gZMcBi bvGPfj"
             >
               <span
-                className="sc-dnqmqq fMtEyy"
+                className="sc-dnqmqq hPNZvv"
               />
               <span
-                className="sc-dnqmqq fyiBQy"
+                className="sc-dnqmqq gsxYuK"
               />
               <span
-                className="sc-dnqmqq eolozk"
+                className="sc-dnqmqq jrdsWP"
               />
             </span>
           </div>
@@ -259,7 +259,7 @@ exports[`Storyshots Healthselector Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-kAzzGY gSNaEJ"
+    className="sc-kAzzGY cVbXJ"
   >
     With custom labels (Triggering StoryBook actions)
   </h3>
@@ -267,7 +267,7 @@ exports[`Storyshots Healthselector Default 1`] = `
     className="sc-htoDjs ixiQr sc-healthselector"
   >
     <button
-      className="sc-bxivhb sc-gqjmRU iPKhEf trigger"
+      className="sc-bxivhb sc-gqjmRU bGfYun trigger"
       onBlur={[Function]}
       onClick={[Function]}
       size="base"
@@ -279,13 +279,13 @@ exports[`Storyshots Healthselector Default 1`] = `
           className="sc-gZMcBi bvGPfj"
         >
           <span
-            className="sc-dnqmqq fMtEyy"
+            className="sc-dnqmqq hPNZvv"
           />
           <span
-            className="sc-dnqmqq fyiBQy"
+            className="sc-dnqmqq gsxYuK"
           />
           <span
-            className="sc-dnqmqq eolozk"
+            className="sc-dnqmqq jrdsWP"
           />
         </span>
       </div>
diff --git a/src/lib/components/input/__snapshots__/Input.component.test.js.snap b/src/lib/components/input/__snapshots__/Input.component.test.js.snap
index b601de5e1d..e8b56c41ed 100644
--- a/src/lib/components/input/__snapshots__/Input.component.test.js.snap
+++ b/src/lib/components/input/__snapshots__/Input.component.test.js.snap
@@ -2,15 +2,15 @@
 
 exports[`Storyshots Input Default 1`] = `
 <div
-  className="sc-htoDjs cSFtNk"
+  className="sc-htoDjs kZdxXg"
 >
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Input without label
   </h3>
   <div
-    className="sc-ifAKCX dUAmzj sc-input"
+    className="sc-ifAKCX hULCSa sc-input"
   >
     <div
       className="sc-gzVnrw kvhoeX sc-input-wrapper"
@@ -29,15 +29,15 @@ exports[`Storyshots Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Input with label
   </h3>
   <div
-    className="sc-ifAKCX dUAmzj sc-input"
+    className="sc-ifAKCX hULCSa sc-input"
   >
     <label
-      className="sc-EHOje TtbFm sc-input-label"
+      className="sc-EHOje glQODq sc-input-label"
       htmlFor="id2"
     >
       label
@@ -58,15 +58,15 @@ exports[`Storyshots Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Input with error
   </h3>
   <div
-    className="sc-ifAKCX jJpmTy sc-input"
+    className="sc-ifAKCX exwQMG sc-input"
   >
     <label
-      className="sc-EHOje TtbFm sc-input-label"
+      className="sc-EHOje glQODq sc-input-label"
       htmlFor="id3"
     >
       label
@@ -85,14 +85,14 @@ exports[`Storyshots Input Default 1`] = `
         value="value"
       />
       <span
-        className="sc-bZQynM fUcYPm sc-input-error"
+        className="sc-bZQynM iZyYwj sc-input-error"
       >
         error
       </span>
     </div>
   </div>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Input with long error
   </h3>
@@ -100,10 +100,10 @@ exports[`Storyshots Input Default 1`] = `
     className="sc-gqjmRU czbDPR"
   >
     <div
-      className="sc-ifAKCX jJpmTy sc-input"
+      className="sc-ifAKCX exwQMG sc-input"
     >
       <label
-        className="sc-EHOje TtbFm sc-input-label"
+        className="sc-EHOje glQODq sc-input-label"
         htmlFor="id3"
       >
         label
@@ -122,7 +122,7 @@ exports[`Storyshots Input Default 1`] = `
           value="value"
         />
         <span
-          className="sc-bZQynM fUcYPm sc-input-error"
+          className="sc-bZQynM iZyYwj sc-input-error"
         >
           long error error error error error error error error error
         </span>
@@ -130,15 +130,15 @@ exports[`Storyshots Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Checkbox Input
   </h3>
   <div
-    className="sc-ifAKCX dUAmzj sc-input"
+    className="sc-ifAKCX hULCSa sc-input"
   >
     <label
-      className="sc-EHOje TtbFm sc-input-label"
+      className="sc-EHOje glQODq sc-input-label"
       htmlFor="id4"
     >
       label
@@ -148,7 +148,7 @@ exports[`Storyshots Input Default 1`] = `
     >
       <label
         checked={false}
-        className="sc-bwzfXH fPlAHx sc-checkbox"
+        className="sc-bwzfXH eHtcdR sc-checkbox"
       >
         <input
           checked={false}
@@ -164,15 +164,15 @@ exports[`Storyshots Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Checkbox Input with error
   </h3>
   <div
-    className="sc-ifAKCX jJpmTy sc-input"
+    className="sc-ifAKCX exwQMG sc-input"
   >
     <label
-      className="sc-EHOje TtbFm sc-input-label"
+      className="sc-EHOje glQODq sc-input-label"
       htmlFor="id5"
     >
       label
@@ -182,7 +182,7 @@ exports[`Storyshots Input Default 1`] = `
     >
       <label
         checked={false}
-        className="sc-bwzfXH fPlAHx sc-checkbox"
+        className="sc-bwzfXH eHtcdR sc-checkbox"
       >
         <input
           checked={false}
@@ -196,22 +196,22 @@ exports[`Storyshots Input Default 1`] = `
         />
       </label>
       <span
-        className="sc-bZQynM fUcYPm sc-input-error"
+        className="sc-bZQynM iZyYwj sc-input-error"
       >
         error
       </span>
     </div>
   </div>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Select Input
   </h3>
   <div
-    className="sc-ifAKCX dUAmzj sc-input"
+    className="sc-ifAKCX hULCSa sc-input"
   >
     <label
-      className="sc-EHOje TtbFm sc-input-label"
+      className="sc-EHOje glQODq sc-input-label"
       htmlFor="id6"
     >
       label
@@ -220,7 +220,7 @@ exports[`Storyshots Input Default 1`] = `
       className="sc-gzVnrw kvhoeX sc-input-wrapper"
     >
       <div
-        className="sc-htpNat ixyenT sc-select-container"
+        className="sc-htpNat gDMoX sc-select-container"
       >
         <div
           className="sc-select css-2b097c-container"
@@ -336,15 +336,15 @@ exports[`Storyshots Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Textarea Input
   </h3>
   <div
-    className="sc-ifAKCX dUAmzj sc-input"
+    className="sc-ifAKCX hULCSa sc-input"
   >
     <label
-      className="sc-EHOje TtbFm sc-input-label"
+      className="sc-EHOje glQODq sc-input-label"
       htmlFor="id7"
     >
       label
@@ -353,7 +353,7 @@ exports[`Storyshots Input Default 1`] = `
       className="sc-gzVnrw kvhoeX sc-input-wrapper"
     >
       <textarea
-        className="sc-bxivhb DQwAX sc-textarea"
+        className="sc-bxivhb dHgxYX sc-textarea"
         cols={20}
         id="id7"
         onChange={[Function]}
@@ -364,15 +364,15 @@ exports[`Storyshots Input Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-dnqmqq GkIIj"
+    className="sc-dnqmqq lgiIQQ"
   >
     Textarea Input with error
   </h3>
   <div
-    className="sc-ifAKCX jJpmTy sc-input"
+    className="sc-ifAKCX exwQMG sc-input"
   >
     <label
-      className="sc-EHOje TtbFm sc-input-label"
+      className="sc-EHOje glQODq sc-input-label"
       htmlFor="id7"
     >
       label
@@ -381,7 +381,7 @@ exports[`Storyshots Input Default 1`] = `
       className="sc-gzVnrw kvhoeX sc-input-wrapper"
     >
       <textarea
-        className="sc-bxivhb DQwAX sc-textarea"
+        className="sc-bxivhb dHgxYX sc-textarea"
         cols={50}
         id="id7"
         onChange={[Function]}
@@ -390,7 +390,7 @@ exports[`Storyshots Input Default 1`] = `
         value="Hello"
       />
       <span
-        className="sc-bZQynM fUcYPm sc-input-error"
+        className="sc-bZQynM iZyYwj sc-input-error"
       >
         error
       </span>
diff --git a/src/lib/components/lateralnavbarlayout/__snapshots__/LateralNavbarLayout.component.test.js.snap b/src/lib/components/lateralnavbarlayout/__snapshots__/LateralNavbarLayout.component.test.js.snap
index 2ff22fa88d..ce036fcdcc 100644
--- a/src/lib/components/lateralnavbarlayout/__snapshots__/LateralNavbarLayout.component.test.js.snap
+++ b/src/lib/components/lateralnavbarlayout/__snapshots__/LateralNavbarLayout.component.test.js.snap
@@ -9,10 +9,10 @@ exports[`Storyshots LateralNavbarLayout Sidebar docked 1`] = `
       className="sc-jTzLTM uWek"
     >
       <div
-        className="sc-htoDjs hlIRNL sc-sidebar"
+        className="sc-htoDjs mffkx sc-sidebar"
       >
         <div
-          className="sc-dnqmqq eCZUVx sc-sidebar-item"
+          className="sc-dnqmqq hHMncO sc-sidebar-item"
           data-cy="Dashboard"
           onClick={[Function]}
           title="Dashboard"
@@ -26,7 +26,7 @@ exports[`Storyshots LateralNavbarLayout Sidebar docked 1`] = `
           </div>
         </div>
         <div
-          className="sc-dnqmqq keEEvP sc-sidebar-item"
+          className="sc-dnqmqq gzcMSc sc-sidebar-item"
           data-cy="Servers"
           onClick={[Function]}
           title="Servers"
@@ -40,7 +40,7 @@ exports[`Storyshots LateralNavbarLayout Sidebar docked 1`] = `
           </div>
         </div>
         <div
-          className="sc-dnqmqq keEEvP sc-sidebar-item"
+          className="sc-dnqmqq gzcMSc sc-sidebar-item"
           data-cy="Disks"
           onClick={[Function]}
           title="Disks"
@@ -55,10 +55,10 @@ exports[`Storyshots LateralNavbarLayout Sidebar docked 1`] = `
         </div>
       </div>
       <div
-        className="sc-fjdhpX hlQASM main"
+        className="sc-fjdhpX cqEFOw main"
       >
         <div
-          className="sc-bdVaJa fzetMk sc-loader"
+          className="sc-bdVaJa gXtcHQ sc-loader"
           color="#87929D"
           size="massive"
         >
@@ -195,10 +195,10 @@ exports[`Storyshots LateralNavbarLayout Sidebar expanded 1`] = `
     className="sc-jTzLTM uWek"
   >
     <div
-      className="sc-htoDjs jHkWRG sc-sidebar"
+      className="sc-htoDjs bTIpkD sc-sidebar"
     >
       <div
-        className="sc-dnqmqq eCZUVx sc-sidebar-item"
+        className="sc-dnqmqq hHMncO sc-sidebar-item"
         data-cy="Dashboard"
         onClick={[Function]}
         title="Dashboard"
@@ -216,11 +216,11 @@ exports[`Storyshots LateralNavbarLayout Sidebar expanded 1`] = `
           Dashboard
         </div>
         <div
-          className="sc-gZMcBi dZkYTy"
+          className="sc-gZMcBi ehsNBu"
         />
       </div>
       <div
-        className="sc-dnqmqq keEEvP sc-sidebar-item"
+        className="sc-dnqmqq gzcMSc sc-sidebar-item"
         data-cy="Servers"
         onClick={[Function]}
         title="Servers"
@@ -239,7 +239,7 @@ exports[`Storyshots LateralNavbarLayout Sidebar expanded 1`] = `
         </div>
       </div>
       <div
-        className="sc-dnqmqq keEEvP sc-sidebar-item"
+        className="sc-dnqmqq gzcMSc sc-sidebar-item"
         data-cy="Disks"
         onClick={[Function]}
         title="Disks"
@@ -259,10 +259,10 @@ exports[`Storyshots LateralNavbarLayout Sidebar expanded 1`] = `
       </div>
     </div>
     <div
-      className="sc-fjdhpX hlQASM main"
+      className="sc-fjdhpX cqEFOw main"
     >
       <div
-        className="sc-bdVaJa fzetMk sc-loader"
+        className="sc-bdVaJa gXtcHQ sc-loader"
         color="#87929D"
         size="massive"
       >
@@ -398,13 +398,13 @@ exports[`Storyshots LateralNavbarLayout Sidebar with toggle 1`] = `
     className="sc-jTzLTM uWek"
   >
     <div
-      className="sc-htoDjs jHkWRG sc-sidebar"
+      className="sc-htoDjs bTIpkD sc-sidebar"
     >
       <div
         className="sc-gqjmRU coMoOk"
       >
         <button
-          className="sc-bxivhb hAHRzA sc-button"
+          className="sc-bxivhb egRmZd sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -435,7 +435,7 @@ exports[`Storyshots LateralNavbarLayout Sidebar with toggle 1`] = `
         </button>
       </div>
       <div
-        className="sc-dnqmqq eCZUVx sc-sidebar-item"
+        className="sc-dnqmqq hHMncO sc-sidebar-item"
         data-cy="Dashboard"
         onClick={[Function]}
         title="Dashboard"
@@ -453,11 +453,11 @@ exports[`Storyshots LateralNavbarLayout Sidebar with toggle 1`] = `
           Dashboard
         </div>
         <div
-          className="sc-gZMcBi dZkYTy"
+          className="sc-gZMcBi ehsNBu"
         />
       </div>
       <div
-        className="sc-dnqmqq keEEvP sc-sidebar-item"
+        className="sc-dnqmqq gzcMSc sc-sidebar-item"
         data-cy="Servers"
         onClick={[Function]}
         title="Servers"
@@ -476,7 +476,7 @@ exports[`Storyshots LateralNavbarLayout Sidebar with toggle 1`] = `
         </div>
       </div>
       <div
-        className="sc-dnqmqq keEEvP sc-sidebar-item"
+        className="sc-dnqmqq gzcMSc sc-sidebar-item"
         data-cy="Disks"
         onClick={[Function]}
         title="Disks"
@@ -496,10 +496,10 @@ exports[`Storyshots LateralNavbarLayout Sidebar with toggle 1`] = `
       </div>
     </div>
     <div
-      className="sc-fjdhpX hlQASM main"
+      className="sc-fjdhpX cqEFOw main"
     >
       <div
-        className="sc-bdVaJa fzetMk sc-loader"
+        className="sc-bdVaJa gXtcHQ sc-loader"
         color="#87929D"
         size="massive"
       >
diff --git a/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap b/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap
index 03d93a19a3..98d0cf75ba 100644
--- a/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap
+++ b/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap
@@ -5,17 +5,17 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
   className="sc-eNQAEJ iByiJn sc-layout"
 >
   <div
-    className="sc-VigVT fyyQeq sc-navbar"
+    className="sc-VigVT fonxNn sc-navbar"
   >
     <div
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
         onClick={[Function]}
       >
         <button
-          className="sc-bxivhb hAHRzA sc-button"
+          className="sc-bxivhb egRmZd sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
@@ -45,7 +45,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
         </button>
       </div>
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-kgoBCf eZcjUs sc-logo"
@@ -120,7 +120,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
         </div>
       </div>
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <h1
           className="sc-chPdSV hsiPpx"
@@ -133,13 +133,13 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -165,7 +165,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -186,7 +186,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -207,7 +207,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -236,10 +236,10 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
     className="sc-hMqMXs imuZbu"
   >
     <div
-      className="sc-kGXeez disOYu sc-sidebar"
+      className="sc-kGXeez jvGbHw sc-sidebar"
     >
       <div
-        className="sc-kpOJdX iPVskz sc-sidebar-item"
+        className="sc-kpOJdX gwFSrB sc-sidebar-item"
         data-cy="Dashboard"
         onClick={[Function]}
         title="Dashboard"
@@ -253,7 +253,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
         </div>
       </div>
       <div
-        className="sc-kpOJdX bWffFJ sc-sidebar-item"
+        className="sc-kpOJdX cYNVhq sc-sidebar-item"
         data-cy="Servers"
         onClick={[Function]}
         title="Servers"
@@ -267,7 +267,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
         </div>
       </div>
       <div
-        className="sc-kpOJdX bWffFJ sc-sidebar-item"
+        className="sc-kpOJdX cYNVhq sc-sidebar-item"
         data-cy="Disks"
         onClick={[Function]}
         title="Disks"
@@ -282,10 +282,10 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
       </div>
     </div>
     <div
-      className="sc-kEYyzF gEYbDe main"
+      className="sc-kEYyzF cQymWe main"
     >
       <div
-        className="sc-bdVaJa fzetMk sc-loader"
+        className="sc-bdVaJa gXtcHQ sc-loader"
         color="#87929D"
         size="massive"
       >
@@ -418,17 +418,17 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
   className="sc-eNQAEJ iByiJn sc-layout"
 >
   <div
-    className="sc-VigVT fyyQeq sc-navbar"
+    className="sc-VigVT fonxNn sc-navbar"
   >
     <div
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
         onClick={[Function]}
       >
         <button
-          className="sc-bxivhb hAHRzA sc-button"
+          className="sc-bxivhb egRmZd sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
@@ -458,7 +458,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
         </button>
       </div>
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-kgoBCf eZcjUs sc-logo"
@@ -533,7 +533,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
         </div>
       </div>
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <h1
           className="sc-chPdSV hsiPpx"
@@ -546,13 +546,13 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -578,7 +578,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -599,7 +599,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -620,7 +620,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -649,10 +649,10 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
     className="sc-hMqMXs imuZbu"
   >
     <div
-      className="sc-kGXeez cKIBNi sc-sidebar"
+      className="sc-kGXeez bfHyyQ sc-sidebar"
     >
       <div
-        className="sc-kpOJdX iPVskz sc-sidebar-item"
+        className="sc-kpOJdX gwFSrB sc-sidebar-item"
         data-cy="Dashboard"
         onClick={[Function]}
         title="Dashboard"
@@ -670,11 +670,11 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
           Dashboard
         </div>
         <div
-          className="sc-ckVGcZ hmtLZx"
+          className="sc-ckVGcZ dvxUOP"
         />
       </div>
       <div
-        className="sc-kpOJdX bWffFJ sc-sidebar-item"
+        className="sc-kpOJdX cYNVhq sc-sidebar-item"
         data-cy="Servers"
         onClick={[Function]}
         title="Servers"
@@ -693,7 +693,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
         </div>
       </div>
       <div
-        className="sc-kpOJdX bWffFJ sc-sidebar-item"
+        className="sc-kpOJdX cYNVhq sc-sidebar-item"
         data-cy="Disks"
         onClick={[Function]}
         title="Disks"
@@ -713,10 +713,10 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
       </div>
     </div>
     <div
-      className="sc-kEYyzF gEYbDe main"
+      className="sc-kEYyzF cQymWe main"
     >
       <div
-        className="sc-bdVaJa fzetMk sc-loader"
+        className="sc-bdVaJa gXtcHQ sc-loader"
         color="#87929D"
         size="massive"
       >
@@ -849,13 +849,13 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
   className="sc-eNQAEJ iByiJn sc-layout"
 >
   <div
-    className="sc-VigVT fyyQeq sc-navbar"
+    className="sc-VigVT fonxNn sc-navbar"
   >
     <div
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-kgoBCf eZcjUs sc-logo"
@@ -930,7 +930,7 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
         </div>
       </div>
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <h1
           className="sc-chPdSV hsiPpx"
@@ -943,13 +943,13 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -975,7 +975,7 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -996,7 +996,7 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1017,7 +1017,7 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1046,13 +1046,13 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
     className="sc-hMqMXs imuZbu"
   >
     <div
-      className="sc-kGXeez cKIBNi sc-sidebar"
+      className="sc-kGXeez bfHyyQ sc-sidebar"
     >
       <div
         className="sc-jKJlTe hJeLlx"
       >
         <button
-          className="sc-bxivhb hAHRzA sc-button"
+          className="sc-bxivhb egRmZd sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -1083,7 +1083,7 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
         </button>
       </div>
       <div
-        className="sc-kpOJdX iPVskz sc-sidebar-item"
+        className="sc-kpOJdX gwFSrB sc-sidebar-item"
         data-cy="Dashboard"
         onClick={[Function]}
         title="Dashboard"
@@ -1101,11 +1101,11 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
           Dashboard
         </div>
         <div
-          className="sc-ckVGcZ hmtLZx"
+          className="sc-ckVGcZ dvxUOP"
         />
       </div>
       <div
-        className="sc-kpOJdX bWffFJ sc-sidebar-item"
+        className="sc-kpOJdX cYNVhq sc-sidebar-item"
         data-cy="Servers"
         onClick={[Function]}
         title="Servers"
@@ -1124,7 +1124,7 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
         </div>
       </div>
       <div
-        className="sc-kpOJdX bWffFJ sc-sidebar-item"
+        className="sc-kpOJdX cYNVhq sc-sidebar-item"
         data-cy="Disks"
         onClick={[Function]}
         title="Disks"
@@ -1144,10 +1144,10 @@ exports[`Storyshots Layout Sidebar with toggle 1`] = `
       </div>
     </div>
     <div
-      className="sc-kEYyzF gEYbDe main"
+      className="sc-kEYyzF cQymWe main"
     >
       <div
-        className="sc-bdVaJa fzetMk sc-loader"
+        className="sc-bdVaJa gXtcHQ sc-loader"
         color="#87929D"
         size="massive"
       >
diff --git a/src/lib/components/linechart/__snapshots__/LineChart.component.test.js.snap b/src/lib/components/linechart/__snapshots__/LineChart.component.test.js.snap
index 106d1f69ce..7ba3861456 100644
--- a/src/lib/components/linechart/__snapshots__/LineChart.component.test.js.snap
+++ b/src/lib/components/linechart/__snapshots__/LineChart.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots LineChart Default 1`] = `
 <div
-  className="sc-bwzfXH hilSGa"
+  className="sc-bwzfXH hyPwIk"
 >
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Vege-Lite line chart demo
   </h3>
@@ -14,7 +14,7 @@ exports[`Storyshots LineChart Default 1`] = `
     id="vis"
   />
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Vege-Lite line chart without axis
   </h3>
@@ -23,7 +23,7 @@ exports[`Storyshots LineChart Default 1`] = `
     id="vis2"
   />
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Vege-Lite forecast chart
   </h3>
diff --git a/src/lib/components/loader/__snapshots__/Loader.component.test.js.snap b/src/lib/components/loader/__snapshots__/Loader.component.test.js.snap
index fc109f7f75..dae0f462d3 100644
--- a/src/lib/components/loader/__snapshots__/Loader.component.test.js.snap
+++ b/src/lib/components/loader/__snapshots__/Loader.component.test.js.snap
@@ -6,7 +6,7 @@ exports[`Storyshots Loader Combinations 1`] = `
     style={Object {}}
   >
     <div
-      className="sc-bdVaJa jGCmKI sc-loader"
+      className="sc-bdVaJa SpoMa sc-loader"
       color="#87929D"
       size="base"
     >
@@ -141,7 +141,7 @@ exports[`Storyshots Loader Combinations 1`] = `
     style={Object {}}
   >
     <div
-      className="sc-bdVaJa hAdDCG sc-loader"
+      className="sc-bdVaJa eotZMW sc-loader"
       color="#87929D"
       size="large"
     >
@@ -276,7 +276,7 @@ exports[`Storyshots Loader Combinations 1`] = `
     style={Object {}}
   >
     <div
-      className="sc-bdVaJa dWCwcG sc-loader"
+      className="sc-bdVaJa iWzWsR sc-loader"
       color="#87929D"
       size="larger"
     >
@@ -411,7 +411,7 @@ exports[`Storyshots Loader Combinations 1`] = `
     style={Object {}}
   >
     <div
-      className="sc-bdVaJa lhjeLF sc-loader"
+      className="sc-bdVaJa eobblp sc-loader"
       color="#87929D"
       size="huge"
     >
@@ -546,7 +546,7 @@ exports[`Storyshots Loader Combinations 1`] = `
     style={Object {}}
   >
     <div
-      className="sc-bdVaJa fzetMk sc-loader"
+      className="sc-bdVaJa gXtcHQ sc-loader"
       color="#87929D"
       size="massive"
     >
@@ -682,10 +682,10 @@ exports[`Storyshots Loader Combinations 1`] = `
 
 exports[`Storyshots Loader With dynamic props 1`] = `
 <div
-  className="sc-bxivhb eTQnSH"
+  className="sc-bxivhb ejYWWW"
 >
   <div
-    className="sc-bdVaJa jGCmKI sc-loader"
+    className="sc-bdVaJa SpoMa sc-loader"
     color="#87929D"
     size="base"
   >
@@ -807,7 +807,7 @@ exports[`Storyshots Loader With dynamic props 1`] = `
         </g>
       </svg>
       <span
-        className="sc-bwzfXH bSfjHf"
+        className="sc-bwzfXH kJrJjC"
       >
          
         Loading
diff --git a/src/lib/components/modal/__snapshots__/Modal.component.test.js.snap b/src/lib/components/modal/__snapshots__/Modal.component.test.js.snap
index ca85101b88..e7c87be777 100644
--- a/src/lib/components/modal/__snapshots__/Modal.component.test.js.snap
+++ b/src/lib/components/modal/__snapshots__/Modal.component.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`Storyshots Modal Default 1`] = `
 <div
-  className="sc-fjdhpX fYqDPr"
+  className="sc-fjdhpX gmwXQR"
 >
   <div
     className="sc-bdVaJa gIywMY sc-modal"
   >
     <div
-      className="sc-bwzfXH iQuXjK sc-modal-content"
+      className="sc-bwzfXH irNfns sc-modal-content"
     >
       <div
         className="sc-htpNat fPOfap sc-modal-header"
@@ -35,7 +35,7 @@ exports[`Storyshots Modal Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-EHOje cGltox sc-modal-footer"
+        className="sc-EHOje eGHiuT sc-modal-footer"
       >
         <div
           style={
@@ -46,7 +46,7 @@ exports[`Storyshots Modal Default 1`] = `
           }
         >
           <button
-            className="sc-iwsKbI gxxCKP sc-button"
+            className="sc-iwsKbI ZUCvC sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
@@ -68,7 +68,7 @@ exports[`Storyshots Modal Default 1`] = `
             </span>
           </button>
           <button
-            className="sc-iwsKbI hSzrkv sc-button"
+            className="sc-iwsKbI gwopHK sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
diff --git a/src/lib/components/multiselect/__snapshots__/MultiSelect.component.test.js.snap b/src/lib/components/multiselect/__snapshots__/MultiSelect.component.test.js.snap
index 59e056fa0d..e3e96379c2 100644
--- a/src/lib/components/multiselect/__snapshots__/MultiSelect.component.test.js.snap
+++ b/src/lib/components/multiselect/__snapshots__/MultiSelect.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots MultiSelect Default 1`] = `
 <div
-  className="sc-kgoBCf cLQuys"
+  className="sc-kgoBCf gbEyBL"
 >
   <h3
-    className="sc-kGXeez gkhxgb"
+    className="sc-kGXeez JrBQb"
   >
     MultiSelect List
   </h3>
@@ -13,7 +13,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-gZMcBi fZLiIC sc-multi-select-list"
+      className="sc-gZMcBi devRpa sc-multi-select-list"
     >
       <h3
         className="sc-gqjmRU kKvYqO"
@@ -24,7 +24,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
         className="sc-jTzLTM gqMPpu sc-multi-select-list-search"
       >
         <div
-          className="sc-iwsKbI iNhfYt sc-select-container"
+          className="sc-iwsKbI kmhuIk sc-select-container"
         >
           <div
             className="sc-select css-2b097c-container"
@@ -131,7 +131,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-EHOje cmdjUq sc-button"
+          className="sc-EHOje brAPqr sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -169,7 +169,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
         >
           <label
             checked={true}
-            className="sc-bwzfXH bLyocb sc-checkbox"
+            className="sc-bwzfXH ckJhMz sc-checkbox"
           >
             <input
               checked={true}
@@ -181,7 +181,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-EHOje iRMcxR sc-button"
+            className="sc-EHOje bTfJQB sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -229,7 +229,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje ljVHfg sc-button"
+            className="sc-EHOje lpbhmX sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -268,7 +268,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
         >
           <label
             checked={false}
-            className="sc-bwzfXH fPlAHx sc-checkbox"
+            className="sc-bwzfXH eHtcdR sc-checkbox"
           >
             <input
               checked={false}
@@ -280,7 +280,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-EHOje iRMcxR sc-button"
+            className="sc-EHOje bTfJQB sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -328,7 +328,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje ljVHfg sc-button"
+            className="sc-EHOje lpbhmX sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -362,7 +362,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-kGXeez gkhxgb"
+    className="sc-kGXeez JrBQb"
   >
     MultiSelect List without search
   </h3>
@@ -370,7 +370,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-gZMcBi fZLiIC sc-multi-select-list"
+      className="sc-gZMcBi devRpa sc-multi-select-list"
     >
       <h3
         className="sc-gqjmRU kKvYqO"
@@ -385,7 +385,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
         >
           <label
             checked={true}
-            className="sc-bwzfXH bLyocb sc-checkbox"
+            className="sc-bwzfXH ckJhMz sc-checkbox"
           >
             <input
               checked={true}
@@ -397,7 +397,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-EHOje iRMcxR sc-button"
+            className="sc-EHOje bTfJQB sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -445,7 +445,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje ljVHfg sc-button"
+            className="sc-EHOje lpbhmX sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -484,7 +484,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
         >
           <label
             checked={false}
-            className="sc-bwzfXH fPlAHx sc-checkbox"
+            className="sc-bwzfXH eHtcdR sc-checkbox"
           >
             <input
               checked={false}
@@ -496,7 +496,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-EHOje iRMcxR sc-button"
+            className="sc-EHOje bTfJQB sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -544,7 +544,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje ljVHfg sc-button"
+            className="sc-EHOje lpbhmX sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -578,7 +578,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-kGXeez gkhxgb"
+    className="sc-kGXeez JrBQb"
   >
     MultiSelect List without Favourite
   </h3>
@@ -586,7 +586,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-gZMcBi fZLiIC sc-multi-select-list"
+      className="sc-gZMcBi devRpa sc-multi-select-list"
     >
       <h3
         className="sc-gqjmRU kKvYqO"
@@ -597,7 +597,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
         className="sc-jTzLTM gqMPpu sc-multi-select-list-search"
       >
         <div
-          className="sc-iwsKbI iNhfYt sc-select-container"
+          className="sc-iwsKbI kmhuIk sc-select-container"
         >
           <div
             className="sc-select css-2b097c-container"
@@ -704,7 +704,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-EHOje cmdjUq sc-button"
+          className="sc-EHOje brAPqr sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -742,7 +742,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
         >
           <label
             checked={true}
-            className="sc-bwzfXH bLyocb sc-checkbox"
+            className="sc-bwzfXH ckJhMz sc-checkbox"
           >
             <input
               checked={true}
@@ -772,7 +772,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje ljVHfg sc-button"
+            className="sc-EHOje lpbhmX sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -811,7 +811,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
         >
           <label
             checked={false}
-            className="sc-bwzfXH fPlAHx sc-checkbox"
+            className="sc-bwzfXH eHtcdR sc-checkbox"
           >
             <input
               checked={false}
@@ -841,7 +841,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje ljVHfg sc-button"
+            className="sc-EHOje lpbhmX sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -875,7 +875,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-kGXeez gkhxgb"
+    className="sc-kGXeez JrBQb"
   >
     MultiSelect List without Favourite and Selectbox
   </h3>
@@ -883,7 +883,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-gZMcBi fZLiIC sc-multi-select-list"
+      className="sc-gZMcBi devRpa sc-multi-select-list"
     >
       <h3
         className="sc-gqjmRU kKvYqO"
@@ -894,7 +894,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
         className="sc-jTzLTM gqMPpu sc-multi-select-list-search"
       >
         <div
-          className="sc-iwsKbI iNhfYt sc-select-container"
+          className="sc-iwsKbI kmhuIk sc-select-container"
         >
           <div
             className="sc-select css-2b097c-container"
@@ -1001,7 +1001,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-EHOje cmdjUq sc-button"
+          className="sc-EHOje brAPqr sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -1055,7 +1055,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje ljVHfg sc-button"
+            className="sc-EHOje lpbhmX sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -1110,7 +1110,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje ljVHfg sc-button"
+            className="sc-EHOje lpbhmX sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -1144,7 +1144,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-kGXeez gkhxgb"
+    className="sc-kGXeez JrBQb"
   >
     MultiSelect List without Remove Button, Favourite and Selectbox
   </h3>
@@ -1152,7 +1152,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-gZMcBi fZLiIC sc-multi-select-list"
+      className="sc-gZMcBi devRpa sc-multi-select-list"
     >
       <h3
         className="sc-gqjmRU kKvYqO"
@@ -1163,7 +1163,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
         className="sc-jTzLTM gqMPpu sc-multi-select-list-search"
       >
         <div
-          className="sc-iwsKbI iNhfYt sc-select-container"
+          className="sc-iwsKbI kmhuIk sc-select-container"
         >
           <div
             className="sc-select css-2b097c-container"
@@ -1270,7 +1270,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-EHOje cmdjUq sc-button"
+          className="sc-EHOje brAPqr sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -1351,7 +1351,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-kGXeez gkhxgb"
+    className="sc-kGXeez JrBQb"
   >
     MultiSelect List without Title, Remove Button, Favourite and Selectbox
   </h3>
@@ -1359,14 +1359,14 @@ exports[`Storyshots MultiSelect Default 1`] = `
     className="storybook-mutiselect-container"
   >
     <div
-      className="sc-gZMcBi fZLiIC sc-multi-select-list"
+      className="sc-gZMcBi devRpa sc-multi-select-list"
     >
       
       <div
         className="sc-jTzLTM gqMPpu sc-multi-select-list-search"
       >
         <div
-          className="sc-iwsKbI iNhfYt sc-select-container"
+          className="sc-iwsKbI kmhuIk sc-select-container"
         >
           <div
             className="sc-select css-2b097c-container"
@@ -1473,7 +1473,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-EHOje cmdjUq sc-button"
+          className="sc-EHOje brAPqr sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
diff --git a/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap b/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap
index 36783277d0..1f658d1ae6 100644
--- a/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap
+++ b/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap
@@ -6,17 +6,17 @@ exports[`Storyshots Navbar Default 1`] = `
     Navbar with toggle
   </h3>
   <div
-    className="sc-VigVT fyyQeq sc-navbar"
+    className="sc-VigVT fonxNn sc-navbar"
   >
     <div
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
         onClick={[Function]}
       >
         <button
-          className="sc-bxivhb hAHRzA sc-button"
+          className="sc-bxivhb egRmZd sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
@@ -46,7 +46,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-kgoBCf eZcjUs sc-logo"
@@ -121,7 +121,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <h1
           className="sc-chPdSV hsiPpx"
@@ -134,7 +134,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-fjdhpX gQmaqJ"
     >
       <div
-        className="sc-jzJRlG kESJFH"
+        className="sc-jzJRlG OUIan"
         onClick={[Function]}
         selected={true}
       >
@@ -143,7 +143,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -152,7 +152,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -161,7 +161,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -170,7 +170,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -183,13 +183,13 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -215,7 +215,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -236,7 +236,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -254,7 +254,7 @@ exports[`Storyshots Navbar Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bxivhb hAHRzA sc-button"
+          className="sc-bxivhb egRmZd sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -287,7 +287,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -316,13 +316,13 @@ exports[`Storyshots Navbar Default 1`] = `
     Navbar without toggle
   </h3>
   <div
-    className="sc-VigVT fyyQeq sc-navbar"
+    className="sc-VigVT fonxNn sc-navbar"
   >
     <div
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-kgoBCf eZcjUs sc-logo"
@@ -397,7 +397,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <h1
           className="sc-chPdSV hsiPpx"
@@ -410,7 +410,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-fjdhpX gQmaqJ"
     >
       <div
-        className="sc-jzJRlG kESJFH"
+        className="sc-jzJRlG OUIan"
         onClick={[Function]}
         selected={true}
       >
@@ -419,7 +419,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -428,7 +428,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -437,7 +437,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -446,7 +446,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -459,13 +459,13 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -491,7 +491,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -512,7 +512,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -530,7 +530,7 @@ exports[`Storyshots Navbar Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bxivhb hAHRzA sc-button"
+          className="sc-bxivhb egRmZd sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -563,7 +563,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -592,17 +592,17 @@ exports[`Storyshots Navbar Default 1`] = `
     Navbar with customized logo
   </h3>
   <div
-    className="sc-VigVT fyyQeq sc-navbar"
+    className="sc-VigVT fonxNn sc-navbar"
   >
     <div
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
         onClick={[Function]}
       >
         <button
-          className="sc-bxivhb hAHRzA sc-button"
+          className="sc-bxivhb egRmZd sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
@@ -632,7 +632,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-kgoBCf eZcjUs sc-logo"
@@ -643,7 +643,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <h1
           className="sc-chPdSV hsiPpx"
@@ -656,7 +656,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-fjdhpX gQmaqJ"
     >
       <div
-        className="sc-jzJRlG kESJFH"
+        className="sc-jzJRlG OUIan"
         onClick={[Function]}
         selected={true}
       >
@@ -665,7 +665,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -674,7 +674,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -683,7 +683,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -692,7 +692,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -705,13 +705,13 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -737,7 +737,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -758,7 +758,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -776,7 +776,7 @@ exports[`Storyshots Navbar Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-bxivhb hAHRzA sc-button"
+          className="sc-bxivhb egRmZd sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -809,7 +809,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -838,13 +838,13 @@ exports[`Storyshots Navbar Default 1`] = `
     Navbar with only tabs
   </h3>
   <div
-    className="sc-VigVT fyyQeq sc-navbar"
+    className="sc-VigVT fonxNn sc-navbar"
   >
     <div
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-kgoBCf eZcjUs sc-logo"
@@ -923,7 +923,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-fjdhpX gQmaqJ"
     >
       <div
-        className="sc-jzJRlG kESJFH"
+        className="sc-jzJRlG OUIan"
         onClick={[Function]}
         selected={true}
       >
@@ -932,7 +932,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -941,7 +941,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -950,7 +950,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -959,7 +959,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </span>
       </div>
       <div
-        className="sc-jzJRlG jdWlDM"
+        className="sc-jzJRlG eeoOZb"
         onClick={[Function]}
         selected={false}
       >
@@ -972,13 +972,13 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1007,13 +1007,13 @@ exports[`Storyshots Navbar Default 1`] = `
     Navbar with only link tabs
   </h3>
   <div
-    className="sc-VigVT fyyQeq sc-navbar"
+    className="sc-VigVT fonxNn sc-navbar"
   >
     <div
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-kgoBCf eZcjUs sc-logo"
@@ -1092,7 +1092,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-fjdhpX gQmaqJ"
     >
       <div
-        className="sc-jzJRlG sc-cSHVUG gyuKsh"
+        className="sc-jzJRlG sc-cSHVUG duGofn"
         selected={true}
       >
         <a
@@ -1102,7 +1102,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </a>
       </div>
       <div
-        className="sc-jzJRlG sc-cSHVUG kgLAoO"
+        className="sc-jzJRlG sc-cSHVUG dEHQxG"
       >
         <a
           href="/users"
@@ -1111,7 +1111,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </a>
       </div>
       <div
-        className="sc-jzJRlG sc-cSHVUG kgLAoO"
+        className="sc-jzJRlG sc-cSHVUG dEHQxG"
       >
         <a
           href="/policies"
@@ -1120,7 +1120,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </a>
       </div>
       <div
-        className="sc-jzJRlG sc-cSHVUG kgLAoO"
+        className="sc-jzJRlG sc-cSHVUG dEHQxG"
       >
         <a
           href="/buckets"
@@ -1129,7 +1129,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </a>
       </div>
       <div
-        className="sc-jzJRlG sc-cSHVUG kgLAoO"
+        className="sc-jzJRlG sc-cSHVUG dEHQxG"
       >
         <a
           href="/workflows"
@@ -1142,13 +1142,13 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-kAzzGY ekCeje"
+        className="sc-kAzzGY kYSksA"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
           <div
-            className="sc-gqjmRU dZVVUo trigger"
+            className="sc-gqjmRU grWMbe trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
diff --git a/src/lib/components/notifications/__snapshots__/Notifications.component.test.js.snap b/src/lib/components/notifications/__snapshots__/Notifications.component.test.js.snap
index 59b2f79bd3..de065adf9d 100644
--- a/src/lib/components/notifications/__snapshots__/Notifications.component.test.js.snap
+++ b/src/lib/components/notifications/__snapshots__/Notifications.component.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`Storyshots Notifications Default 1`] = `
 <div
-  className="sc-EHOje dxVLzp"
+  className="sc-EHOje dZmSdl"
 >
   <div
     className="sc-ifAKCX foTAQB sc-notifications"
   >
     <div
-      className="sc-bdVaJa eDQbOV sc-notification"
+      className="sc-bdVaJa fPvRZn sc-notification"
       data-cy="Carlito_notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
@@ -31,7 +31,7 @@ exports[`Storyshots Notifications Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-bdVaJa kheLfk sc-notification"
+      className="sc-bdVaJa fESKLd sc-notification"
       data-cy="Patrick_notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
@@ -58,7 +58,7 @@ exports[`Storyshots Notifications Default 1`] = `
     className="sc-ifAKCX rJoNA sc-notifications"
   >
     <div
-      className="sc-bdVaJa euocbl sc-notification"
+      className="sc-bdVaJa dEupiW sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -80,7 +80,7 @@ exports[`Storyshots Notifications Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-bdVaJa MnSNT sc-notification"
+      className="sc-bdVaJa bIDSbx sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -93,7 +93,7 @@ exports[`Storyshots Notifications Default 1`] = `
         I am Guidllaume. I live at TOP_LEFT
       </div>
       <div
-        className="sc-htpNat exAJUA"
+        className="sc-htpNat kodeCx"
         max={10000}
         value={0}
       />
@@ -111,7 +111,7 @@ exports[`Storyshots Notifications Default 1`] = `
     className="sc-ifAKCX fQVauU sc-notifications"
   >
     <div
-      className="sc-bdVaJa eieSyr sc-notification"
+      className="sc-bdVaJa dSnFct sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -133,7 +133,7 @@ exports[`Storyshots Notifications Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-bdVaJa MnSNT sc-notification"
+      className="sc-bdVaJa bIDSbx sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -146,7 +146,7 @@ exports[`Storyshots Notifications Default 1`] = `
         I am Yanjin. I live at BOTTOM_LEFT
       </div>
       <div
-        className="sc-htpNat exAJUA"
+        className="sc-htpNat kodeCx"
         max={10000}
         value={0}
       />
@@ -164,7 +164,7 @@ exports[`Storyshots Notifications Default 1`] = `
     className="sc-ifAKCX dsdPyg sc-notifications"
   >
     <div
-      className="sc-bdVaJa euocbl sc-notification"
+      className="sc-bdVaJa dEupiW sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -186,7 +186,7 @@ exports[`Storyshots Notifications Default 1`] = `
       </div>
     </div>
     <div
-      className="sc-bdVaJa eieSyr sc-notification"
+      className="sc-bdVaJa dSnFct sc-notification"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
diff --git a/src/lib/components/progressbar/__snapshots__/ProgressBar.component.test.js.snap b/src/lib/components/progressbar/__snapshots__/ProgressBar.component.test.js.snap
index 202f0fa163..1744ec650a 100644
--- a/src/lib/components/progressbar/__snapshots__/ProgressBar.component.test.js.snap
+++ b/src/lib/components/progressbar/__snapshots__/ProgressBar.component.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Storyshots ProgressBar Default 1`] = `
 <div
-  className="sc-dnqmqq iPngYN"
+  className="sc-dnqmqq dTRNHy"
 >
   <div
     style={
@@ -12,7 +12,7 @@ exports[`Storyshots ProgressBar Default 1`] = `
     }
   >
     <h3
-      className="sc-iwsKbI kghVKP"
+      className="sc-iwsKbI iNdCbW"
     >
       Smaller
     </h3>
@@ -23,26 +23,26 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje kvGeEx"
       >
         <span
-          className="sc-htpNat kJKoKL sc-progressbar-topLeftLabel"
+          className="sc-htpNat fxhLow sc-progressbar-topLeftLabel"
         >
           50%
         </span>
         <span
-          className="sc-bxivhb loHrXM sc-progressbar-toprightlabel"
+          className="sc-bxivhb gpKyhv sc-progressbar-toprightlabel"
         >
           100GB Total
         </span>
       </div>
       <div
-        className="sc-bwzfXH jDAtdl sc-progressbarcontainer"
+        className="sc-bwzfXH jXfDbS sc-progressbarcontainer"
         size="smaller"
       >
         <div
-          className="sc-gzVnrw bCqEum"
+          className="sc-gzVnrw efOwxq"
           width={50}
         >
           <div
-            className="sc-htoDjs jwlwyp"
+            className="sc-htoDjs ggKQxE"
           >
             50%
           </div>
@@ -52,19 +52,19 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje sc-bZQynM dgHRVU"
       >
         <span
-          className="sc-ifAKCX jaBuUH sc-progressbar-bottomleftlabel"
+          className="sc-ifAKCX hXgpMS sc-progressbar-bottomleftlabel"
         >
           50GB Used
         </span>
         <span
-          className="sc-ifAKCX jaBuUH sc-progressbar-bottomrightlabel"
+          className="sc-ifAKCX hXgpMS sc-progressbar-bottomrightlabel"
         >
           50GB Free
         </span>
       </div>
     </div>
     <h3
-      className="sc-iwsKbI kghVKP"
+      className="sc-iwsKbI iNdCbW"
     >
       Base
     </h3>
@@ -75,26 +75,26 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje kvGeEx"
       >
         <span
-          className="sc-htpNat kJKoKL sc-progressbar-topLeftLabel"
+          className="sc-htpNat fxhLow sc-progressbar-topLeftLabel"
         >
           Usage
         </span>
         <span
-          className="sc-bxivhb loHrXM sc-progressbar-toprightlabel"
+          className="sc-bxivhb gpKyhv sc-progressbar-toprightlabel"
         >
           50%
         </span>
       </div>
       <div
-        className="sc-bwzfXH ipOTRh sc-progressbarcontainer"
+        className="sc-bwzfXH juBJWt sc-progressbarcontainer"
         size="base"
       >
         <div
-          className="sc-gzVnrw bCqEum"
+          className="sc-gzVnrw efOwxq"
           width={50}
         >
           <div
-            className="sc-htoDjs jwlwyp"
+            className="sc-htoDjs ggKQxE"
           >
             50%
           </div>
@@ -104,19 +104,19 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje sc-bZQynM dgHRVU"
       >
         <span
-          className="sc-ifAKCX jaBuUH sc-progressbar-bottomleftlabel"
+          className="sc-ifAKCX hXgpMS sc-progressbar-bottomleftlabel"
         >
           5.17TB STORED - 13TB USED
         </span>
         <span
-          className="sc-ifAKCX jaBuUH sc-progressbar-bottomrightlabel"
+          className="sc-ifAKCX hXgpMS sc-progressbar-bottomrightlabel"
         >
           12.9TB FREE - 25.83TB TOTAL
         </span>
       </div>
     </div>
     <h3
-      className="sc-iwsKbI kghVKP"
+      className="sc-iwsKbI iNdCbW"
     >
       Large with animation
     </h3>
@@ -127,26 +127,26 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje kvGeEx"
       >
         <span
-          className="sc-htpNat kJKoKL sc-progressbar-topLeftLabel"
+          className="sc-htpNat fxhLow sc-progressbar-topLeftLabel"
         >
           50%
         </span>
         <span
-          className="sc-bxivhb loHrXM sc-progressbar-toprightlabel"
+          className="sc-bxivhb gpKyhv sc-progressbar-toprightlabel"
         >
           100GB Total
         </span>
       </div>
       <div
-        className="sc-bwzfXH fzVZHc sc-progressbarcontainer"
+        className="sc-bwzfXH czLbrn sc-progressbarcontainer"
         size="large"
       >
         <div
-          className="sc-gzVnrw kSvHQq"
+          className="sc-gzVnrw bPmetE"
           width={50}
         >
           <div
-            className="sc-htoDjs jwlwyp"
+            className="sc-htoDjs ggKQxE"
           >
             50%
           </div>
@@ -156,19 +156,19 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje sc-bZQynM dgHRVU"
       >
         <span
-          className="sc-ifAKCX jaBuUH sc-progressbar-bottomleftlabel"
+          className="sc-ifAKCX hXgpMS sc-progressbar-bottomleftlabel"
         >
           50GB Used
         </span>
         <span
-          className="sc-ifAKCX jaBuUH sc-progressbar-bottomrightlabel"
+          className="sc-ifAKCX hXgpMS sc-progressbar-bottomrightlabel"
         >
           50GB Free
         </span>
       </div>
     </div>
     <h3
-      className="sc-iwsKbI kghVKP"
+      className="sc-iwsKbI iNdCbW"
     >
       Larger
     </h3>
@@ -179,26 +179,26 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje kvGeEx"
       >
         <span
-          className="sc-htpNat kJKoKL sc-progressbar-topLeftLabel"
+          className="sc-htpNat fxhLow sc-progressbar-topLeftLabel"
         >
           50%
         </span>
         <span
-          className="sc-bxivhb loHrXM sc-progressbar-toprightlabel"
+          className="sc-bxivhb gpKyhv sc-progressbar-toprightlabel"
         >
           100GB Total
         </span>
       </div>
       <div
-        className="sc-bwzfXH jOIsqe sc-progressbarcontainer"
+        className="sc-bwzfXH hfVEtd sc-progressbarcontainer"
         size="larger"
       >
         <div
-          className="sc-gzVnrw bCqEum"
+          className="sc-gzVnrw efOwxq"
           width={50}
         >
           <div
-            className="sc-htoDjs jwlwyp"
+            className="sc-htoDjs ggKQxE"
           >
             50%
           </div>
@@ -208,19 +208,19 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje sc-bZQynM dgHRVU"
       >
         <span
-          className="sc-ifAKCX jaBuUH sc-progressbar-bottomleftlabel"
+          className="sc-ifAKCX hXgpMS sc-progressbar-bottomleftlabel"
         >
           50GB Used
         </span>
         <span
-          className="sc-ifAKCX jaBuUH sc-progressbar-bottomrightlabel"
+          className="sc-ifAKCX hXgpMS sc-progressbar-bottomrightlabel"
         >
           50GB Free
         </span>
       </div>
     </div>
     <h3
-      className="sc-iwsKbI kghVKP"
+      className="sc-iwsKbI iNdCbW"
     >
       Different colors
     </h3>
@@ -231,18 +231,18 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje kvGeEx"
       >
         <span
-          className="sc-htpNat kJKoKL sc-progressbar-topLeftLabel"
+          className="sc-htpNat fxhLow sc-progressbar-topLeftLabel"
         >
           50%
         </span>
         <span
-          className="sc-bxivhb loHrXM sc-progressbar-toprightlabel"
+          className="sc-bxivhb gpKyhv sc-progressbar-toprightlabel"
         >
           100GB Total
         </span>
       </div>
       <div
-        className="sc-bwzfXH jDAtdl sc-progressbarcontainer"
+        className="sc-bwzfXH jXfDbS sc-progressbarcontainer"
         size="smaller"
       >
         <div
@@ -251,7 +251,7 @@ exports[`Storyshots ProgressBar Default 1`] = `
           width={50}
         >
           <div
-            className="sc-htoDjs jwlwyp"
+            className="sc-htoDjs ggKQxE"
           >
             50%
           </div>
@@ -261,12 +261,12 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje sc-bZQynM dgHRVU"
       >
         <span
-          className="sc-ifAKCX jaBuUH sc-progressbar-bottomleftlabel"
+          className="sc-ifAKCX hXgpMS sc-progressbar-bottomleftlabel"
         >
           50GB Used
         </span>
         <span
-          className="sc-ifAKCX jaBuUH sc-progressbar-bottomrightlabel"
+          className="sc-ifAKCX hXgpMS sc-progressbar-bottomrightlabel"
         >
           50GB Free
         </span>
@@ -279,13 +279,13 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje kvGeEx"
       >
         <span
-          className="sc-htpNat kJKoKL sc-progressbar-topLeftLabel"
+          className="sc-htpNat fxhLow sc-progressbar-topLeftLabel"
         >
           10%
         </span>
       </div>
       <div
-        className="sc-bwzfXH jDAtdl sc-progressbarcontainer"
+        className="sc-bwzfXH jXfDbS sc-progressbarcontainer"
         size="smaller"
       >
         <div
@@ -294,7 +294,7 @@ exports[`Storyshots ProgressBar Default 1`] = `
           width={10}
         >
           <div
-            className="sc-htoDjs jwlwyp"
+            className="sc-htoDjs ggKQxE"
           >
             10%
           </div>
@@ -308,18 +308,18 @@ exports[`Storyshots ProgressBar Default 1`] = `
         className="sc-EHOje kvGeEx"
       >
         <span
-          className="sc-htpNat kJKoKL sc-progressbar-topLeftLabel"
+          className="sc-htpNat fxhLow sc-progressbar-topLeftLabel"
         >
           90% Used
         </span>
         <span
-          className="sc-bxivhb loHrXM sc-progressbar-toprightlabel"
+          className="sc-bxivhb gpKyhv sc-progressbar-toprightlabel"
         >
           100GB Total
         </span>
       </div>
       <div
-        className="sc-bwzfXH jDAtdl sc-progressbarcontainer"
+        className="sc-bwzfXH jXfDbS sc-progressbarcontainer"
         size="smaller"
       >
         <div
@@ -328,7 +328,7 @@ exports[`Storyshots ProgressBar Default 1`] = `
           width={90}
         >
           <div
-            className="sc-htoDjs jwlwyp"
+            className="sc-htoDjs ggKQxE"
           >
             90%
           </div>
diff --git a/src/lib/components/searchinput/__snapshots__/SearchInput.component.test.js.snap b/src/lib/components/searchinput/__snapshots__/SearchInput.component.test.js.snap
index 5d4ef18ad1..769175d251 100644
--- a/src/lib/components/searchinput/__snapshots__/SearchInput.component.test.js.snap
+++ b/src/lib/components/searchinput/__snapshots__/SearchInput.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots SearchInput Default 1`] = `
 <div
-  className="sc-gqjmRU kDphYc"
+  className="sc-gqjmRU UnXZa"
 >
   <h3
-    className="sc-VigVT wnCgq"
+    className="sc-VigVT bUtIAa"
   >
     Default
   </h3>
@@ -20,7 +20,7 @@ exports[`Storyshots SearchInput Default 1`] = `
       className="sc-htoDjs gpFhwS sc-searchinput"
     >
       <div
-        className="sc-ifAKCX dUAmzj sc-input"
+        className="sc-ifAKCX hULCSa sc-input"
       >
         <div
           className="sc-gzVnrw kvhoeX sc-input-wrapper"
@@ -39,7 +39,7 @@ exports[`Storyshots SearchInput Default 1`] = `
         </div>
       </div>
       <button
-        className="sc-dnqmqq sc-iwsKbI fvmrkM"
+        className="sc-dnqmqq sc-iwsKbI loJvwo"
         disabled={false}
         onClick={[Function]}
       >
@@ -48,7 +48,7 @@ exports[`Storyshots SearchInput Default 1`] = `
         />
       </button>
       <button
-        className="sc-dnqmqq sc-gZMcBi eQMLkH"
+        className="sc-dnqmqq sc-gZMcBi fwpfMk"
         onClick={[Function]}
       >
         <i
@@ -58,7 +58,7 @@ exports[`Storyshots SearchInput Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-VigVT wnCgq"
+    className="sc-VigVT bUtIAa"
   >
     Search Input filled
   </h3>
@@ -74,7 +74,7 @@ exports[`Storyshots SearchInput Default 1`] = `
       data-cy="carlito_searchinput"
     >
       <div
-        className="sc-ifAKCX dUAmzj sc-input"
+        className="sc-ifAKCX hULCSa sc-input"
       >
         <div
           className="sc-gzVnrw kvhoeX sc-input-wrapper"
@@ -92,7 +92,7 @@ exports[`Storyshots SearchInput Default 1`] = `
         </div>
       </div>
       <button
-        className="sc-dnqmqq sc-iwsKbI fvmrkM"
+        className="sc-dnqmqq sc-iwsKbI loJvwo"
         disabled={false}
         onClick={[Function]}
       >
@@ -101,7 +101,7 @@ exports[`Storyshots SearchInput Default 1`] = `
         />
       </button>
       <button
-        className="sc-dnqmqq sc-gZMcBi eQMLkH"
+        className="sc-dnqmqq sc-gZMcBi fwpfMk"
         onClick={[Function]}
       >
         <i
@@ -111,7 +111,7 @@ exports[`Storyshots SearchInput Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-VigVT wnCgq"
+    className="sc-VigVT bUtIAa"
   >
     Disable the default toggle
   </h3>
@@ -126,7 +126,7 @@ exports[`Storyshots SearchInput Default 1`] = `
       className="sc-htoDjs cAmcWy sc-searchinput"
     >
       <div
-        className="sc-ifAKCX dUAmzj sc-input"
+        className="sc-ifAKCX hULCSa sc-input"
       >
         <div
           className="sc-gzVnrw kvhoeX sc-input-wrapper"
@@ -145,7 +145,7 @@ exports[`Storyshots SearchInput Default 1`] = `
         </div>
       </div>
       <button
-        className="sc-dnqmqq sc-iwsKbI eyjuBK"
+        className="sc-dnqmqq sc-iwsKbI gzLEzg"
         disabled={true}
         onClick={[Function]}
       >
@@ -154,7 +154,7 @@ exports[`Storyshots SearchInput Default 1`] = `
         />
       </button>
       <button
-        className="sc-dnqmqq sc-gZMcBi eQMLkH"
+        className="sc-dnqmqq sc-gZMcBi fwpfMk"
         onClick={[Function]}
       >
         <i
@@ -164,7 +164,7 @@ exports[`Storyshots SearchInput Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-VigVT wnCgq"
+    className="sc-VigVT bUtIAa"
   >
     Disable the default toggle undefined onReset action
   </h3>
@@ -179,7 +179,7 @@ exports[`Storyshots SearchInput Default 1`] = `
       className="sc-htoDjs cAmcWy sc-searchinput"
     >
       <div
-        className="sc-ifAKCX dUAmzj sc-input"
+        className="sc-ifAKCX hULCSa sc-input"
       >
         <div
           className="sc-gzVnrw kvhoeX sc-input-wrapper"
@@ -198,7 +198,7 @@ exports[`Storyshots SearchInput Default 1`] = `
         </div>
       </div>
       <button
-        className="sc-dnqmqq sc-iwsKbI eyjuBK"
+        className="sc-dnqmqq sc-iwsKbI gzLEzg"
         disabled={true}
         onClick={[Function]}
       >
@@ -207,7 +207,7 @@ exports[`Storyshots SearchInput Default 1`] = `
         />
       </button>
       <button
-        className="sc-dnqmqq sc-gZMcBi eQMLkH"
+        className="sc-dnqmqq sc-gZMcBi fwpfMk"
         onClick={[Function]}
       >
         <i
diff --git a/src/lib/components/select/__snapshots__/Select.component.test.js.snap b/src/lib/components/select/__snapshots__/Select.component.test.js.snap
index 9022bae863..a6a0da9937 100644
--- a/src/lib/components/select/__snapshots__/Select.component.test.js.snap
+++ b/src/lib/components/select/__snapshots__/Select.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Select Default 1`] = `
 <div
-  className="sc-bwzfXH hilSGa"
+  className="sc-bwzfXH hyPwIk"
 >
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Default
   </h3>
@@ -17,7 +17,7 @@ exports[`Storyshots Select Default 1`] = `
     }
   >
     <div
-      className="sc-bdVaJa iBpCMH sc-select-container"
+      className="sc-bdVaJa dOVvta sc-select-container"
     >
       <div
         className="sc-select css-2b097c-container"
@@ -130,7 +130,7 @@ exports[`Storyshots Select Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Default with custom formatOptionLabel
   </h3>
@@ -142,7 +142,7 @@ exports[`Storyshots Select Default 1`] = `
     }
   >
     <div
-      className="sc-bdVaJa iBpCMH sc-select-container"
+      className="sc-bdVaJa dOVvta sc-select-container"
     >
       <div
         className="sc-select css-2b097c-container"
@@ -265,7 +265,7 @@ exports[`Storyshots Select Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Multi Select
   </h3>
@@ -277,7 +277,7 @@ exports[`Storyshots Select Default 1`] = `
     }
   >
     <div
-      className="sc-bdVaJa iBpCMH sc-select-container"
+      className="sc-bdVaJa dOVvta sc-select-container"
     >
       <div
         className="sc-select css-2b097c-container"
diff --git a/src/lib/components/sidebar/__snapshots__/Sidebar.component.test.js.snap b/src/lib/components/sidebar/__snapshots__/Sidebar.component.test.js.snap
index 228d60f12a..940c6bc88d 100644
--- a/src/lib/components/sidebar/__snapshots__/Sidebar.component.test.js.snap
+++ b/src/lib/components/sidebar/__snapshots__/Sidebar.component.test.js.snap
@@ -13,10 +13,10 @@ exports[`Storyshots Sidebar Default 1`] = `
     }
   >
     <div
-      className="sc-htoDjs hlIRNL sc-sidebar"
+      className="sc-htoDjs mffkx sc-sidebar"
     >
       <div
-        className="sc-dnqmqq eCZUVx sc-sidebar-item"
+        className="sc-dnqmqq hHMncO sc-sidebar-item"
         onClick={[Function]}
         title="Dashboard"
       >
@@ -29,7 +29,7 @@ exports[`Storyshots Sidebar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-dnqmqq keEEvP sc-sidebar-item"
+        className="sc-dnqmqq gzcMSc sc-sidebar-item"
         onClick={[Function]}
         title="Servers"
       >
@@ -42,7 +42,7 @@ exports[`Storyshots Sidebar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-dnqmqq keEEvP sc-sidebar-item"
+        className="sc-dnqmqq gzcMSc sc-sidebar-item"
         onClick={[Function]}
         title="Disks"
       >
@@ -67,10 +67,10 @@ exports[`Storyshots Sidebar Default 1`] = `
     }
   >
     <div
-      className="sc-htoDjs jHkWRG sc-sidebar"
+      className="sc-htoDjs bTIpkD sc-sidebar"
     >
       <div
-        className="sc-dnqmqq eCZUVx sc-sidebar-item"
+        className="sc-dnqmqq hHMncO sc-sidebar-item"
         onClick={[Function]}
         title="Dashboard"
       >
@@ -87,11 +87,11 @@ exports[`Storyshots Sidebar Default 1`] = `
           Dashboard
         </div>
         <div
-          className="sc-gZMcBi dZkYTy"
+          className="sc-gZMcBi ehsNBu"
         />
       </div>
       <div
-        className="sc-dnqmqq keEEvP sc-sidebar-item"
+        className="sc-dnqmqq gzcMSc sc-sidebar-item"
         onClick={[Function]}
         title="Servers"
       >
@@ -109,7 +109,7 @@ exports[`Storyshots Sidebar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-dnqmqq keEEvP sc-sidebar-item"
+        className="sc-dnqmqq gzcMSc sc-sidebar-item"
         onClick={[Function]}
         title="Disks"
       >
@@ -139,13 +139,13 @@ exports[`Storyshots Sidebar Default 1`] = `
     }
   >
     <div
-      className="sc-htoDjs jHkWRG sc-sidebar"
+      className="sc-htoDjs bTIpkD sc-sidebar"
     >
       <div
         className="sc-gqjmRU coMoOk"
       >
         <button
-          className="sc-bxivhb hAHRzA sc-button"
+          className="sc-bxivhb egRmZd sc-button"
           disabled={false}
           onClick={[Function]}
           size="larger"
@@ -176,7 +176,7 @@ exports[`Storyshots Sidebar Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-dnqmqq eCZUVx sc-sidebar-item"
+        className="sc-dnqmqq hHMncO sc-sidebar-item"
         onClick={[Function]}
         title="Dashboard"
       >
@@ -193,11 +193,11 @@ exports[`Storyshots Sidebar Default 1`] = `
           Dashboard
         </div>
         <div
-          className="sc-gZMcBi dZkYTy"
+          className="sc-gZMcBi ehsNBu"
         />
       </div>
       <div
-        className="sc-dnqmqq keEEvP sc-sidebar-item"
+        className="sc-dnqmqq gzcMSc sc-sidebar-item"
         onClick={[Function]}
         title="Servers"
       >
@@ -215,7 +215,7 @@ exports[`Storyshots Sidebar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-dnqmqq keEEvP sc-sidebar-item"
+        className="sc-dnqmqq gzcMSc sc-sidebar-item"
         onClick={[Function]}
         title="Disks"
       >
diff --git a/src/lib/components/sparkline/__snapshots__/SparkLine.component.test.js.snap b/src/lib/components/sparkline/__snapshots__/SparkLine.component.test.js.snap
index c74dac1fe6..2ab57ae6e9 100644
--- a/src/lib/components/sparkline/__snapshots__/SparkLine.component.test.js.snap
+++ b/src/lib/components/sparkline/__snapshots__/SparkLine.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots SparkLine Default 1`] = `
 <div
-  className="sc-bwzfXH hilSGa"
+  className="sc-bwzfXH hyPwIk"
 >
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Vege-Lite sparkline chart demo
   </h3>
@@ -14,7 +14,7 @@ exports[`Storyshots SparkLine Default 1`] = `
     id="vis"
   />
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Vege-Lite sparkline multi chart demo
   </h3>
diff --git a/src/lib/components/statusbar/__snapshots__/StatusBar.component.test.js.snap b/src/lib/components/statusbar/__snapshots__/StatusBar.component.test.js.snap
index c767516843..73e3ea4fec 100644
--- a/src/lib/components/statusbar/__snapshots__/StatusBar.component.test.js.snap
+++ b/src/lib/components/statusbar/__snapshots__/StatusBar.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots StatusBar Default 1`] = `
 <div
-  className="sc-bwzfXH hilSGa"
+  className="sc-bwzfXH hyPwIk"
 >
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Vege-Lite statusbar demo
   </h3>
diff --git a/src/lib/components/steppers/Steppers.component.js b/src/lib/components/steppers/Steppers.component.js
index 6458210d0e..cc11120fff 100644
--- a/src/lib/components/steppers/Steppers.component.js
+++ b/src/lib/components/steppers/Steppers.component.js
@@ -40,7 +40,7 @@ const Circle = styled.div`
   border-radius: 50%;
 
   ${(props) => {
-    const { danger, success, secondary } = getTheme(props);
+    const { danger, healthy, secondary } = getTheme(props);
     if (props.error) {
       return css`
         background-color: ${danger};
@@ -56,7 +56,7 @@ const Circle = styled.div`
       `;
     } else if (props.completed) {
       return css`
-        background-color: ${success};
+        background-color: ${healthy};
         color: ${defaultTheme.white};
       `;
     } else {
@@ -84,7 +84,7 @@ const BottomBar = styled.hr`
   ${(props) => {
     if (props.completed) {
       return css`
-        border-left: 2px solid ${getTheme(props).success};
+        border-left: 2px solid ${getTheme(props).healthy};
       `;
     } else {
       return css`
diff --git a/src/lib/components/steppers/__snapshots__/Steppers.component.test.js.snap b/src/lib/components/steppers/__snapshots__/Steppers.component.test.js.snap
index 5c845abdda..b531a3b50e 100644
--- a/src/lib/components/steppers/__snapshots__/Steppers.component.test.js.snap
+++ b/src/lib/components/steppers/__snapshots__/Steppers.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Steppers Default 1`] = `
 <div
-  className="sc-fjdhpX fYqDPr"
+  className="sc-fjdhpX gmwXQR"
 >
   <h3
-    className="sc-jzJRlG iBYloN"
+    className="sc-jzJRlG cEOhFk"
   >
     Default Steppers 
   </h3>
@@ -19,7 +19,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <div
-          className="sc-bZQynM fqEnDo"
+          className="sc-bZQynM eklJaz"
         >
           <span>
             <i
@@ -28,14 +28,14 @@ exports[`Storyshots Steppers Default 1`] = `
           </span>
         </div>
         <hr
-          className="sc-dnqmqq gHNWAE"
+          className="sc-dnqmqq hfEheu"
         />
       </div>
       <div
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Node Registerd
         </span>
@@ -48,7 +48,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <div
-          className="sc-bZQynM bXhRIV"
+          className="sc-bZQynM ccRhhe"
         >
           <span>
             2
@@ -62,7 +62,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Deploy Salt Minion on node
         </span>
@@ -70,7 +70,7 @@ exports[`Storyshots Steppers Default 1`] = `
           className="sc-htoDjs bKhna"
         >
           <button
-            className="sc-iwsKbI RWkvp sc-button"
+            className="sc-iwsKbI dpGrZs sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
@@ -115,7 +115,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Add node to Workload Plane
         </span>
@@ -142,7 +142,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Add node to Control Plane
         </span>
@@ -166,7 +166,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Extend etcd cluster to node
         </span>
@@ -174,7 +174,7 @@ exports[`Storyshots Steppers Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-jzJRlG iBYloN"
+    className="sc-jzJRlG cEOhFk"
   >
     Steppers with loading
   </h3>
@@ -188,7 +188,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <div
-          className="sc-bZQynM fqEnDo"
+          className="sc-bZQynM eklJaz"
         >
           <span>
             <i
@@ -197,14 +197,14 @@ exports[`Storyshots Steppers Default 1`] = `
           </span>
         </div>
         <hr
-          className="sc-dnqmqq gHNWAE"
+          className="sc-dnqmqq hfEheu"
         />
       </div>
       <div
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Node Registerd
         </span>
@@ -217,10 +217,10 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <div
-          className="sc-bZQynM bXhRIV"
+          className="sc-bZQynM ccRhhe"
         >
           <div
-            className="sc-bdVaJa jGCmKI sc-loader"
+            className="sc-bdVaJa SpoMa sc-loader"
             color="#87929D"
             size="base"
           >
@@ -352,7 +352,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Deploy Salt Minion on node
         </span>
@@ -360,7 +360,7 @@ exports[`Storyshots Steppers Default 1`] = `
           className="sc-htoDjs bKhna"
         >
           <button
-            className="sc-iwsKbI RWkvp sc-button"
+            className="sc-iwsKbI dpGrZs sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
@@ -405,7 +405,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Add node to Workload Plane
         </span>
@@ -432,7 +432,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Add node to Control Plane
         </span>
@@ -456,7 +456,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Extend etcd cluster to node
         </span>
@@ -464,7 +464,7 @@ exports[`Storyshots Steppers Default 1`] = `
     </div>
   </div>
   <h3
-    className="sc-jzJRlG iBYloN"
+    className="sc-jzJRlG cEOhFk"
   >
     Steppers with error
   </h3>
@@ -478,7 +478,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <div
-          className="sc-bZQynM fqEnDo"
+          className="sc-bZQynM eklJaz"
         >
           <span>
             <i
@@ -487,14 +487,14 @@ exports[`Storyshots Steppers Default 1`] = `
           </span>
         </div>
         <hr
-          className="sc-dnqmqq gHNWAE"
+          className="sc-dnqmqq hfEheu"
         />
       </div>
       <div
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Node Registerd
         </span>
@@ -507,7 +507,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <div
-          className="sc-bZQynM fqEnDo"
+          className="sc-bZQynM eklJaz"
         >
           <span>
             <i
@@ -516,14 +516,14 @@ exports[`Storyshots Steppers Default 1`] = `
           </span>
         </div>
         <hr
-          className="sc-dnqmqq gHNWAE"
+          className="sc-dnqmqq hfEheu"
         />
       </div>
       <div
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Deploy Salt Minion on node
         </span>
@@ -536,7 +536,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <div
-          className="sc-bZQynM liuzBW"
+          className="sc-bZQynM iOmATA"
         >
           <span>
             3
@@ -550,7 +550,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Add node to Workload Plane
         </span>
@@ -558,7 +558,7 @@ exports[`Storyshots Steppers Default 1`] = `
           className="sc-htoDjs bKhna"
         >
           <button
-            className="sc-iwsKbI RWkvp sc-button"
+            className="sc-iwsKbI dpGrZs sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
@@ -603,7 +603,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Add node to Control Plane
         </span>
@@ -627,7 +627,7 @@ exports[`Storyshots Steppers Default 1`] = `
         className="sc-EHOje fpqoIO"
       >
         <span
-          className="sc-gzVnrw gctCna"
+          className="sc-gzVnrw kpDvpW"
         >
           Extend etcd cluster to node
         </span>
diff --git a/src/lib/components/table/__snapshots__/Table.component.test.js.snap b/src/lib/components/table/__snapshots__/Table.component.test.js.snap
index e86c71f7ee..a1a900551a 100644
--- a/src/lib/components/table/__snapshots__/Table.component.test.js.snap
+++ b/src/lib/components/table/__snapshots__/Table.component.test.js.snap
@@ -18,7 +18,7 @@ exports[`Storyshots Table Center a column with CSS 1`] = `
       }
     >
       <div
-        className="sc-VigVT dnboZR"
+        className="sc-VigVT dbbfHJ"
       >
         <div
           aria-colcount={6}
@@ -97,7 +97,7 @@ exports[`Storyshots Table Center a column with CSS 1`] = `
                   First Name
                 </label>
                 <div
-                  className="sc-cSHVUG kpDtSo"
+                  className="sc-cSHVUG kEqnCg"
                   selected={true}
                 >
                   <i
@@ -248,7 +248,7 @@ exports[`Storyshots Table Center a column with CSS 1`] = `
 
 exports[`Storyshots Table Change column size 1`] = `
 <div
-  className="sc-kAzzGY jZVyLJ"
+  className="sc-kAzzGY iwXXrD"
 >
   <div
     className="sc-table"
@@ -261,7 +261,7 @@ exports[`Storyshots Table Change column size 1`] = `
     }
   >
     <div
-      className="sc-VigVT dnboZR"
+      className="sc-VigVT dbbfHJ"
     >
       <div
         aria-colcount={6}
@@ -340,7 +340,7 @@ exports[`Storyshots Table Change column size 1`] = `
                 First Name
               </label>
               <div
-                className="sc-cSHVUG kpDtSo"
+                className="sc-cSHVUG kEqnCg"
                 selected={true}
               >
                 <i
@@ -490,7 +490,7 @@ exports[`Storyshots Table Change column size 1`] = `
 
 exports[`Storyshots Table Default 1`] = `
 <div
-  className="sc-kAzzGY jZVyLJ"
+  className="sc-kAzzGY iwXXrD"
 >
   <div
     className="sc-table"
@@ -503,7 +503,7 @@ exports[`Storyshots Table Default 1`] = `
     }
   >
     <div
-      className="sc-VigVT dnboZR"
+      className="sc-VigVT dbbfHJ"
     >
       <div
         aria-colcount={6}
@@ -582,7 +582,7 @@ exports[`Storyshots Table Default 1`] = `
                 First Name
               </label>
               <div
-                className="sc-cSHVUG kpDtSo"
+                className="sc-cSHVUG kEqnCg"
                 selected={true}
               >
                 <i
@@ -732,7 +732,7 @@ exports[`Storyshots Table Default 1`] = `
 
 exports[`Storyshots Table Empty Table 1`] = `
 <div
-  className="sc-kAzzGY jZVyLJ"
+  className="sc-kAzzGY iwXXrD"
 >
   <div
     className="sc-table"
@@ -745,7 +745,7 @@ exports[`Storyshots Table Empty Table 1`] = `
     }
   >
     <div
-      className="sc-VigVT dnboZR"
+      className="sc-VigVT dbbfHJ"
     >
       <div
         aria-colcount={6}
@@ -859,7 +859,7 @@ exports[`Storyshots Table Empty Table 1`] = `
                 Last Name
               </label>
               <div
-                className="sc-cSHVUG ctIyag"
+                className="sc-cSHVUG gVNdRC"
                 selected={true}
               >
                 <i
@@ -974,7 +974,7 @@ exports[`Storyshots Table Empty Table 1`] = `
 
 exports[`Storyshots Table With rowActions 1`] = `
 <div
-  className="sc-kAzzGY jZVyLJ"
+  className="sc-kAzzGY iwXXrD"
 >
   <div
     className="sc-table"
@@ -987,7 +987,7 @@ exports[`Storyshots Table With rowActions 1`] = `
     }
   >
     <div
-      className="sc-VigVT dnboZR"
+      className="sc-VigVT dbbfHJ"
     >
       <div
         aria-colcount={6}
@@ -1066,7 +1066,7 @@ exports[`Storyshots Table With rowActions 1`] = `
                 First Name
               </label>
               <div
-                className="sc-cSHVUG kpDtSo"
+                className="sc-cSHVUG kEqnCg"
                 selected={true}
               >
                 <i
diff --git a/src/lib/components/tabs/__snapshots__/Tabs.component.test.js.snap b/src/lib/components/tabs/__snapshots__/Tabs.component.test.js.snap
index da8ac2b70f..4ec9e4a27a 100644
--- a/src/lib/components/tabs/__snapshots__/Tabs.component.test.js.snap
+++ b/src/lib/components/tabs/__snapshots__/Tabs.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Tabs Default 1`] = `
 <div
-  className="sc-EHOje dxVLzp"
+  className="sc-EHOje dZmSdl"
 >
   <h3
-    className="sc-bZQynM yxbjY"
+    className="sc-bZQynM dIEjhl"
   >
     Default Tabs 
   </h3>
@@ -21,31 +21,31 @@ exports[`Storyshots Tabs Default 1`] = `
         selected={true}
       >
         <p
-          className="sc-bxivhb bswMXo sc-tabs-item-title"
+          className="sc-bxivhb cDojnC sc-tabs-item-title"
           selected={true}
         >
           Detail
         </p>
       </div>
       <div
-        className="sc-htpNat iNhkpk sc-tabs-item"
+        className="sc-htpNat iHwDjt sc-tabs-item"
         onClick={[Function]}
         selected={false}
       >
         <p
-          className="sc-bxivhb hkeqvc sc-tabs-item-title"
+          className="sc-bxivhb abRhr sc-tabs-item-title"
           selected={false}
         >
           Pods
         </p>
       </div>
       <div
-        className="sc-htpNat iNhkpk sc-tabs-item"
+        className="sc-htpNat iHwDjt sc-tabs-item"
         onClick={[Function]}
         selected={false}
       >
         <p
-          className="sc-bxivhb hkeqvc sc-tabs-item-title"
+          className="sc-bxivhb abRhr sc-tabs-item-title"
           selected={false}
         >
           Volumes
diff --git a/src/lib/components/textarea/__snapshots__/TextArea.component.test.js.snap b/src/lib/components/textarea/__snapshots__/TextArea.component.test.js.snap
index 3e0ad48008..94ad716fc7 100644
--- a/src/lib/components/textarea/__snapshots__/TextArea.component.test.js.snap
+++ b/src/lib/components/textarea/__snapshots__/TextArea.component.test.js.snap
@@ -2,15 +2,15 @@
 
 exports[`Storyshots TextArea Default 1`] = `
 <div
-  className="sc-bwzfXH hilSGa"
+  className="sc-bwzfXH hyPwIk"
 >
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Text Area without label
   </h3>
   <textarea
-    className="sc-bdVaJa krlabK sc-textarea"
+    className="sc-bdVaJa hrdJAY sc-textarea"
     cols={50}
     id="text"
     onChange={[Function]}
@@ -18,12 +18,12 @@ exports[`Storyshots TextArea Default 1`] = `
     value="Add a note"
   />
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Text Area disabled
   </h3>
   <textarea
-    className="sc-bdVaJa krlabK sc-textarea"
+    className="sc-bdVaJa hrdJAY sc-textarea"
     cols={50}
     disabled={true}
     onChange={[Function]}
diff --git a/src/lib/components/toggle/__snapshots__/Toggle.component.test.js.snap b/src/lib/components/toggle/__snapshots__/Toggle.component.test.js.snap
index 1e43a63f4d..259cf69b54 100644
--- a/src/lib/components/toggle/__snapshots__/Toggle.component.test.js.snap
+++ b/src/lib/components/toggle/__snapshots__/Toggle.component.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`Storyshots Toggle Default 1`] = `
 <div
-  className="sc-bxivhb eTQnSH"
+  className="sc-bxivhb ejYWWW"
 >
   <div
     className="sc-bdVaJa gEyPxw sc-toggle"
   >
     <label
-      className="sc-bwzfXH eAHirf"
+      className="sc-bwzfXH cFhhLn"
     >
       <input
         checked={false}
@@ -22,7 +22,7 @@ exports[`Storyshots Toggle Default 1`] = `
       />
     </label>
     <span
-      className="sc-htpNat dlgUft text"
+      className="sc-htpNat htSRdR text"
     >
       Airplane Mode
     </span>
@@ -31,7 +31,7 @@ exports[`Storyshots Toggle Default 1`] = `
     className="sc-bdVaJa gEyPxw sc-toggle"
   >
     <label
-      className="sc-bwzfXH eAHirf"
+      className="sc-bwzfXH cFhhLn"
     >
       <input
         checked={true}
@@ -45,7 +45,7 @@ exports[`Storyshots Toggle Default 1`] = `
       />
     </label>
     <span
-      className="sc-htpNat dlgUft text"
+      className="sc-htpNat htSRdR text"
     >
       Airplane Mode
     </span>
diff --git a/src/lib/components/tooltip/__snapshots__/Tooltip.component.test.js.snap b/src/lib/components/tooltip/__snapshots__/Tooltip.component.test.js.snap
index 2378e7b469..0fed898572 100644
--- a/src/lib/components/tooltip/__snapshots__/Tooltip.component.test.js.snap
+++ b/src/lib/components/tooltip/__snapshots__/Tooltip.component.test.js.snap
@@ -2,11 +2,11 @@
 
 exports[`Storyshots Tooltip Default 1`] = `
 <div
-  className="sc-iwsKbI dWcBsk"
+  className="sc-iwsKbI gFBhMJ"
 >
   <div>
     <h3
-      className="sc-gZMcBi fZLiIC"
+      className="sc-gZMcBi devRpa"
     >
       Default Tooltip
     </h3>
@@ -16,7 +16,7 @@ exports[`Storyshots Tooltip Default 1`] = `
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-gqjmRU eVYvlN"
+        className="sc-gqjmRU cRPCsH"
       >
         Hover here!
       </span>
@@ -24,7 +24,7 @@ exports[`Storyshots Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-gZMcBi fZLiIC"
+      className="sc-gZMcBi devRpa"
     >
       Tooltip right
     </h3>
@@ -34,7 +34,7 @@ exports[`Storyshots Tooltip Default 1`] = `
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-gqjmRU eVYvlN"
+        className="sc-gqjmRU cRPCsH"
       >
         Hover here!
       </span>
@@ -48,7 +48,7 @@ exports[`Storyshots Tooltip Default 1`] = `
     }
   >
     <h3
-      className="sc-gZMcBi fZLiIC"
+      className="sc-gZMcBi devRpa"
     >
       Tooltip left
     </h3>
@@ -58,7 +58,7 @@ exports[`Storyshots Tooltip Default 1`] = `
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-gqjmRU eVYvlN"
+        className="sc-gqjmRU cRPCsH"
       >
         Hover here!
       </span>
@@ -66,7 +66,7 @@ exports[`Storyshots Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-gZMcBi fZLiIC"
+      className="sc-gZMcBi devRpa"
     >
       Tooltip bottom
     </h3>
@@ -76,7 +76,7 @@ exports[`Storyshots Tooltip Default 1`] = `
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-gqjmRU eVYvlN"
+        className="sc-gqjmRU cRPCsH"
       >
         Hover here!
       </span>
@@ -84,7 +84,7 @@ exports[`Storyshots Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-gZMcBi fZLiIC"
+      className="sc-gZMcBi devRpa"
     >
       Customize your tooltip style
     </h3>
@@ -94,7 +94,7 @@ exports[`Storyshots Tooltip Default 1`] = `
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-gqjmRU eVYvlN"
+        className="sc-gqjmRU cRPCsH"
       >
         Hover here!
       </span>
@@ -102,7 +102,7 @@ exports[`Storyshots Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-gZMcBi fZLiIC"
+      className="sc-gZMcBi devRpa"
     >
       Tooltip with button
     </h3>
@@ -112,7 +112,7 @@ exports[`Storyshots Tooltip Default 1`] = `
       onMouseLeave={[Function]}
     >
       <button
-        className="sc-EHOje eohUkg sc-button"
+        className="sc-EHOje eklWwc sc-button"
         disabled={false}
         size="small"
         title=""
@@ -136,7 +136,7 @@ exports[`Storyshots Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-gZMcBi fZLiIC"
+      className="sc-gZMcBi devRpa"
     >
       add icon in the overlay of tooltip
     </h3>
@@ -146,7 +146,7 @@ exports[`Storyshots Tooltip Default 1`] = `
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-gqjmRU eVYvlN"
+        className="sc-gqjmRU cRPCsH"
       >
         tooltip with icon
       </span>
@@ -154,7 +154,7 @@ exports[`Storyshots Tooltip Default 1`] = `
   </div>
   <div>
     <h3
-      className="sc-gZMcBi fZLiIC"
+      className="sc-gZMcBi devRpa"
     >
       Tooltip doesn't trigger
     </h3>
@@ -164,7 +164,7 @@ exports[`Storyshots Tooltip Default 1`] = `
       onMouseLeave={[Function]}
     >
       <span
-        className="sc-gqjmRU eVYvlN"
+        className="sc-gqjmRU cRPCsH"
       >
         Hover here!
       </span>
diff --git a/src/lib/components/vegachart/__snapshots__/VegaChart.component.test.js.snap b/src/lib/components/vegachart/__snapshots__/VegaChart.component.test.js.snap
index 8e368af209..1cf1362bf3 100644
--- a/src/lib/components/vegachart/__snapshots__/VegaChart.component.test.js.snap
+++ b/src/lib/components/vegachart/__snapshots__/VegaChart.component.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Storyshots VegaChart Default 1`] = `
 <div
-  className="sc-bwzfXH hilSGa"
+  className="sc-bwzfXH hyPwIk"
 >
   <h3
-    className="sc-htpNat loHzkE"
+    className="sc-htpNat kmOyGE"
   >
     Vega-Lite wrapper - need to specify the entire spec
   </h3>