From 2755376cdcae3b41e2f4ce51f7d8cd93c2f73de9 Mon Sep 17 00:00:00 2001
From: Matthias <mprost@scaleway.com>
Date: Tue, 12 Sep 2023 12:10:48 +0200
Subject: [PATCH] feat(Stack): add new parameters width and flex

---
 .changeset/spotty-cups-appear.md              |   6 +
 .../__snapshots__/index.spec.tsx.snap         |  26 +--
 .../__snapshots__/index.spec.tsx.snap         |  32 +--
 .../__snapshots__/index.spec.tsx.snap         |  32 +--
 .../__snapshots__/index.spec.tsx.snap         |  16 +-
 .../__snapshots__/index.spec.tsx.snap         |  32 +--
 .../__snapshots__/index.spec.tsx.snap         |  24 +--
 .../__snapshots__/index.spec.tsx.snap         |  20 +-
 .../__snapshots__/index.spec.tsx.snap         |  16 +-
 .../__snapshots__/index.spec.tsx.snap         |   8 +-
 .../__snapshots__/index.spec.tsx.snap         |  16 +-
 .../__snapshots__/index.spec.tsx.snap         |  16 +-
 .../__snapshots__/index.spec.tsx.snap         |  36 ++--
 .../__snapshots__/index.test.tsx.snap         | 160 +++++++-------
 .../__tests__/__snapshots__/index.tsx.snap    | 112 +++++-----
 .../__tests__/__snapshots__/index.tsx.snap    |  18 +-
 .../__tests__/__snapshots__/index.tsx.snap    |  72 +++----
 .../__snapshots__/index.test.tsx.snap         |  98 ++++-----
 .../__tests__/__snapshots__/index.tsx.snap    | 198 +++++++++---------
 .../__snapshots__/index.test.tsx.snap         |  32 +--
 .../__snapshots__/index.test.tsx.snap         |  66 +++---
 .../__snapshots__/index.test.tsx.snap         |   4 +-
 .../__snapshots__/index.test.tsx.snap         | 160 +++++++-------
 .../__snapshots__/index.test.tsx.snap         |   6 +-
 .../__snapshots__/index.test.tsx.snap         |  28 +--
 .../__snapshots__/index.test.tsx.snap         |  66 +++---
 .../__tests__/__snapshots__/index.tsx.snap    | 100 ++++-----
 .../__snapshots__/index.test.tsx.snap         |  52 ++---
 .../__snapshots__/index.test.tsx.snap         |  44 ++--
 .../__snapshots__/index.test.tsx.snap         | 102 ++++++++-
 .../components/Stack/__tests__/index.test.tsx |  16 ++
 packages/ui/src/components/Stack/index.tsx    |   6 +
 .../__snapshots__/index.test.tsx.snap         |  18 +-
 .../__snapshots__/index.test.tsx.snap         |  40 ++--
 .../__snapshots__/index.test.tsx.snap         |  64 +++---
 .../__snapshots__/index.test.tsx.snap         |   4 +-
 .../__snapshots__/index.test.tsx.snap         |  20 +-
 .../__snapshots__/index.test.tsx.snap         |  48 ++---
 .../__snapshots__/index.test.tsx.snap         |  90 ++++----
 39 files changed, 1007 insertions(+), 897 deletions(-)
 create mode 100644 .changeset/spotty-cups-appear.md

diff --git a/.changeset/spotty-cups-appear.md b/.changeset/spotty-cups-appear.md
new file mode 100644
index 0000000000..5bee43ce60
--- /dev/null
+++ b/.changeset/spotty-cups-appear.md
@@ -0,0 +1,6 @@
+---
+'@ultraviolet/form': minor
+'@ultraviolet/ui': minor
+---
+
+Added new props into `Stack` component: `width` and `flex`
diff --git a/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap
index f1a04aa10f..07bcd034ae 100644
--- a/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -224,7 +224,7 @@ exports[`CheckboxField should render correctly 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-d2sbm0 {
+.cache-n7398p {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -304,7 +304,7 @@ exports[`CheckboxField should render correctly 1`] = `
         </g>
       </svg>
       <div
-        class="cache-d2sbm0 ehpbis70"
+        class="cache-n7398p ehpbis70"
       >
         <div
           class="cache-7efi4w e3f5lzv0"
@@ -539,7 +539,7 @@ exports[`CheckboxField should render correctly checked without value 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-d2sbm0 {
+.cache-n7398p {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -620,7 +620,7 @@ exports[`CheckboxField should render correctly checked without value 1`] = `
         </g>
       </svg>
       <div
-        class="cache-d2sbm0 ehpbis70"
+        class="cache-n7398p ehpbis70"
       >
         <div
           class="cache-7efi4w e3f5lzv0"
@@ -855,7 +855,7 @@ exports[`CheckboxField should render correctly disabled 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-d2sbm0 {
+.cache-n7398p {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -936,7 +936,7 @@ exports[`CheckboxField should render correctly disabled 1`] = `
         </g>
       </svg>
       <div
-        class="cache-d2sbm0 ehpbis70"
+        class="cache-n7398p ehpbis70"
       >
         <div
           class="cache-7efi4w e3f5lzv0"
@@ -1171,7 +1171,7 @@ exports[`CheckboxField should render correctly with a value 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-d2sbm0 {
+.cache-n7398p {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1251,7 +1251,7 @@ exports[`CheckboxField should render correctly with a value 1`] = `
         </g>
       </svg>
       <div
-        class="cache-d2sbm0 ehpbis70"
+        class="cache-n7398p ehpbis70"
       >
         <div
           class="cache-7efi4w e3f5lzv0"
@@ -1300,7 +1300,7 @@ exports[`CheckboxField should render correctly with a value 1`] = `
         </g>
       </svg>
       <div
-        class="cache-d2sbm0 ehpbis70"
+        class="cache-n7398p ehpbis70"
       >
         <div
           class="cache-7efi4w e3f5lzv0"
@@ -1535,7 +1535,7 @@ exports[`CheckboxField should render correctly with errors 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-d2sbm0 {
+.cache-n7398p {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1639,7 +1639,7 @@ exports[`CheckboxField should render correctly with errors 1`] = `
         </g>
       </svg>
       <div
-        class="cache-d2sbm0 ehpbis70"
+        class="cache-n7398p ehpbis70"
       >
         <div
           class="cache-7efi4w e3f5lzv0"
@@ -1899,7 +1899,7 @@ exports[`CheckboxField should trigger events correctly 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-d2sbm0 {
+.cache-n7398p {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1979,7 +1979,7 @@ exports[`CheckboxField should trigger events correctly 1`] = `
         </g>
       </svg>
       <div
-        class="cache-d2sbm0 ehpbis70"
+        class="cache-n7398p ehpbis70"
       >
         <div
           class="cache-7efi4w e3f5lzv0"
diff --git a/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap
index d66b094a30..7ca4c34ad7 100644
--- a/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`CheckboxField should render correctly checked 1`] = `
 <DocumentFragment>
-  .cache-kwbqjp {
+  .cache-1civgmb {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -31,7 +31,7 @@ exports[`CheckboxField should render correctly checked 1`] = `
   margin: 0;
 }
 
-.cache-uyols6 {
+.cache-tjrecv {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -288,7 +288,7 @@ exports[`CheckboxField should render correctly checked 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-d2sbm0 {
+.cache-n7398p {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -328,13 +328,13 @@ exports[`CheckboxField should render correctly checked 1`] = `
     novalidate=""
   >
     <div
-      class="cache-kwbqjp ehpbis70"
+      class="cache-1civgmb ehpbis70"
     >
       <fieldset
         class="cache-7o2an9 e1k5uyng1"
       >
         <div
-          class="cache-uyols6 ehpbis70"
+          class="cache-tjrecv ehpbis70"
         >
           <legend
             class="cache-tjeurz e13y3mga0"
@@ -342,7 +342,7 @@ exports[`CheckboxField should render correctly checked 1`] = `
             Label 
           </legend>
           <div
-            class="cache-kwbqjp ehpbis70"
+            class="cache-1civgmb ehpbis70"
           >
             <div
               aria-disabled="false"
@@ -385,7 +385,7 @@ exports[`CheckboxField should render correctly checked 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-d2sbm0 ehpbis70"
+                class="cache-n7398p ehpbis70"
               >
                 <div
                   class="cache-7efi4w e3f5lzv0"
@@ -440,7 +440,7 @@ exports[`CheckboxField should render correctly checked 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-d2sbm0 ehpbis70"
+                class="cache-n7398p ehpbis70"
               >
                 <div
                   class="cache-7efi4w e3f5lzv0"
@@ -464,7 +464,7 @@ exports[`CheckboxField should render correctly checked 1`] = `
 
 exports[`CheckboxField should trigger events correctly with required prop 1`] = `
 <DocumentFragment>
-  .cache-kwbqjp {
+  .cache-1civgmb {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -493,7 +493,7 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] =
   margin: 0;
 }
 
-.cache-uyols6 {
+.cache-tjrecv {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -760,7 +760,7 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] =
   stroke: #d9dadd;
 }
 
-.cache-d2sbm0 {
+.cache-n7398p {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -800,13 +800,13 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] =
     novalidate=""
   >
     <div
-      class="cache-kwbqjp ehpbis70"
+      class="cache-1civgmb ehpbis70"
     >
       <fieldset
         class="cache-7o2an9 e1k5uyng1"
       >
         <div
-          class="cache-uyols6 ehpbis70"
+          class="cache-tjrecv ehpbis70"
         >
           <legend
             class="cache-tjeurz e13y3mga0"
@@ -822,7 +822,7 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] =
             </svg>
           </legend>
           <div
-            class="cache-kwbqjp ehpbis70"
+            class="cache-1civgmb ehpbis70"
           >
             <div
               aria-disabled="false"
@@ -865,7 +865,7 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] =
                 </g>
               </svg>
               <div
-                class="cache-d2sbm0 ehpbis70"
+                class="cache-n7398p ehpbis70"
               >
                 <div
                   class="cache-7efi4w e3f5lzv0"
@@ -920,7 +920,7 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] =
                 </g>
               </svg>
               <div
-                class="cache-d2sbm0 ehpbis70"
+                class="cache-n7398p ehpbis70"
               >
                 <div
                   class="cache-7efi4w e3f5lzv0"
diff --git a/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.spec.tsx.snap
index e2382bfca2..74623be672 100644
--- a/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`NumberInputField should render correctly 1`] = `
 <DocumentFragment>
-  .cache-kwbqjp {
+  .cache-1civgmb {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,7 +25,7 @@ exports[`NumberInputField should render correctly 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -292,10 +292,10 @@ exports[`NumberInputField should render correctly 1`] = `
     novalidate=""
   >
     <div
-      class="cache-kwbqjp ehpbis70"
+      class="cache-1civgmb ehpbis70"
     >
       <div
-        class="cache-6hw7ss ehpbis70"
+        class="cache-16otux ehpbis70"
       >
         <div
           aria-disabled="false"
@@ -362,7 +362,7 @@ exports[`NumberInputField should render correctly 1`] = `
 
 exports[`NumberInputField should render correctly disabled 1`] = `
 <DocumentFragment>
-  .cache-kwbqjp {
+  .cache-1civgmb {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -385,7 +385,7 @@ exports[`NumberInputField should render correctly disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -586,10 +586,10 @@ exports[`NumberInputField should render correctly disabled 1`] = `
     novalidate=""
   >
     <div
-      class="cache-kwbqjp ehpbis70"
+      class="cache-1civgmb ehpbis70"
     >
       <div
-        class="cache-6hw7ss ehpbis70"
+        class="cache-16otux ehpbis70"
       >
         <div
           aria-disabled="true"
@@ -658,7 +658,7 @@ exports[`NumberInputField should render correctly disabled 1`] = `
 
 exports[`NumberInputField should trigger event onMinCrossed & onMaxCrossed 1`] = `
 <DocumentFragment>
-  .cache-kwbqjp {
+  .cache-1civgmb {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -681,7 +681,7 @@ exports[`NumberInputField should trigger event onMinCrossed & onMaxCrossed 1`] =
   flex-wrap: nowrap;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -948,10 +948,10 @@ exports[`NumberInputField should trigger event onMinCrossed & onMaxCrossed 1`] =
     novalidate=""
   >
     <div
-      class="cache-kwbqjp ehpbis70"
+      class="cache-1civgmb ehpbis70"
     >
       <div
-        class="cache-6hw7ss ehpbis70"
+        class="cache-16otux ehpbis70"
       >
         <div
           aria-disabled="false"
@@ -1018,7 +1018,7 @@ exports[`NumberInputField should trigger event onMinCrossed & onMaxCrossed 1`] =
 
 exports[`NumberInputField should trigger events correctly 1`] = `
 <DocumentFragment>
-  .cache-kwbqjp {
+  .cache-1civgmb {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1041,7 +1041,7 @@ exports[`NumberInputField should trigger events correctly 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1251,10 +1251,10 @@ exports[`NumberInputField should trigger events correctly 1`] = `
     novalidate=""
   >
     <div
-      class="cache-kwbqjp ehpbis70"
+      class="cache-1civgmb ehpbis70"
     >
       <div
-        class="cache-6hw7ss ehpbis70"
+        class="cache-16otux ehpbis70"
       >
         <div
           aria-disabled="false"
diff --git a/packages/form/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap
index 8e9b4e6ec0..e4b556eacf 100644
--- a/packages/form/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`RadioField should render correctly 1`] = `
 <DocumentFragment>
-  .cache-6hw7ss {
+  .cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -155,7 +155,7 @@ exports[`RadioField should render correctly 1`] = `
     novalidate=""
   >
     <div
-      class="cache-6hw7ss ehpbis70"
+      class="cache-16otux ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -209,7 +209,7 @@ exports[`RadioField should render correctly 1`] = `
 
 exports[`RadioField should render correctly checked 1`] = `
 <DocumentFragment>
-  .cache-6hw7ss {
+  .cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -362,7 +362,7 @@ exports[`RadioField should render correctly checked 1`] = `
     novalidate=""
   >
     <div
-      class="cache-6hw7ss ehpbis70"
+      class="cache-16otux ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -417,7 +417,7 @@ exports[`RadioField should render correctly checked 1`] = `
 
 exports[`RadioField should render correctly disabled 1`] = `
 <DocumentFragment>
-  .cache-6hw7ss {
+  .cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -570,7 +570,7 @@ exports[`RadioField should render correctly disabled 1`] = `
     novalidate=""
   >
     <div
-      class="cache-6hw7ss ehpbis70"
+      class="cache-16otux ehpbis70"
     >
       <div
         aria-disabled="true"
@@ -625,7 +625,7 @@ exports[`RadioField should render correctly disabled 1`] = `
 
 exports[`RadioField should trigger events correctly 1`] = `
 <DocumentFragment>
-  .cache-6hw7ss {
+  .cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -778,7 +778,7 @@ exports[`RadioField should trigger events correctly 1`] = `
     novalidate=""
   >
     <div
-      class="cache-6hw7ss ehpbis70"
+      class="cache-16otux ehpbis70"
     >
       <div
         aria-disabled="false"
diff --git a/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.spec.tsx.snap
index 6575c326ad..7802403857 100644
--- a/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`RadioField should render correctly checked 1`] = `
 <DocumentFragment>
-  .cache-kwbqjp {
+  .cache-1civgmb {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -31,7 +31,7 @@ exports[`RadioField should render correctly checked 1`] = `
   margin: 0;
 }
 
-.cache-uyols6 {
+.cache-tjrecv {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -66,7 +66,7 @@ exports[`RadioField should render correctly checked 1`] = `
   text-decoration: none;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -219,13 +219,13 @@ exports[`RadioField should render correctly checked 1`] = `
     novalidate=""
   >
     <div
-      class="cache-kwbqjp ehpbis70"
+      class="cache-1civgmb ehpbis70"
     >
       <fieldset
         class="cache-7o2an9 e15shfap1"
       >
         <div
-          class="cache-uyols6 ehpbis70"
+          class="cache-tjrecv ehpbis70"
         >
           <legend
             class="cache-tjeurz e13y3mga0"
@@ -233,10 +233,10 @@ exports[`RadioField should render correctly checked 1`] = `
             Label 
           </legend>
           <div
-            class="cache-kwbqjp ehpbis70"
+            class="cache-1civgmb ehpbis70"
           >
             <div
-              class="cache-6hw7ss ehpbis70"
+              class="cache-16otux ehpbis70"
             >
               <div
                 aria-disabled="false"
@@ -285,7 +285,7 @@ exports[`RadioField should render correctly checked 1`] = `
               </div>
             </div>
             <div
-              class="cache-6hw7ss ehpbis70"
+              class="cache-16otux ehpbis70"
             >
               <div
                 aria-disabled="false"
@@ -343,7 +343,7 @@ exports[`RadioField should render correctly checked 1`] = `
 
 exports[`RadioField should trigger events correctly 1`] = `
 <DocumentFragment>
-  .cache-kwbqjp {
+  .cache-1civgmb {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -372,7 +372,7 @@ exports[`RadioField should trigger events correctly 1`] = `
   margin: 0;
 }
 
-.cache-uyols6 {
+.cache-tjrecv {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -407,7 +407,7 @@ exports[`RadioField should trigger events correctly 1`] = `
   text-decoration: none;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -560,13 +560,13 @@ exports[`RadioField should trigger events correctly 1`] = `
     novalidate=""
   >
     <div
-      class="cache-kwbqjp ehpbis70"
+      class="cache-1civgmb ehpbis70"
     >
       <fieldset
         class="cache-7o2an9 e15shfap1"
       >
         <div
-          class="cache-uyols6 ehpbis70"
+          class="cache-tjrecv ehpbis70"
         >
           <legend
             class="cache-tjeurz e13y3mga0"
@@ -574,10 +574,10 @@ exports[`RadioField should trigger events correctly 1`] = `
             RadioGroupField events 
           </legend>
           <div
-            class="cache-kwbqjp ehpbis70"
+            class="cache-1civgmb ehpbis70"
           >
             <div
-              class="cache-6hw7ss ehpbis70"
+              class="cache-16otux ehpbis70"
             >
               <div
                 aria-disabled="false"
@@ -626,7 +626,7 @@ exports[`RadioField should trigger events correctly 1`] = `
               </div>
             </div>
             <div
-              class="cache-6hw7ss ehpbis70"
+              class="cache-16otux ehpbis70"
             >
               <div
                 aria-disabled="false"
diff --git a/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap
index 1f4bdec29f..532577e45f 100644
--- a/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -224,7 +224,7 @@ exports[`SelectInputField should display right value on grouped options 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-108jn5w {
+.cache-9bqyx6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -339,7 +339,7 @@ exports[`SelectInputField should display right value on grouped options 1`] = `
             class=" cache-1xc3v61-indicatorContainer"
           >
             <div
-              class="cache-108jn5w ehpbis70"
+              class="cache-9bqyx6 ehpbis70"
             >
               <svg
                 class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -579,7 +579,7 @@ exports[`SelectInputField should render correctly 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-108jn5w {
+.cache-9bqyx6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -696,7 +696,7 @@ exports[`SelectInputField should render correctly 1`] = `
             class=" cache-1xc3v61-indicatorContainer"
           >
             <div
-              class="cache-108jn5w ehpbis70"
+              class="cache-9bqyx6 ehpbis70"
             >
               <svg
                 class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -922,7 +922,7 @@ exports[`SelectInputField should render correctly disabled 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-108jn5w {
+.cache-9bqyx6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1040,7 +1040,7 @@ exports[`SelectInputField should render correctly disabled 1`] = `
             class=" cache-1xc3v61-indicatorContainer"
           >
             <div
-              class="cache-108jn5w ehpbis70"
+              class="cache-9bqyx6 ehpbis70"
             >
               <svg
                 class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -1274,7 +1274,7 @@ exports[`SelectInputField should render correctly multiple 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-108jn5w {
+.cache-9bqyx6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1391,7 +1391,7 @@ exports[`SelectInputField should render correctly multiple 1`] = `
             class=" cache-1xc3v61-indicatorContainer"
           >
             <div
-              class="cache-108jn5w ehpbis70"
+              class="cache-9bqyx6 ehpbis70"
             >
               <svg
                 class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -1633,7 +1633,7 @@ exports[`SelectInputField should render correctly with a disabled option 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-108jn5w {
+.cache-9bqyx6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1750,7 +1750,7 @@ exports[`SelectInputField should render correctly with a disabled option 1`] = `
             class=" cache-1xc3v61-indicatorContainer"
           >
             <div
-              class="cache-108jn5w ehpbis70"
+              class="cache-9bqyx6 ehpbis70"
             >
               <svg
                 class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -2005,7 +2005,7 @@ exports[`SelectInputField should trigger events 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-108jn5w {
+.cache-9bqyx6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2120,7 +2120,7 @@ exports[`SelectInputField should trigger events 1`] = `
             class=" cache-1xc3v61-indicatorContainer"
           >
             <div
-              class="cache-108jn5w ehpbis70"
+              class="cache-9bqyx6 ehpbis70"
             >
               <svg
                 class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
diff --git a/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.spec.tsx.snap
index e1d8b6e70d..9392dd6184 100644
--- a/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -51,7 +51,7 @@ exports[`SelectableCardField should render correctly 1`] = `
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -238,7 +238,7 @@ exports[`SelectableCardField should render correctly 1`] = `
       data-error="false"
     >
       <div
-        class="cache-6hw7ss ehpbis70"
+        class="cache-16otux ehpbis70"
       >
         <div
           aria-disabled="false"
@@ -339,7 +339,7 @@ exports[`SelectableCardField should render correctly checked 1`] = `
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -526,7 +526,7 @@ exports[`SelectableCardField should render correctly checked 1`] = `
       data-error="false"
     >
       <div
-        class="cache-6hw7ss ehpbis70"
+        class="cache-16otux ehpbis70"
       >
         <div
           aria-disabled="false"
@@ -628,7 +628,7 @@ exports[`SelectableCardField should render correctly disabled 1`] = `
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -815,7 +815,7 @@ exports[`SelectableCardField should render correctly disabled 1`] = `
       data-error="false"
     >
       <div
-        class="cache-6hw7ss ehpbis70"
+        class="cache-16otux ehpbis70"
       >
         <div
           aria-disabled="true"
@@ -917,7 +917,7 @@ exports[`SelectableCardField should render correctly with errors 1`] = `
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1104,7 +1104,7 @@ exports[`SelectableCardField should render correctly with errors 1`] = `
       data-error="true"
     >
       <div
-        class="cache-6hw7ss ehpbis70"
+        class="cache-16otux ehpbis70"
       >
         <div
           aria-disabled="false"
@@ -1210,7 +1210,7 @@ exports[`SelectableCardField should trigger events correctly 1`] = `
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-6hw7ss {
+.cache-16otux {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1397,7 +1397,7 @@ exports[`SelectableCardField should trigger events correctly 1`] = `
       data-error="false"
     >
       <div
-        class="cache-6hw7ss ehpbis70"
+        class="cache-16otux ehpbis70"
       >
         <div
           aria-disabled="false"
diff --git a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap
index 797c881998..d947592bcb 100644
--- a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap
@@ -56,7 +56,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   color: #f9f9fa;
 }
 
-.cache-ln4ozo-alertStyles {
+.cache-i7zpby-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -84,7 +84,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   border-left: 4px solid #b3144d;
 }
 
-.cache-awdzpq {
+.cache-wmjnfc {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -111,7 +111,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   width: 100%;
 }
 
-.cache-14uwbmp {
+.cache-1k0ux7y {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -143,7 +143,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   min-height: 24px;
 }
 
-.cache-1m8tvrr {
+.cache-hvmk6w {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -193,13 +193,13 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
       Submit
     </button>
     <div
-      class="cache-ln4ozo-alertStyles e17p0ih04"
+      class="cache-i7zpby-alertStyles e17p0ih04"
     >
       <div
-        class="cache-awdzpq e17p0ih02"
+        class="cache-wmjnfc e17p0ih02"
       >
         <div
-          class="cache-14uwbmp ehpbis70"
+          class="cache-1k0ux7y ehpbis70"
         >
           <svg
             class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -210,7 +210,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
             />
           </svg>
           <div
-            class="cache-1m8tvrr e17p0ih03"
+            class="cache-hvmk6w e17p0ih03"
           >
             <p
               class="cache-1d1sal e13y3mga0"
diff --git a/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.spec.tsx.snap
index b57ad089c6..9239906d68 100644
--- a/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -590,7 +590,7 @@ exports[`TextInputField should render correctly notice 1`] = `
   padding-top: 2px;
 }
 
-.cache-1gf8r99 {
+.cache-159nqe {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -658,7 +658,7 @@ exports[`TextInputField should render correctly notice 1`] = `
         />
       </div>
       <div
-        class="el3h3g93 cache-1gf8r99 ehpbis70"
+        class="el3h3g93 cache-159nqe ehpbis70"
       >
         <svg
           class="cache-k1vg20-sizeStyles e1gt4cfo0"
@@ -792,7 +792,7 @@ exports[`TextInputField should render correctly random 1`] = `
   box-shadow: none!important;
 }
 
-.cache-b79aqv {
+.cache-1amzdlq {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -911,7 +911,7 @@ exports[`TextInputField should render correctly random 1`] = `
           class="cache-16eoe1d-StyledRightElement el3h3g97"
         >
           <div
-            class="cache-b79aqv el3h3g91"
+            class="cache-1amzdlq el3h3g91"
           >
             <button
               aria-label="randomize"
diff --git a/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap
index fad4623baf..5b7d40fde1 100644
--- a/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -224,7 +224,7 @@ exports[`TimeField should render correctly 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-108jn5w {
+.cache-9bqyx6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -350,7 +350,7 @@ exports[`TimeField should render correctly 1`] = `
             class=" cache-1xc3v61-indicatorContainer"
           >
             <div
-              class="cache-108jn5w ehpbis70"
+              class="cache-9bqyx6 ehpbis70"
             >
               <hr
                 aria-orientation="vertical"
@@ -605,7 +605,7 @@ exports[`TimeField should render correctly checked without value 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-108jn5w {
+.cache-9bqyx6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -731,7 +731,7 @@ exports[`TimeField should render correctly checked without value 1`] = `
             class=" cache-1xc3v61-indicatorContainer"
           >
             <div
-              class="cache-108jn5w ehpbis70"
+              class="cache-9bqyx6 ehpbis70"
             >
               <hr
                 aria-orientation="vertical"
@@ -973,7 +973,7 @@ exports[`TimeField should render correctly disabled 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-108jn5w {
+.cache-9bqyx6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1100,7 +1100,7 @@ exports[`TimeField should render correctly disabled 1`] = `
             class=" cache-1xc3v61-indicatorContainer"
           >
             <div
-              class="cache-108jn5w ehpbis70"
+              class="cache-9bqyx6 ehpbis70"
             >
               <hr
                 aria-orientation="vertical"
@@ -1355,7 +1355,7 @@ exports[`TimeField should trigger events 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-108jn5w {
+.cache-9bqyx6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1483,7 +1483,7 @@ exports[`TimeField should trigger events 1`] = `
             class=" cache-1xc3v61-indicatorContainer"
           >
             <div
-              class="cache-108jn5w ehpbis70"
+              class="cache-9bqyx6 ehpbis70"
             >
               <hr
                 aria-orientation="vertical"
diff --git a/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.spec.tsx.snap
index ffcaf1071e..b9fcc7e329 100644
--- a/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -30,7 +30,7 @@ exports[`ToggleField should render correctly 1`] = `
   color: #b5b7bd;
 }
 
-.cache-11u75jq {
+.cache-1ywhivs {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -153,7 +153,7 @@ exports[`ToggleField should render correctly 1`] = `
       class="cache-16r4i0r e1wstm610"
     >
       <div
-        class="cache-11u75jq ehpbis70"
+        class="cache-1ywhivs ehpbis70"
       />
       <div
         class="cache-1d6p8cj e1wstm612"
@@ -204,7 +204,7 @@ exports[`ToggleField should render correctly checked 1`] = `
   color: #b5b7bd;
 }
 
-.cache-11u75jq {
+.cache-1ywhivs {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -327,7 +327,7 @@ exports[`ToggleField should render correctly checked 1`] = `
       class="cache-16r4i0r e1wstm610"
     >
       <div
-        class="cache-11u75jq ehpbis70"
+        class="cache-1ywhivs ehpbis70"
       />
       <div
         class="cache-1d6p8cj e1wstm612"
@@ -379,7 +379,7 @@ exports[`ToggleField should render correctly disabled 1`] = `
   color: #b5b7bd;
 }
 
-.cache-11u75jq {
+.cache-1ywhivs {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -502,7 +502,7 @@ exports[`ToggleField should render correctly disabled 1`] = `
       class="cache-16r4i0r e1wstm610"
     >
       <div
-        class="cache-11u75jq ehpbis70"
+        class="cache-1ywhivs ehpbis70"
       />
       <div
         class="cache-1d6p8cj e1wstm612"
@@ -554,7 +554,7 @@ exports[`ToggleField should render correctly with label and checked 1`] = `
   color: #b5b7bd;
 }
 
-.cache-11u75jq {
+.cache-1ywhivs {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -691,7 +691,7 @@ exports[`ToggleField should render correctly with label and checked 1`] = `
       class="cache-16r4i0r e1wstm610"
     >
       <div
-        class="cache-11u75jq ehpbis70"
+        class="cache-1ywhivs ehpbis70"
       >
         <div
           class="cache-okwmur e3f5lzv0"
diff --git a/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap
index 777f0d3b85..39b52e45a9 100644
--- a/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`GroupField should render correctly checked 1`] = `
 <DocumentFragment>
-  .cache-kwbqjp {
+  .cache-1civgmb {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -31,7 +31,7 @@ exports[`GroupField should render correctly checked 1`] = `
   margin: 0;
 }
 
-.cache-uyols6 {
+.cache-tjrecv {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -66,7 +66,7 @@ exports[`GroupField should render correctly checked 1`] = `
   text-decoration: none;
 }
 
-.cache-y7fsgj {
+.cache-1t7ypwa {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -117,7 +117,7 @@ exports[`GroupField should render correctly checked 1`] = `
   color: #b5b7bd;
 }
 
-.cache-11u75jq {
+.cache-1ywhivs {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -250,13 +250,13 @@ exports[`GroupField should render correctly checked 1`] = `
     novalidate=""
   >
     <div
-      class="cache-kwbqjp ehpbis70"
+      class="cache-1civgmb ehpbis70"
     >
       <fieldset
         class="cache-7o2an9 e1qvneex1"
       >
         <div
-          class="cache-uyols6 ehpbis70"
+          class="cache-tjrecv ehpbis70"
         >
           <legend
             class="cache-tjeurz e13y3mga0"
@@ -264,14 +264,14 @@ exports[`GroupField should render correctly checked 1`] = `
             Label 
           </legend>
           <div
-            class="cache-y7fsgj ehpbis70"
+            class="cache-1t7ypwa ehpbis70"
           >
             <label
               aria-disabled="false"
               class="cache-16r4i0r e1wstm610"
             >
               <div
-                class="cache-11u75jq ehpbis70"
+                class="cache-1ywhivs ehpbis70"
               >
                 <div
                   class="cache-okwmur e3f5lzv0"
@@ -299,7 +299,7 @@ exports[`GroupField should render correctly checked 1`] = `
               class="cache-16r4i0r e1wstm610"
             >
               <div
-                class="cache-11u75jq ehpbis70"
+                class="cache-1ywhivs ehpbis70"
               >
                 <div
                   class="cache-okwmur e3f5lzv0"
@@ -332,7 +332,7 @@ exports[`GroupField should render correctly checked 1`] = `
 
 exports[`GroupField should trigger events correctly with required prop 1`] = `
 <DocumentFragment>
-  .cache-kwbqjp {
+  .cache-1civgmb {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -361,7 +361,7 @@ exports[`GroupField should trigger events correctly with required prop 1`] = `
   margin: 0;
 }
 
-.cache-uyols6 {
+.cache-tjrecv {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -406,7 +406,7 @@ exports[`GroupField should trigger events correctly with required prop 1`] = `
   vertical-align: super;
 }
 
-.cache-y7fsgj {
+.cache-1t7ypwa {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -457,7 +457,7 @@ exports[`GroupField should trigger events correctly with required prop 1`] = `
   color: #b5b7bd;
 }
 
-.cache-11u75jq {
+.cache-1ywhivs {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -590,13 +590,13 @@ exports[`GroupField should trigger events correctly with required prop 1`] = `
     novalidate=""
   >
     <div
-      class="cache-kwbqjp ehpbis70"
+      class="cache-1civgmb ehpbis70"
     >
       <fieldset
         class="cache-7o2an9 e1qvneex1"
       >
         <div
-          class="cache-uyols6 ehpbis70"
+          class="cache-tjrecv ehpbis70"
         >
           <legend
             class="cache-tjeurz e13y3mga0"
@@ -612,14 +612,14 @@ exports[`GroupField should trigger events correctly with required prop 1`] = `
             </svg>
           </legend>
           <div
-            class="cache-y7fsgj ehpbis70"
+            class="cache-1t7ypwa ehpbis70"
           >
             <label
               aria-disabled="false"
               class="cache-16r4i0r e1wstm610"
             >
               <div
-                class="cache-11u75jq ehpbis70"
+                class="cache-1ywhivs ehpbis70"
               >
                 <div
                   class="cache-okwmur e3f5lzv0"
@@ -647,7 +647,7 @@ exports[`GroupField should trigger events correctly with required prop 1`] = `
               class="cache-16r4i0r e1wstm610"
             >
               <div
-                class="cache-11u75jq ehpbis70"
+                class="cache-1ywhivs ehpbis70"
               >
                 <div
                   class="cache-okwmur e3f5lzv0"
diff --git a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap
index 45084f1ca6..526ccee1ca 100644
--- a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Alert renders correctly with all sentiments renders correctly sentiment danger 1`] = `
 <DocumentFragment>
-  .cache-sxk9ic-Stack-StyledStackContainer-alertStyles {
+  .cache-11mx9hk-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -30,7 +30,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   border-left: 4px solid #b3144d;
 }
 
-.cache-ymsbdb-Stack-WrapStack {
+.cache-13ic1ao-Stack-WrapStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -57,7 +57,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   width: 100%;
 }
 
-.cache-1yndguk-Stack {
+.cache-102e6lf-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -89,7 +89,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   min-height: 24px;
 }
 
-.cache-8rqmy2-Stack-TextStack {
+.cache-4ixw4c-Stack-TextStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -130,13 +130,13 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
 }
 
 <div
-    class="cache-sxk9ic-Stack-StyledStackContainer-alertStyles e17p0ih04"
+    class="cache-11mx9hk-Stack-StyledStackContainer-alertStyles e17p0ih04"
   >
     <div
-      class="cache-ymsbdb-Stack-WrapStack e17p0ih02"
+      class="cache-13ic1ao-Stack-WrapStack e17p0ih02"
     >
       <div
-        class="cache-1yndguk-Stack ehpbis70"
+        class="cache-102e6lf-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -147,7 +147,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
           />
         </svg>
         <div
-          class="cache-8rqmy2-Stack-TextStack e17p0ih03"
+          class="cache-4ixw4c-Stack-TextStack e17p0ih03"
         >
           <p
             class="cache-1cozjuw-StyledText e13y3mga0"
@@ -163,7 +163,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
 
 exports[`Alert renders correctly with all sentiments renders correctly sentiment info 1`] = `
 <DocumentFragment>
-  .cache-4i31f9-Stack-StyledStackContainer-alertStyles {
+  .cache-a128rg-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -191,7 +191,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   border-left: 4px solid #005da3;
 }
 
-.cache-ymsbdb-Stack-WrapStack {
+.cache-13ic1ao-Stack-WrapStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -218,7 +218,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   width: 100%;
 }
 
-.cache-1yndguk-Stack {
+.cache-102e6lf-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -250,7 +250,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   min-height: 24px;
 }
 
-.cache-8rqmy2-Stack-TextStack {
+.cache-4ixw4c-Stack-TextStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -291,13 +291,13 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
 }
 
 <div
-    class="cache-4i31f9-Stack-StyledStackContainer-alertStyles e17p0ih04"
+    class="cache-a128rg-Stack-StyledStackContainer-alertStyles e17p0ih04"
   >
     <div
-      class="cache-ymsbdb-Stack-WrapStack e17p0ih02"
+      class="cache-13ic1ao-Stack-WrapStack e17p0ih02"
     >
       <div
-        class="cache-1yndguk-Stack ehpbis70"
+        class="cache-102e6lf-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -308,7 +308,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
           />
         </svg>
         <div
-          class="cache-8rqmy2-Stack-TextStack e17p0ih03"
+          class="cache-4ixw4c-Stack-TextStack e17p0ih03"
         >
           <p
             class="cache-1cozjuw-StyledText e13y3mga0"
@@ -324,7 +324,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
 
 exports[`Alert renders correctly with all sentiments renders correctly sentiment success 1`] = `
 <DocumentFragment>
-  .cache-e70dp9-Stack-StyledStackContainer-alertStyles {
+  .cache-csathi-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -352,7 +352,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   border-left: 4px solid #22674e;
 }
 
-.cache-ymsbdb-Stack-WrapStack {
+.cache-13ic1ao-Stack-WrapStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -379,7 +379,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   width: 100%;
 }
 
-.cache-1yndguk-Stack {
+.cache-102e6lf-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -411,7 +411,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   min-height: 24px;
 }
 
-.cache-8rqmy2-Stack-TextStack {
+.cache-4ixw4c-Stack-TextStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -452,13 +452,13 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
 }
 
 <div
-    class="cache-e70dp9-Stack-StyledStackContainer-alertStyles e17p0ih04"
+    class="cache-csathi-Stack-StyledStackContainer-alertStyles e17p0ih04"
   >
     <div
-      class="cache-ymsbdb-Stack-WrapStack e17p0ih02"
+      class="cache-13ic1ao-Stack-WrapStack e17p0ih02"
     >
       <div
-        class="cache-1yndguk-Stack ehpbis70"
+        class="cache-102e6lf-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -469,7 +469,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
           />
         </svg>
         <div
-          class="cache-8rqmy2-Stack-TextStack e17p0ih03"
+          class="cache-4ixw4c-Stack-TextStack e17p0ih03"
         >
           <p
             class="cache-1cozjuw-StyledText e13y3mga0"
@@ -485,7 +485,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
 
 exports[`Alert renders correctly with all sentiments renders correctly sentiment warning 1`] = `
 <DocumentFragment>
-  .cache-i1omh8-Stack-StyledStackContainer-alertStyles {
+  .cache-1hp5mca-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -513,7 +513,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   border-left: 4px solid #7c5400;
 }
 
-.cache-ymsbdb-Stack-WrapStack {
+.cache-13ic1ao-Stack-WrapStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -540,7 +540,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   width: 100%;
 }
 
-.cache-1yndguk-Stack {
+.cache-102e6lf-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -572,7 +572,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
   min-height: 24px;
 }
 
-.cache-8rqmy2-Stack-TextStack {
+.cache-4ixw4c-Stack-TextStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -613,13 +613,13 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
 }
 
 <div
-    class="cache-i1omh8-Stack-StyledStackContainer-alertStyles e17p0ih04"
+    class="cache-1hp5mca-Stack-StyledStackContainer-alertStyles e17p0ih04"
   >
     <div
-      class="cache-ymsbdb-Stack-WrapStack e17p0ih02"
+      class="cache-13ic1ao-Stack-WrapStack e17p0ih02"
     >
       <div
-        class="cache-1yndguk-Stack ehpbis70"
+        class="cache-102e6lf-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -630,7 +630,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
           />
         </svg>
         <div
-          class="cache-8rqmy2-Stack-TextStack e17p0ih03"
+          class="cache-4ixw4c-Stack-TextStack e17p0ih03"
         >
           <p
             class="cache-1cozjuw-StyledText e13y3mga0"
@@ -646,7 +646,7 @@ exports[`Alert renders correctly with all sentiments renders correctly sentiment
 
 exports[`Alert renders correctly with buttonText and onClickButton 1`] = `
 <DocumentFragment>
-  .cache-sxk9ic-Stack-StyledStackContainer-alertStyles {
+  .cache-11mx9hk-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -674,7 +674,7 @@ exports[`Alert renders correctly with buttonText and onClickButton 1`] = `
   border-left: 4px solid #b3144d;
 }
 
-.cache-ymsbdb-Stack-WrapStack {
+.cache-13ic1ao-Stack-WrapStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -701,7 +701,7 @@ exports[`Alert renders correctly with buttonText and onClickButton 1`] = `
   width: 100%;
 }
 
-.cache-1yndguk-Stack {
+.cache-102e6lf-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -733,7 +733,7 @@ exports[`Alert renders correctly with buttonText and onClickButton 1`] = `
   min-height: 24px;
 }
 
-.cache-8rqmy2-Stack-TextStack {
+.cache-4ixw4c-Stack-TextStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -829,13 +829,13 @@ exports[`Alert renders correctly with buttonText and onClickButton 1`] = `
 }
 
 <div
-    class="cache-sxk9ic-Stack-StyledStackContainer-alertStyles e17p0ih04"
+    class="cache-11mx9hk-Stack-StyledStackContainer-alertStyles e17p0ih04"
   >
     <div
-      class="cache-ymsbdb-Stack-WrapStack e17p0ih02"
+      class="cache-13ic1ao-Stack-WrapStack e17p0ih02"
     >
       <div
-        class="cache-1yndguk-Stack ehpbis70"
+        class="cache-102e6lf-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -846,7 +846,7 @@ exports[`Alert renders correctly with buttonText and onClickButton 1`] = `
           />
         </svg>
         <div
-          class="cache-8rqmy2-Stack-TextStack e17p0ih03"
+          class="cache-4ixw4c-Stack-TextStack e17p0ih03"
         >
           <p
             class="cache-1cozjuw-StyledText e13y3mga0"
@@ -868,7 +868,7 @@ exports[`Alert renders correctly with buttonText and onClickButton 1`] = `
 
 exports[`Alert renders correctly with children as component 1`] = `
 <DocumentFragment>
-  .cache-sxk9ic-Stack-StyledStackContainer-alertStyles {
+  .cache-11mx9hk-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -896,7 +896,7 @@ exports[`Alert renders correctly with children as component 1`] = `
   border-left: 4px solid #b3144d;
 }
 
-.cache-ymsbdb-Stack-WrapStack {
+.cache-13ic1ao-Stack-WrapStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -923,7 +923,7 @@ exports[`Alert renders correctly with children as component 1`] = `
   width: 100%;
 }
 
-.cache-1yndguk-Stack {
+.cache-102e6lf-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -955,7 +955,7 @@ exports[`Alert renders correctly with children as component 1`] = `
   min-height: 24px;
 }
 
-.cache-8rqmy2-Stack-TextStack {
+.cache-4ixw4c-Stack-TextStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -984,13 +984,13 @@ exports[`Alert renders correctly with children as component 1`] = `
 }
 
 <div
-    class="cache-sxk9ic-Stack-StyledStackContainer-alertStyles e17p0ih04"
+    class="cache-11mx9hk-Stack-StyledStackContainer-alertStyles e17p0ih04"
   >
     <div
-      class="cache-ymsbdb-Stack-WrapStack e17p0ih02"
+      class="cache-13ic1ao-Stack-WrapStack e17p0ih02"
     >
       <div
-        class="cache-1yndguk-Stack ehpbis70"
+        class="cache-102e6lf-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -1001,7 +1001,7 @@ exports[`Alert renders correctly with children as component 1`] = `
           />
         </svg>
         <div
-          class="cache-8rqmy2-Stack-TextStack e17p0ih03"
+          class="cache-4ixw4c-Stack-TextStack e17p0ih03"
         >
           <p>
             Sample Alert
@@ -1015,7 +1015,7 @@ exports[`Alert renders correctly with children as component 1`] = `
 
 exports[`Alert renders correctly with closable and onClose 1`] = `
 <DocumentFragment>
-  .cache-sxk9ic-Stack-StyledStackContainer-alertStyles {
+  .cache-11mx9hk-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1043,7 +1043,7 @@ exports[`Alert renders correctly with closable and onClose 1`] = `
   border-left: 4px solid #b3144d;
 }
 
-.cache-ymsbdb-Stack-WrapStack {
+.cache-13ic1ao-Stack-WrapStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1070,7 +1070,7 @@ exports[`Alert renders correctly with closable and onClose 1`] = `
   width: 100%;
 }
 
-.cache-1yndguk-Stack {
+.cache-102e6lf-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1102,7 +1102,7 @@ exports[`Alert renders correctly with closable and onClose 1`] = `
   min-height: 24px;
 }
 
-.cache-8rqmy2-Stack-TextStack {
+.cache-4ixw4c-Stack-TextStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1209,13 +1209,13 @@ exports[`Alert renders correctly with closable and onClose 1`] = `
 }
 
 <div
-    class="cache-sxk9ic-Stack-StyledStackContainer-alertStyles e17p0ih04"
+    class="cache-11mx9hk-Stack-StyledStackContainer-alertStyles e17p0ih04"
   >
     <div
-      class="cache-ymsbdb-Stack-WrapStack e17p0ih02"
+      class="cache-13ic1ao-Stack-WrapStack e17p0ih02"
     >
       <div
-        class="cache-1yndguk-Stack ehpbis70"
+        class="cache-102e6lf-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -1226,7 +1226,7 @@ exports[`Alert renders correctly with closable and onClose 1`] = `
           />
         </svg>
         <div
-          class="cache-8rqmy2-Stack-TextStack e17p0ih03"
+          class="cache-4ixw4c-Stack-TextStack e17p0ih03"
         >
           <p
             class="cache-1cozjuw-StyledText e13y3mga0"
@@ -1256,7 +1256,7 @@ exports[`Alert renders correctly with closable and onClose 1`] = `
 
 exports[`Alert renders correctly with default values 1`] = `
 <DocumentFragment>
-  .cache-sxk9ic-Stack-StyledStackContainer-alertStyles {
+  .cache-11mx9hk-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1284,7 +1284,7 @@ exports[`Alert renders correctly with default values 1`] = `
   border-left: 4px solid #b3144d;
 }
 
-.cache-ymsbdb-Stack-WrapStack {
+.cache-13ic1ao-Stack-WrapStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1311,7 +1311,7 @@ exports[`Alert renders correctly with default values 1`] = `
   width: 100%;
 }
 
-.cache-1yndguk-Stack {
+.cache-102e6lf-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1343,7 +1343,7 @@ exports[`Alert renders correctly with default values 1`] = `
   min-height: 24px;
 }
 
-.cache-8rqmy2-Stack-TextStack {
+.cache-4ixw4c-Stack-TextStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1384,13 +1384,13 @@ exports[`Alert renders correctly with default values 1`] = `
 }
 
 <div
-    class="cache-sxk9ic-Stack-StyledStackContainer-alertStyles e17p0ih04"
+    class="cache-11mx9hk-Stack-StyledStackContainer-alertStyles e17p0ih04"
   >
     <div
-      class="cache-ymsbdb-Stack-WrapStack e17p0ih02"
+      class="cache-13ic1ao-Stack-WrapStack e17p0ih02"
     >
       <div
-        class="cache-1yndguk-Stack ehpbis70"
+        class="cache-102e6lf-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -1401,7 +1401,7 @@ exports[`Alert renders correctly with default values 1`] = `
           />
         </svg>
         <div
-          class="cache-8rqmy2-Stack-TextStack e17p0ih03"
+          class="cache-4ixw4c-Stack-TextStack e17p0ih03"
         >
           <p
             class="cache-1cozjuw-StyledText e13y3mga0"
@@ -1417,7 +1417,7 @@ exports[`Alert renders correctly with default values 1`] = `
 
 exports[`Alert renders correctly with disabled 1`] = `
 <DocumentFragment>
-  .cache-sxk9ic-Stack-StyledStackContainer-alertStyles {
+  .cache-11mx9hk-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1445,7 +1445,7 @@ exports[`Alert renders correctly with disabled 1`] = `
   border-left: 4px solid #b3144d;
 }
 
-.cache-ymsbdb-Stack-WrapStack {
+.cache-13ic1ao-Stack-WrapStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1472,7 +1472,7 @@ exports[`Alert renders correctly with disabled 1`] = `
   width: 100%;
 }
 
-.cache-1yndguk-Stack {
+.cache-102e6lf-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1504,7 +1504,7 @@ exports[`Alert renders correctly with disabled 1`] = `
   min-height: 24px;
 }
 
-.cache-8rqmy2-Stack-TextStack {
+.cache-4ixw4c-Stack-TextStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1592,13 +1592,13 @@ exports[`Alert renders correctly with disabled 1`] = `
 }
 
 <div
-    class="cache-sxk9ic-Stack-StyledStackContainer-alertStyles e17p0ih04"
+    class="cache-11mx9hk-Stack-StyledStackContainer-alertStyles e17p0ih04"
   >
     <div
-      class="cache-ymsbdb-Stack-WrapStack e17p0ih02"
+      class="cache-13ic1ao-Stack-WrapStack e17p0ih02"
     >
       <div
-        class="cache-1yndguk-Stack ehpbis70"
+        class="cache-102e6lf-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -1609,7 +1609,7 @@ exports[`Alert renders correctly with disabled 1`] = `
           />
         </svg>
         <div
-          class="cache-8rqmy2-Stack-TextStack e17p0ih03"
+          class="cache-4ixw4c-Stack-TextStack e17p0ih03"
         >
           <p
             class="cache-1cozjuw-StyledText e13y3mga0"
@@ -1632,7 +1632,7 @@ exports[`Alert renders correctly with disabled 1`] = `
 
 exports[`Alert renders correctly with title 1`] = `
 <DocumentFragment>
-  .cache-sxk9ic-Stack-StyledStackContainer-alertStyles {
+  .cache-11mx9hk-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1660,7 +1660,7 @@ exports[`Alert renders correctly with title 1`] = `
   border-left: 4px solid #b3144d;
 }
 
-.cache-ymsbdb-Stack-WrapStack {
+.cache-13ic1ao-Stack-WrapStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1687,7 +1687,7 @@ exports[`Alert renders correctly with title 1`] = `
   width: 100%;
 }
 
-.cache-1yndguk-Stack {
+.cache-102e6lf-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1719,7 +1719,7 @@ exports[`Alert renders correctly with title 1`] = `
   min-height: 24px;
 }
 
-.cache-8rqmy2-Stack-TextStack {
+.cache-4ixw4c-Stack-TextStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1772,13 +1772,13 @@ exports[`Alert renders correctly with title 1`] = `
 }
 
 <div
-    class="cache-sxk9ic-Stack-StyledStackContainer-alertStyles e17p0ih04"
+    class="cache-11mx9hk-Stack-StyledStackContainer-alertStyles e17p0ih04"
   >
     <div
-      class="cache-ymsbdb-Stack-WrapStack e17p0ih02"
+      class="cache-13ic1ao-Stack-WrapStack e17p0ih02"
     >
       <div
-        class="cache-1yndguk-Stack ehpbis70"
+        class="cache-102e6lf-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -1789,7 +1789,7 @@ exports[`Alert renders correctly with title 1`] = `
           />
         </svg>
         <div
-          class="cache-8rqmy2-Stack-TextStack e17p0ih03"
+          class="cache-4ixw4c-Stack-TextStack e17p0ih03"
         >
           <span
             class="cache-1jjfap7-StyledText e13y3mga0"
diff --git a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.tsx.snap
index 2f6214ff47..f7bbf02653 100644
--- a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.tsx.snap
@@ -41,7 +41,7 @@ exports[`Banner renders correctly with a button 1`] = `
   background: none;
 }
 
-.cache-msgflj-Stack-ImageStack {
+.cache-hmn6z8-Stack-ImageStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -65,7 +65,7 @@ exports[`Banner renders correctly with a button 1`] = `
   width: 140px;
 }
 
-.cache-1i393eq-Stack {
+.cache-19d60zd-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -87,7 +87,7 @@ exports[`Banner renders correctly with a button 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -134,7 +134,7 @@ exports[`Banner renders correctly with a button 1`] = `
   text-decoration: none;
 }
 
-.cache-nf3r0g-Stack {
+.cache-1hgmfcr-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -278,7 +278,7 @@ exports[`Banner renders correctly with a button 1`] = `
     class="cache-1voqd75-Container-styles e1kdwp5x1"
   >
     <div
-      class="cache-msgflj-Stack-ImageStack e1kdwp5x0"
+      class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
       <img
         alt=""
@@ -286,11 +286,11 @@ exports[`Banner renders correctly with a button 1`] = `
       />
     </div>
     <div
-      class="cache-1i393eq-Stack ehpbis70"
+      class="cache-19d60zd-Stack ehpbis70"
       style="flex: 1;"
     >
       <div
-        class="cache-1r8thn3-Stack ehpbis70"
+        class="cache-ymc80m-Stack ehpbis70"
         style="flex: 1;"
       >
         <p
@@ -305,7 +305,7 @@ exports[`Banner renders correctly with a button 1`] = `
         </p>
       </div>
       <div
-        class="cache-nf3r0g-Stack ehpbis70"
+        class="cache-1hgmfcr-Stack ehpbis70"
       >
         <button
           class="cache-1wvru4m-StyledFilledButton e112qvla2"
@@ -374,7 +374,7 @@ exports[`Banner renders correctly with a link 1`] = `
   background: none;
 }
 
-.cache-msgflj-Stack-ImageStack {
+.cache-hmn6z8-Stack-ImageStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -398,7 +398,7 @@ exports[`Banner renders correctly with a link 1`] = `
   width: 140px;
 }
 
-.cache-1i393eq-Stack {
+.cache-19d60zd-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -420,7 +420,7 @@ exports[`Banner renders correctly with a link 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -467,7 +467,7 @@ exports[`Banner renders correctly with a link 1`] = `
   text-decoration: none;
 }
 
-.cache-nf3r0g-Stack {
+.cache-1hgmfcr-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -648,7 +648,7 @@ exports[`Banner renders correctly with a link 1`] = `
     class="cache-1voqd75-Container-styles e1kdwp5x1"
   >
     <div
-      class="cache-msgflj-Stack-ImageStack e1kdwp5x0"
+      class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
       <img
         alt=""
@@ -656,11 +656,11 @@ exports[`Banner renders correctly with a link 1`] = `
       />
     </div>
     <div
-      class="cache-1i393eq-Stack ehpbis70"
+      class="cache-19d60zd-Stack ehpbis70"
       style="flex: 1;"
     >
       <div
-        class="cache-1r8thn3-Stack ehpbis70"
+        class="cache-ymc80m-Stack ehpbis70"
         style="flex: 1;"
       >
         <p
@@ -675,7 +675,7 @@ exports[`Banner renders correctly with a link 1`] = `
         </p>
       </div>
       <div
-        class="cache-nf3r0g-Stack ehpbis70"
+        class="cache-1hgmfcr-Stack ehpbis70"
       >
         <a
           class="cache-iezd3d-StyledLink e1afnb7a0"
@@ -759,7 +759,7 @@ exports[`Banner renders correctly with an image 1`] = `
   background: none;
 }
 
-.cache-msgflj-Stack-ImageStack {
+.cache-hmn6z8-Stack-ImageStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -783,7 +783,7 @@ exports[`Banner renders correctly with an image 1`] = `
   width: 140px;
 }
 
-.cache-1i393eq-Stack {
+.cache-19d60zd-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -805,7 +805,7 @@ exports[`Banner renders correctly with an image 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -852,7 +852,7 @@ exports[`Banner renders correctly with an image 1`] = `
   text-decoration: none;
 }
 
-.cache-nf3r0g-Stack {
+.cache-1hgmfcr-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -942,7 +942,7 @@ exports[`Banner renders correctly with an image 1`] = `
     class="cache-1voqd75-Container-styles e1kdwp5x1"
   >
     <div
-      class="cache-msgflj-Stack-ImageStack e1kdwp5x0"
+      class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
       <img
         alt=""
@@ -950,11 +950,11 @@ exports[`Banner renders correctly with an image 1`] = `
       />
     </div>
     <div
-      class="cache-1i393eq-Stack ehpbis70"
+      class="cache-19d60zd-Stack ehpbis70"
       style="flex: 1;"
     >
       <div
-        class="cache-1r8thn3-Stack ehpbis70"
+        class="cache-ymc80m-Stack ehpbis70"
         style="flex: 1;"
       >
         <p
@@ -969,7 +969,7 @@ exports[`Banner renders correctly with an image 1`] = `
         </p>
       </div>
       <div
-        class="cache-nf3r0g-Stack ehpbis70"
+        class="cache-1hgmfcr-Stack ehpbis70"
       />
     </div>
     <button
@@ -1031,7 +1031,7 @@ exports[`Banner renders correctly with default values 1`] = `
   background: none;
 }
 
-.cache-msgflj-Stack-ImageStack {
+.cache-hmn6z8-Stack-ImageStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1055,7 +1055,7 @@ exports[`Banner renders correctly with default values 1`] = `
   width: 140px;
 }
 
-.cache-1i393eq-Stack {
+.cache-19d60zd-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1077,7 +1077,7 @@ exports[`Banner renders correctly with default values 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1124,7 +1124,7 @@ exports[`Banner renders correctly with default values 1`] = `
   text-decoration: none;
 }
 
-.cache-nf3r0g-Stack {
+.cache-1hgmfcr-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1214,7 +1214,7 @@ exports[`Banner renders correctly with default values 1`] = `
     class="cache-1voqd75-Container-styles e1kdwp5x1"
   >
     <div
-      class="cache-msgflj-Stack-ImageStack e1kdwp5x0"
+      class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
       <img
         alt=""
@@ -1222,11 +1222,11 @@ exports[`Banner renders correctly with default values 1`] = `
       />
     </div>
     <div
-      class="cache-1i393eq-Stack ehpbis70"
+      class="cache-19d60zd-Stack ehpbis70"
       style="flex: 1;"
     >
       <div
-        class="cache-1r8thn3-Stack ehpbis70"
+        class="cache-ymc80m-Stack ehpbis70"
         style="flex: 1;"
       >
         <p
@@ -1241,7 +1241,7 @@ exports[`Banner renders correctly with default values 1`] = `
         </p>
       </div>
       <div
-        class="cache-nf3r0g-Stack ehpbis70"
+        class="cache-1hgmfcr-Stack ehpbis70"
       />
     </div>
     <button
@@ -1303,7 +1303,7 @@ exports[`Banner renders correctly with direction row 1`] = `
   background: none;
 }
 
-.cache-msgflj-Stack-ImageStack {
+.cache-hmn6z8-Stack-ImageStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1327,7 +1327,7 @@ exports[`Banner renders correctly with direction row 1`] = `
   width: 140px;
 }
 
-.cache-142nvv6-Stack {
+.cache-wbv6k9-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1349,7 +1349,7 @@ exports[`Banner renders correctly with direction row 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1396,7 +1396,7 @@ exports[`Banner renders correctly with direction row 1`] = `
   text-decoration: none;
 }
 
-.cache-nf3r0g-Stack {
+.cache-1hgmfcr-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1486,7 +1486,7 @@ exports[`Banner renders correctly with direction row 1`] = `
     class="cache-1voqd75-Container-styles e1kdwp5x1"
   >
     <div
-      class="cache-msgflj-Stack-ImageStack e1kdwp5x0"
+      class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
       <img
         alt=""
@@ -1494,11 +1494,11 @@ exports[`Banner renders correctly with direction row 1`] = `
       />
     </div>
     <div
-      class="cache-142nvv6-Stack ehpbis70"
+      class="cache-wbv6k9-Stack ehpbis70"
       style="flex: 1;"
     >
       <div
-        class="cache-1r8thn3-Stack ehpbis70"
+        class="cache-ymc80m-Stack ehpbis70"
         style="flex: 1;"
       >
         <p
@@ -1513,7 +1513,7 @@ exports[`Banner renders correctly with direction row 1`] = `
         </p>
       </div>
       <div
-        class="cache-nf3r0g-Stack ehpbis70"
+        class="cache-1hgmfcr-Stack ehpbis70"
       />
     </div>
     <button
@@ -1575,7 +1575,7 @@ exports[`Banner renders correctly with size small 1`] = `
   background: none;
 }
 
-.cache-1ppo6xt-Stack-ImageStack {
+.cache-37jj6f-Stack-ImageStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1599,7 +1599,7 @@ exports[`Banner renders correctly with size small 1`] = `
   width: 74px;
 }
 
-.cache-1i393eq-Stack {
+.cache-19d60zd-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1621,7 +1621,7 @@ exports[`Banner renders correctly with size small 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1668,7 +1668,7 @@ exports[`Banner renders correctly with size small 1`] = `
   text-decoration: none;
 }
 
-.cache-nf3r0g-Stack {
+.cache-1hgmfcr-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1758,7 +1758,7 @@ exports[`Banner renders correctly with size small 1`] = `
     class="cache-mkpxbw-Container-styles e1kdwp5x1"
   >
     <div
-      class="cache-1ppo6xt-Stack-ImageStack e1kdwp5x0"
+      class="cache-37jj6f-Stack-ImageStack e1kdwp5x0"
     >
       <img
         alt=""
@@ -1766,11 +1766,11 @@ exports[`Banner renders correctly with size small 1`] = `
       />
     </div>
     <div
-      class="cache-1i393eq-Stack ehpbis70"
+      class="cache-19d60zd-Stack ehpbis70"
       style="flex: 1;"
     >
       <div
-        class="cache-1r8thn3-Stack ehpbis70"
+        class="cache-ymc80m-Stack ehpbis70"
         style="flex: 1;"
       >
         <p
@@ -1785,7 +1785,7 @@ exports[`Banner renders correctly with size small 1`] = `
         </p>
       </div>
       <div
-        class="cache-nf3r0g-Stack ehpbis70"
+        class="cache-1hgmfcr-Stack ehpbis70"
       />
     </div>
     <button
@@ -1846,7 +1846,7 @@ exports[`Banner renders correctly with type promotional 1`] = `
   background: none;
 }
 
-.cache-msgflj-Stack-ImageStack {
+.cache-hmn6z8-Stack-ImageStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1870,7 +1870,7 @@ exports[`Banner renders correctly with type promotional 1`] = `
   width: 140px;
 }
 
-.cache-1i393eq-Stack {
+.cache-19d60zd-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1892,7 +1892,7 @@ exports[`Banner renders correctly with type promotional 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1939,7 +1939,7 @@ exports[`Banner renders correctly with type promotional 1`] = `
   text-decoration: none;
 }
 
-.cache-nf3r0g-Stack {
+.cache-1hgmfcr-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2029,7 +2029,7 @@ exports[`Banner renders correctly with type promotional 1`] = `
     class="cache-1iq2gtr-Container-styles e1kdwp5x1"
   >
     <div
-      class="cache-msgflj-Stack-ImageStack e1kdwp5x0"
+      class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
       <img
         alt=""
@@ -2037,11 +2037,11 @@ exports[`Banner renders correctly with type promotional 1`] = `
       />
     </div>
     <div
-      class="cache-1i393eq-Stack ehpbis70"
+      class="cache-19d60zd-Stack ehpbis70"
       style="flex: 1;"
     >
       <div
-        class="cache-1r8thn3-Stack ehpbis70"
+        class="cache-ymc80m-Stack ehpbis70"
         style="flex: 1;"
       >
         <p
@@ -2056,7 +2056,7 @@ exports[`Banner renders correctly with type promotional 1`] = `
         </p>
       </div>
       <div
-        class="cache-nf3r0g-Stack ehpbis70"
+        class="cache-1hgmfcr-Stack ehpbis70"
       />
     </div>
     <button
diff --git a/packages/ui/src/components/Card/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/Card/__tests__/__snapshots__/index.tsx.snap
index 1b45caad82..906bbac04c 100644
--- a/packages/ui/src/components/Card/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui/src/components/Card/__tests__/__snapshots__/index.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Card renders correctly with advanced header 1`] = `
 <DocumentFragment>
-  .cache-13y4eb8-Stack-StyledStack {
+  .cache-wk9y1q-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,7 +25,7 @@ exports[`Card renders correctly with advanced header 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-13y4eb8-Stack-StyledStack[data-disabled='true'] {
+.cache-wk9y1q-Stack-StyledStack[data-disabled='true'] {
   cursor: not-allowed;
 }
 
@@ -44,7 +44,7 @@ exports[`Card renders correctly with advanced header 1`] = `
 }
 
 <div
-    class="cache-13y4eb8-Stack-StyledStack exwxj841"
+    class="cache-wk9y1q-Stack-StyledStack exwxj841"
     data-disabled="false"
   >
     <h2>
@@ -142,7 +142,7 @@ exports[`Card renders correctly with disabled 1`] = `
 
 exports[`Card renders correctly with disabled and header 1`] = `
 <DocumentFragment>
-  .cache-13y4eb8-Stack-StyledStack {
+  .cache-wk9y1q-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -165,7 +165,7 @@ exports[`Card renders correctly with disabled and header 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-13y4eb8-Stack-StyledStack[data-disabled='true'] {
+.cache-wk9y1q-Stack-StyledStack[data-disabled='true'] {
   cursor: not-allowed;
 }
 
@@ -196,7 +196,7 @@ exports[`Card renders correctly with disabled and header 1`] = `
 }
 
 <div
-    class="cache-13y4eb8-Stack-StyledStack exwxj841"
+    class="cache-wk9y1q-Stack-StyledStack exwxj841"
     data-disabled="true"
   >
     <h2
@@ -217,7 +217,7 @@ exports[`Card renders correctly with disabled and header 1`] = `
 
 exports[`Card renders correctly with header 1`] = `
 <DocumentFragment>
-  .cache-13y4eb8-Stack-StyledStack {
+  .cache-wk9y1q-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -240,7 +240,7 @@ exports[`Card renders correctly with header 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-13y4eb8-Stack-StyledStack[data-disabled='true'] {
+.cache-wk9y1q-Stack-StyledStack[data-disabled='true'] {
   cursor: not-allowed;
 }
 
@@ -271,7 +271,7 @@ exports[`Card renders correctly with header 1`] = `
 }
 
 <div
-    class="cache-13y4eb8-Stack-StyledStack exwxj841"
+    class="cache-wk9y1q-Stack-StyledStack exwxj841"
     data-disabled="false"
   >
     <h2
diff --git a/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.tsx.snap
index 1ef03ffb60..229f869367 100644
--- a/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.tsx.snap
@@ -224,7 +224,7 @@ exports[`Checkbox renders correctly 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -301,7 +301,7 @@ exports[`Checkbox renders correctly 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -542,7 +542,7 @@ exports[`Checkbox renders correctly checked 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -620,7 +620,7 @@ exports[`Checkbox renders correctly checked 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -861,7 +861,7 @@ exports[`Checkbox renders correctly checked and disabled 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -940,7 +940,7 @@ exports[`Checkbox renders correctly checked and disabled 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -1181,7 +1181,7 @@ exports[`Checkbox renders correctly checked with helper 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1271,7 +1271,7 @@ exports[`Checkbox renders correctly checked with helper 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -1517,7 +1517,7 @@ exports[`Checkbox renders correctly disabled 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1595,7 +1595,7 @@ exports[`Checkbox renders correctly disabled 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -1836,7 +1836,7 @@ exports[`Checkbox renders correctly indeterminate 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1913,7 +1913,7 @@ exports[`Checkbox renders correctly indeterminate 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2154,7 +2154,7 @@ exports[`Checkbox renders correctly indeterminate and disabled 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2232,7 +2232,7 @@ exports[`Checkbox renders correctly indeterminate and disabled 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2473,7 +2473,7 @@ exports[`Checkbox renders correctly invisible 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2551,7 +2551,7 @@ exports[`Checkbox renders correctly invisible 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2792,7 +2792,7 @@ exports[`Checkbox renders correctly no child 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2870,7 +2870,7 @@ exports[`Checkbox renders correctly no child 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3104,7 +3104,7 @@ exports[`Checkbox renders correctly required 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3191,7 +3191,7 @@ exports[`Checkbox renders correctly required 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3442,7 +3442,7 @@ exports[`Checkbox renders correctly with a value 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3519,7 +3519,7 @@ exports[`Checkbox renders correctly with a value 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3760,7 +3760,7 @@ exports[`Checkbox renders correctly with an error 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3851,7 +3851,7 @@ exports[`Checkbox renders correctly with an error 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -4097,7 +4097,7 @@ exports[`Checkbox renders correctly with indeterminate state 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4174,7 +4174,7 @@ exports[`Checkbox renders correctly with indeterminate state 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -4407,7 +4407,7 @@ exports[`Checkbox renders correctly with progress 1`] = `
   fill: #ffd3e3;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4495,7 +4495,7 @@ exports[`Checkbox renders correctly with progress 1`] = `
       value=""
     />
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -4728,7 +4728,7 @@ exports[`Checkbox renders correctly with progress and no child 1`] = `
   fill: #ffd3e3;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4817,7 +4817,7 @@ exports[`Checkbox renders correctly with progress and no child 1`] = `
       value=""
     />
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -5051,7 +5051,7 @@ exports[`Checkbox renders correctly with sizes 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5128,7 +5128,7 @@ exports[`Checkbox renders correctly with sizes 1`] = `
       </g>
     </svg>
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -5356,7 +5356,7 @@ exports[`Checkbox renders correctly with sizes 1`] = `
   fill: #ffd3e3;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5444,7 +5444,7 @@ exports[`Checkbox renders correctly with sizes 1`] = `
       value="test"
     />
     <div
-      class="cache-19m27my-Stack ehpbis70"
+      class="cache-113ljh8-Stack ehpbis70"
     >
       <div
         class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -5693,7 +5693,7 @@ exports[`Checkbox renders correctly with tooltip 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5775,7 +5775,7 @@ exports[`Checkbox renders correctly with tooltip 1`] = `
         </g>
       </svg>
       <div
-        class="cache-19m27my-Stack ehpbis70"
+        class="cache-113ljh8-Stack ehpbis70"
       >
         <div
           class="cache-1x9cp5u-StyledRow e3f5lzv0"
diff --git a/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap
index 088720d8c3..1219764659 100644
--- a/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`CheckboxGroup renders correctly 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -31,7 +31,7 @@ exports[`CheckboxGroup renders correctly 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -288,7 +288,7 @@ exports[`CheckboxGroup renders correctly 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -325,13 +325,13 @@ exports[`CheckboxGroup renders correctly 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1k5uyng1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -339,7 +339,7 @@ exports[`CheckboxGroup renders correctly 1`] = `
           Label 
         </legend>
         <div
-          class="cache-7hpczr-Stack ehpbis70"
+          class="cache-gw33n2-Stack ehpbis70"
         >
           <div
             aria-disabled="false"
@@ -382,7 +382,7 @@ exports[`CheckboxGroup renders correctly 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -437,7 +437,7 @@ exports[`CheckboxGroup renders correctly 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -460,7 +460,7 @@ exports[`CheckboxGroup renders correctly 1`] = `
 
 exports[`CheckboxGroup renders correctly with direction row 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -489,7 +489,7 @@ exports[`CheckboxGroup renders correctly with direction row 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -524,7 +524,7 @@ exports[`CheckboxGroup renders correctly with direction row 1`] = `
   text-decoration: none;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -769,7 +769,7 @@ exports[`CheckboxGroup renders correctly with direction row 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -806,13 +806,13 @@ exports[`CheckboxGroup renders correctly with direction row 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1k5uyng1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -820,7 +820,7 @@ exports[`CheckboxGroup renders correctly with direction row 1`] = `
           Label 
         </legend>
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         >
           <div
             aria-disabled="false"
@@ -863,7 +863,7 @@ exports[`CheckboxGroup renders correctly with direction row 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -918,7 +918,7 @@ exports[`CheckboxGroup renders correctly with direction row 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -941,7 +941,7 @@ exports[`CheckboxGroup renders correctly with direction row 1`] = `
 
 exports[`CheckboxGroup renders correctly with error content 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -970,7 +970,7 @@ exports[`CheckboxGroup renders correctly with error content 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1227,7 +1227,7 @@ exports[`CheckboxGroup renders correctly with error content 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1276,13 +1276,13 @@ exports[`CheckboxGroup renders correctly with error content 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1k5uyng1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -1290,7 +1290,7 @@ exports[`CheckboxGroup renders correctly with error content 1`] = `
           Label 
         </legend>
         <div
-          class="cache-7hpczr-Stack ehpbis70"
+          class="cache-gw33n2-Stack ehpbis70"
         >
           <div
             aria-disabled="false"
@@ -1333,7 +1333,7 @@ exports[`CheckboxGroup renders correctly with error content 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -1388,7 +1388,7 @@ exports[`CheckboxGroup renders correctly with error content 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -1416,7 +1416,7 @@ exports[`CheckboxGroup renders correctly with error content 1`] = `
 
 exports[`CheckboxGroup renders correctly with helper content 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1445,7 +1445,7 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1702,7 +1702,7 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1751,13 +1751,13 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1k5uyng1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -1765,7 +1765,7 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = `
           Label 
         </legend>
         <div
-          class="cache-7hpczr-Stack ehpbis70"
+          class="cache-gw33n2-Stack ehpbis70"
         >
           <div
             aria-disabled="false"
@@ -1808,7 +1808,7 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -1863,7 +1863,7 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -1891,7 +1891,7 @@ exports[`CheckboxGroup renders correctly with helper content 1`] = `
 
 exports[`CheckboxGroup renders correctly with no CheckboxGroup.Checkbox name 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1920,7 +1920,7 @@ exports[`CheckboxGroup renders correctly with no CheckboxGroup.Checkbox name 1`]
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2177,7 +2177,7 @@ exports[`CheckboxGroup renders correctly with no CheckboxGroup.Checkbox name 1`]
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2214,13 +2214,13 @@ exports[`CheckboxGroup renders correctly with no CheckboxGroup.Checkbox name 1`]
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1k5uyng1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -2228,7 +2228,7 @@ exports[`CheckboxGroup renders correctly with no CheckboxGroup.Checkbox name 1`]
           Label 
         </legend>
         <div
-          class="cache-7hpczr-Stack ehpbis70"
+          class="cache-gw33n2-Stack ehpbis70"
         >
           <div
             aria-disabled="false"
@@ -2271,7 +2271,7 @@ exports[`CheckboxGroup renders correctly with no CheckboxGroup.Checkbox name 1`]
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2326,7 +2326,7 @@ exports[`CheckboxGroup renders correctly with no CheckboxGroup.Checkbox name 1`]
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2349,7 +2349,7 @@ exports[`CheckboxGroup renders correctly with no CheckboxGroup.Checkbox name 1`]
 
 exports[`CheckboxGroup renders correctly with required prop 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2378,7 +2378,7 @@ exports[`CheckboxGroup renders correctly with required prop 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2645,7 +2645,7 @@ exports[`CheckboxGroup renders correctly with required prop 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2682,13 +2682,13 @@ exports[`CheckboxGroup renders correctly with required prop 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1k5uyng1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -2704,7 +2704,7 @@ exports[`CheckboxGroup renders correctly with required prop 1`] = `
           </svg>
         </legend>
         <div
-          class="cache-7hpczr-Stack ehpbis70"
+          class="cache-gw33n2-Stack ehpbis70"
         >
           <div
             aria-disabled="false"
@@ -2747,7 +2747,7 @@ exports[`CheckboxGroup renders correctly with required prop 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2802,7 +2802,7 @@ exports[`CheckboxGroup renders correctly with required prop 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
diff --git a/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.tsx.snap
index c7a71bbfd3..f2ab3b7c5a 100644
--- a/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EmptySpace should work with border 1`] = `
 <DocumentFragment>
-  .cache-fioq3n-Stack-Container {
+  .cache-1tq6cl1-Stack-Container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -30,7 +30,7 @@ exports[`EmptySpace should work with border 1`] = `
   border-radius: 4px;
 }
 
-.cache-j6xnpn-Stack-StyledStack {
+.cache-1lrayyb-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -54,7 +54,7 @@ exports[`EmptySpace should work with border 1`] = `
   padding: 40px;
 }
 
-.cache-1vnclv7-Stack {
+.cache-si5b0e-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -77,7 +77,7 @@ exports[`EmptySpace should work with border 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-8qmkzf-Stack {
+.cache-1cm1duh-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -113,7 +113,7 @@ exports[`EmptySpace should work with border 1`] = `
   text-align: center;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -137,16 +137,16 @@ exports[`EmptySpace should work with border 1`] = `
 }
 
 <div
-    class="cache-fioq3n-Stack-Container e1m66ceh1"
+    class="cache-1tq6cl1-Stack-Container e1m66ceh1"
   >
     <div
-      class="cache-j6xnpn-Stack-StyledStack e1m66ceh0"
+      class="cache-1lrayyb-Stack-StyledStack e1m66ceh0"
     >
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-8qmkzf-Stack ehpbis70"
+          class="cache-1cm1duh-Stack ehpbis70"
         >
           <p
             class="e1m66ceh2 cache-158hhn0-StyledText-CenteredText e13y3mga0"
@@ -156,10 +156,10 @@ exports[`EmptySpace should work with border 1`] = `
         </div>
       </div>
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         />
       </div>
       content
@@ -170,7 +170,7 @@ exports[`EmptySpace should work with border 1`] = `
 
 exports[`EmptySpace should work with image 1`] = `
 <DocumentFragment>
-  .cache-1m8q099-Stack-Container {
+  .cache-jqxwtt-Stack-Container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -196,7 +196,7 @@ exports[`EmptySpace should work with image 1`] = `
   padding: 0 140px;
 }
 
-.cache-j6xnpn-Stack-StyledStack {
+.cache-1lrayyb-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -220,7 +220,7 @@ exports[`EmptySpace should work with image 1`] = `
   padding: 40px;
 }
 
-.cache-1vnclv7-Stack {
+.cache-si5b0e-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -243,7 +243,7 @@ exports[`EmptySpace should work with image 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-8qmkzf-Stack {
+.cache-1cm1duh-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -279,7 +279,7 @@ exports[`EmptySpace should work with image 1`] = `
   text-align: center;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -303,13 +303,13 @@ exports[`EmptySpace should work with image 1`] = `
 }
 
 <div
-    class="cache-1m8q099-Stack-Container e1m66ceh1"
+    class="cache-jqxwtt-Stack-Container e1m66ceh1"
   >
     <div
-      class="cache-j6xnpn-Stack-StyledStack e1m66ceh0"
+      class="cache-1lrayyb-Stack-StyledStack e1m66ceh0"
     >
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <img
           alt=""
@@ -317,7 +317,7 @@ exports[`EmptySpace should work with image 1`] = `
           width="240"
         />
         <div
-          class="cache-8qmkzf-Stack ehpbis70"
+          class="cache-1cm1duh-Stack ehpbis70"
         >
           <p
             class="e1m66ceh2 cache-158hhn0-StyledText-CenteredText e13y3mga0"
@@ -327,10 +327,10 @@ exports[`EmptySpace should work with image 1`] = `
         </div>
       </div>
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         />
       </div>
       content
@@ -341,7 +341,7 @@ exports[`EmptySpace should work with image 1`] = `
 
 exports[`EmptySpace should work with image as component 1`] = `
 <DocumentFragment>
-  .cache-1m8q099-Stack-Container {
+  .cache-jqxwtt-Stack-Container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -367,7 +367,7 @@ exports[`EmptySpace should work with image as component 1`] = `
   padding: 0 140px;
 }
 
-.cache-j6xnpn-Stack-StyledStack {
+.cache-1lrayyb-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -391,7 +391,7 @@ exports[`EmptySpace should work with image as component 1`] = `
   padding: 40px;
 }
 
-.cache-1vnclv7-Stack {
+.cache-si5b0e-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -414,7 +414,7 @@ exports[`EmptySpace should work with image as component 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-8qmkzf-Stack {
+.cache-1cm1duh-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -450,7 +450,7 @@ exports[`EmptySpace should work with image as component 1`] = `
   text-align: center;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -474,20 +474,20 @@ exports[`EmptySpace should work with image as component 1`] = `
 }
 
 <div
-    class="cache-1m8q099-Stack-Container e1m66ceh1"
+    class="cache-jqxwtt-Stack-Container e1m66ceh1"
   >
     <div
-      class="cache-j6xnpn-Stack-StyledStack e1m66ceh0"
+      class="cache-1lrayyb-Stack-StyledStack e1m66ceh0"
     >
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <img
           alt="kapsule logo"
           src="test-file-stub"
         />
         <div
-          class="cache-8qmkzf-Stack ehpbis70"
+          class="cache-1cm1duh-Stack ehpbis70"
         >
           <p
             class="e1m66ceh2 cache-158hhn0-StyledText-CenteredText e13y3mga0"
@@ -497,10 +497,10 @@ exports[`EmptySpace should work with image as component 1`] = `
         </div>
       </div>
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         />
       </div>
       content
@@ -511,7 +511,7 @@ exports[`EmptySpace should work with image as component 1`] = `
 
 exports[`EmptySpace should work with learn more 1`] = `
 <DocumentFragment>
-  .cache-1m8q099-Stack-Container {
+  .cache-jqxwtt-Stack-Container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -537,7 +537,7 @@ exports[`EmptySpace should work with learn more 1`] = `
   padding: 0 140px;
 }
 
-.cache-j6xnpn-Stack-StyledStack {
+.cache-1lrayyb-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -561,7 +561,7 @@ exports[`EmptySpace should work with learn more 1`] = `
   padding: 40px;
 }
 
-.cache-1vnclv7-Stack {
+.cache-si5b0e-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -584,7 +584,7 @@ exports[`EmptySpace should work with learn more 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-8qmkzf-Stack {
+.cache-1cm1duh-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -620,7 +620,7 @@ exports[`EmptySpace should work with learn more 1`] = `
   text-align: center;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -727,16 +727,16 @@ exports[`EmptySpace should work with learn more 1`] = `
 }
 
 <div
-    class="cache-1m8q099-Stack-Container e1m66ceh1"
+    class="cache-jqxwtt-Stack-Container e1m66ceh1"
   >
     <div
-      class="cache-j6xnpn-Stack-StyledStack e1m66ceh0"
+      class="cache-1lrayyb-Stack-StyledStack e1m66ceh0"
     >
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-8qmkzf-Stack ehpbis70"
+          class="cache-1cm1duh-Stack ehpbis70"
         >
           <p
             class="e1m66ceh2 cache-158hhn0-StyledText-CenteredText e13y3mga0"
@@ -746,10 +746,10 @@ exports[`EmptySpace should work with learn more 1`] = `
         </div>
       </div>
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         />
         <a
           class="cache-18qh8vx-StyledLink e1afnb7a0"
@@ -774,7 +774,7 @@ exports[`EmptySpace should work with learn more 1`] = `
 
 exports[`EmptySpace should work with primary button 1`] = `
 <DocumentFragment>
-  .cache-1m8q099-Stack-Container {
+  .cache-jqxwtt-Stack-Container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -800,7 +800,7 @@ exports[`EmptySpace should work with primary button 1`] = `
   padding: 0 140px;
 }
 
-.cache-j6xnpn-Stack-StyledStack {
+.cache-1lrayyb-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -824,7 +824,7 @@ exports[`EmptySpace should work with primary button 1`] = `
   padding: 40px;
 }
 
-.cache-1vnclv7-Stack {
+.cache-si5b0e-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -847,7 +847,7 @@ exports[`EmptySpace should work with primary button 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-8qmkzf-Stack {
+.cache-1cm1duh-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -883,7 +883,7 @@ exports[`EmptySpace should work with primary button 1`] = `
   text-align: center;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -907,16 +907,16 @@ exports[`EmptySpace should work with primary button 1`] = `
 }
 
 <div
-    class="cache-1m8q099-Stack-Container e1m66ceh1"
+    class="cache-jqxwtt-Stack-Container e1m66ceh1"
   >
     <div
-      class="cache-j6xnpn-Stack-StyledStack e1m66ceh0"
+      class="cache-1lrayyb-Stack-StyledStack e1m66ceh0"
     >
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-8qmkzf-Stack ehpbis70"
+          class="cache-1cm1duh-Stack ehpbis70"
         >
           <p
             class="e1m66ceh2 cache-158hhn0-StyledText-CenteredText e13y3mga0"
@@ -926,10 +926,10 @@ exports[`EmptySpace should work with primary button 1`] = `
         </div>
       </div>
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         >
           <button
             type="button"
@@ -946,7 +946,7 @@ exports[`EmptySpace should work with primary button 1`] = `
 
 exports[`EmptySpace should work with secondary button 1`] = `
 <DocumentFragment>
-  .cache-1m8q099-Stack-Container {
+  .cache-jqxwtt-Stack-Container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -972,7 +972,7 @@ exports[`EmptySpace should work with secondary button 1`] = `
   padding: 0 140px;
 }
 
-.cache-j6xnpn-Stack-StyledStack {
+.cache-1lrayyb-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -996,7 +996,7 @@ exports[`EmptySpace should work with secondary button 1`] = `
   padding: 40px;
 }
 
-.cache-1vnclv7-Stack {
+.cache-si5b0e-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1019,7 +1019,7 @@ exports[`EmptySpace should work with secondary button 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-8qmkzf-Stack {
+.cache-1cm1duh-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1055,7 +1055,7 @@ exports[`EmptySpace should work with secondary button 1`] = `
   text-align: center;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1079,16 +1079,16 @@ exports[`EmptySpace should work with secondary button 1`] = `
 }
 
 <div
-    class="cache-1m8q099-Stack-Container e1m66ceh1"
+    class="cache-jqxwtt-Stack-Container e1m66ceh1"
   >
     <div
-      class="cache-j6xnpn-Stack-StyledStack e1m66ceh0"
+      class="cache-1lrayyb-Stack-StyledStack e1m66ceh0"
     >
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-8qmkzf-Stack ehpbis70"
+          class="cache-1cm1duh-Stack ehpbis70"
         >
           <p
             class="e1m66ceh2 cache-158hhn0-StyledText-CenteredText e13y3mga0"
@@ -1098,10 +1098,10 @@ exports[`EmptySpace should work with secondary button 1`] = `
         </div>
       </div>
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         >
           <button
             type="button"
@@ -1118,7 +1118,7 @@ exports[`EmptySpace should work with secondary button 1`] = `
 
 exports[`EmptySpace should work with size 1`] = `
 <DocumentFragment>
-  .cache-diatnu-Stack-Container {
+  .cache-13rl8q3-Stack-Container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1143,7 +1143,7 @@ exports[`EmptySpace should work with size 1`] = `
   margin: 0 auto;
 }
 
-.cache-j6xnpn-Stack-StyledStack {
+.cache-1lrayyb-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1167,7 +1167,7 @@ exports[`EmptySpace should work with size 1`] = `
   padding: 40px;
 }
 
-.cache-1vnclv7-Stack {
+.cache-si5b0e-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1190,7 +1190,7 @@ exports[`EmptySpace should work with size 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-8qmkzf-Stack {
+.cache-1cm1duh-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1226,7 +1226,7 @@ exports[`EmptySpace should work with size 1`] = `
   text-align: center;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1250,16 +1250,16 @@ exports[`EmptySpace should work with size 1`] = `
 }
 
 <div
-    class="cache-diatnu-Stack-Container e1m66ceh1"
+    class="cache-13rl8q3-Stack-Container e1m66ceh1"
   >
     <div
-      class="cache-j6xnpn-Stack-StyledStack e1m66ceh0"
+      class="cache-1lrayyb-Stack-StyledStack e1m66ceh0"
     >
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-8qmkzf-Stack ehpbis70"
+          class="cache-1cm1duh-Stack ehpbis70"
         >
           <p
             class="e1m66ceh2 cache-158hhn0-StyledText-CenteredText e13y3mga0"
@@ -1269,10 +1269,10 @@ exports[`EmptySpace should work with size 1`] = `
         </div>
       </div>
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         />
       </div>
       content
@@ -1283,7 +1283,7 @@ exports[`EmptySpace should work with size 1`] = `
 
 exports[`EmptySpace should work with title 1`] = `
 <DocumentFragment>
-  .cache-1m8q099-Stack-Container {
+  .cache-jqxwtt-Stack-Container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1309,7 +1309,7 @@ exports[`EmptySpace should work with title 1`] = `
   padding: 0 140px;
 }
 
-.cache-j6xnpn-Stack-StyledStack {
+.cache-1lrayyb-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1333,7 +1333,7 @@ exports[`EmptySpace should work with title 1`] = `
   padding: 40px;
 }
 
-.cache-1vnclv7-Stack {
+.cache-si5b0e-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1356,7 +1356,7 @@ exports[`EmptySpace should work with title 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-8qmkzf-Stack {
+.cache-1cm1duh-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1405,7 +1405,7 @@ exports[`EmptySpace should work with title 1`] = `
   text-align: center;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1429,16 +1429,16 @@ exports[`EmptySpace should work with title 1`] = `
 }
 
 <div
-    class="cache-1m8q099-Stack-Container e1m66ceh1"
+    class="cache-jqxwtt-Stack-Container e1m66ceh1"
   >
     <div
-      class="cache-j6xnpn-Stack-StyledStack e1m66ceh0"
+      class="cache-1lrayyb-Stack-StyledStack e1m66ceh0"
     >
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-8qmkzf-Stack ehpbis70"
+          class="cache-1cm1duh-Stack ehpbis70"
         >
           <h2
             class="e1m66ceh2 cache-95t317-StyledText-CenteredText e13y3mga0"
@@ -1453,10 +1453,10 @@ exports[`EmptySpace should work with title 1`] = `
         </div>
       </div>
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         />
       </div>
       content
@@ -1467,7 +1467,7 @@ exports[`EmptySpace should work with title 1`] = `
 
 exports[`EmptySpace should work without parameters 1`] = `
 <DocumentFragment>
-  .cache-1m8q099-Stack-Container {
+  .cache-jqxwtt-Stack-Container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1493,7 +1493,7 @@ exports[`EmptySpace should work without parameters 1`] = `
   padding: 0 140px;
 }
 
-.cache-j6xnpn-Stack-StyledStack {
+.cache-1lrayyb-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1517,7 +1517,7 @@ exports[`EmptySpace should work without parameters 1`] = `
   padding: 40px;
 }
 
-.cache-1vnclv7-Stack {
+.cache-si5b0e-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1540,7 +1540,7 @@ exports[`EmptySpace should work without parameters 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-8qmkzf-Stack {
+.cache-1cm1duh-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1576,7 +1576,7 @@ exports[`EmptySpace should work without parameters 1`] = `
   text-align: center;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1600,16 +1600,16 @@ exports[`EmptySpace should work without parameters 1`] = `
 }
 
 <div
-    class="cache-1m8q099-Stack-Container e1m66ceh1"
+    class="cache-jqxwtt-Stack-Container e1m66ceh1"
   >
     <div
-      class="cache-j6xnpn-Stack-StyledStack e1m66ceh0"
+      class="cache-1lrayyb-Stack-StyledStack e1m66ceh0"
     >
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-8qmkzf-Stack ehpbis70"
+          class="cache-1cm1duh-Stack ehpbis70"
         >
           <p
             class="e1m66ceh2 cache-158hhn0-StyledText-CenteredText e13y3mga0"
@@ -1619,10 +1619,10 @@ exports[`EmptySpace should work without parameters 1`] = `
         </div>
       </div>
       <div
-        class="cache-1vnclv7-Stack ehpbis70"
+        class="cache-si5b0e-Stack ehpbis70"
       >
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         />
       </div>
     </div>
diff --git a/packages/ui/src/components/LineChart/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/LineChart/__tests__/__snapshots__/index.test.tsx.snap
index 4c26207bbb..720568b0de 100644
--- a/packages/ui/src/components/LineChart/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/LineChart/__tests__/__snapshots__/index.test.tsx.snap
@@ -967,7 +967,7 @@ exports[`LineChart renders correctly when chart is hovered 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1136,7 +1136,7 @@ exports[`LineChart renders correctly when chart is hovered 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2822,7 +2822,7 @@ exports[`LineChart renders correctly when data is async 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3004,7 +3004,7 @@ exports[`LineChart renders correctly when data is async 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3099,7 +3099,7 @@ exports[`LineChart renders correctly when data is async 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3194,7 +3194,7 @@ exports[`LineChart renders correctly when data is async 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -4147,7 +4147,7 @@ exports[`LineChart renders correctly when legend is deselected 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4316,7 +4316,7 @@ exports[`LineChart renders correctly when legend is deselected 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -6706,7 +6706,7 @@ exports[`LineChart renders correctly with detailed legend 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6875,7 +6875,7 @@ exports[`LineChart renders correctly with detailed legend 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8561,7 +8561,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8744,7 +8744,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8840,7 +8840,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8936,7 +8936,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -10819,7 +10819,7 @@ exports[`LineChart renders correctly with timeline data 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10988,7 +10988,7 @@ exports[`LineChart renders correctly with timeline data 1`] = `
               </g>
             </svg>
             <div
-              class="cache-19m27my-Stack ehpbis70"
+              class="cache-113ljh8-Stack ehpbis70"
             >
               <div
                 class="cache-1x9cp5u-StyledRow e3f5lzv0"
diff --git a/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
index 1f2a665e9c..0bb8ae46b3 100644
--- a/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
@@ -6205,7 +6205,7 @@ exports[`List Should render correctly with loading with selectable 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6418,7 +6418,7 @@ exports[`List Should render correctly with loading with selectable 1`] = `
             </g>
           </svg>
           <div
-            class="cache-19m27my-Stack ehpbis70"
+            class="cache-113ljh8-Stack ehpbis70"
           >
             <div
               class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -7736,7 +7736,7 @@ exports[`List Should render correctly with selectable 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7909,7 +7909,7 @@ exports[`List Should render correctly with selectable 1`] = `
             </g>
           </svg>
           <div
-            class="cache-19m27my-Stack ehpbis70"
+            class="cache-113ljh8-Stack ehpbis70"
           >
             <div
               class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8008,7 +8008,7 @@ exports[`List Should render correctly with selectable 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8104,7 +8104,7 @@ exports[`List Should render correctly with selectable 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8200,7 +8200,7 @@ exports[`List Should render correctly with selectable 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8296,7 +8296,7 @@ exports[`List Should render correctly with selectable 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8392,7 +8392,7 @@ exports[`List Should render correctly with selectable 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8488,7 +8488,7 @@ exports[`List Should render correctly with selectable 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8584,7 +8584,7 @@ exports[`List Should render correctly with selectable 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8680,7 +8680,7 @@ exports[`List Should render correctly with selectable 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8776,7 +8776,7 @@ exports[`List Should render correctly with selectable 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -8872,7 +8872,7 @@ exports[`List Should render correctly with selectable 1`] = `
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -9211,7 +9211,7 @@ exports[`List Should render correctly with selectable then click on first row th
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9384,7 +9384,7 @@ exports[`List Should render correctly with selectable then click on first row th
             </g>
           </svg>
           <div
-            class="cache-19m27my-Stack ehpbis70"
+            class="cache-113ljh8-Stack ehpbis70"
           >
             <div
               class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -9482,7 +9482,7 @@ exports[`List Should render correctly with selectable then click on first row th
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -9577,7 +9577,7 @@ exports[`List Should render correctly with selectable then click on first row th
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -9672,7 +9672,7 @@ exports[`List Should render correctly with selectable then click on first row th
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -9767,7 +9767,7 @@ exports[`List Should render correctly with selectable then click on first row th
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -9862,7 +9862,7 @@ exports[`List Should render correctly with selectable then click on first row th
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -9957,7 +9957,7 @@ exports[`List Should render correctly with selectable then click on first row th
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -10052,7 +10052,7 @@ exports[`List Should render correctly with selectable then click on first row th
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -10147,7 +10147,7 @@ exports[`List Should render correctly with selectable then click on first row th
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -10242,7 +10242,7 @@ exports[`List Should render correctly with selectable then click on first row th
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -10337,7 +10337,7 @@ exports[`List Should render correctly with selectable then click on first row th
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -11020,7 +11020,7 @@ exports[`List Should render correctly with sort then click 1`] = `
   color: #521094;
 }
 
-.cache-1a79c9o-Stack-StyledIconContainer {
+.cache-187juzs-Stack-StyledIconContainer {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11044,7 +11044,7 @@ exports[`List Should render correctly with sort then click 1`] = `
   color: #3f4250;
 }
 
-.cache-1a79c9o-Stack-StyledIconContainer[aria-disabled='true'] {
+.cache-187juzs-Stack-StyledIconContainer[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
@@ -11158,7 +11158,7 @@ exports[`List Should render correctly with sort then click 1`] = `
         >
           Column 1
           <div
-            class="cache-1a79c9o-Stack-StyledIconContainer e1q5cnom1"
+            class="cache-187juzs-Stack-StyledIconContainer e1q5cnom1"
           >
             <svg
               class="e1q5cnom2 cache-m6lyzh-sizeStyles-ArrowUpIcon e1gt4cfo0"
@@ -11186,7 +11186,7 @@ exports[`List Should render correctly with sort then click 1`] = `
         >
           Column 2
           <div
-            class="cache-1a79c9o-Stack-StyledIconContainer e1q5cnom1"
+            class="cache-187juzs-Stack-StyledIconContainer e1q5cnom1"
           >
             <svg
               class="e1q5cnom2 cache-m6lyzh-sizeStyles-ArrowUpIcon e1gt4cfo0"
@@ -11213,7 +11213,7 @@ exports[`List Should render correctly with sort then click 1`] = `
         >
           Column 3
           <div
-            class="cache-1a79c9o-Stack-StyledIconContainer e1q5cnom1"
+            class="cache-187juzs-Stack-StyledIconContainer e1q5cnom1"
           >
             <svg
               class="e1q5cnom2 cache-m6lyzh-sizeStyles-ArrowUpIcon e1gt4cfo0"
@@ -11240,7 +11240,7 @@ exports[`List Should render correctly with sort then click 1`] = `
         >
           Column 4
           <div
-            class="cache-1a79c9o-Stack-StyledIconContainer e1q5cnom1"
+            class="cache-187juzs-Stack-StyledIconContainer e1q5cnom1"
           >
             <svg
               class="e1q5cnom2 cache-m6lyzh-sizeStyles-ArrowUpIcon e1gt4cfo0"
@@ -11267,7 +11267,7 @@ exports[`List Should render correctly with sort then click 1`] = `
         >
           Column 5
           <div
-            class="cache-1a79c9o-Stack-StyledIconContainer e1q5cnom1"
+            class="cache-187juzs-Stack-StyledIconContainer e1q5cnom1"
           >
             <svg
               class="e1q5cnom2 cache-m6lyzh-sizeStyles-ArrowUpIcon e1gt4cfo0"
diff --git a/packages/ui/src/components/Notice/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Notice/__tests__/__snapshots__/index.test.tsx.snap
index 1a624334df..fb4f91f151 100644
--- a/packages/ui/src/components/Notice/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Notice/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Notice renders correctly with default props 1`] = `
 <DocumentFragment>
-  .cache-we9r3h-Stack {
+  .cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -47,7 +47,7 @@ exports[`Notice renders correctly with default props 1`] = `
 }
 
 <div
-    class="cache-we9r3h-Stack ehpbis70"
+    class="cache-irytw7-Stack ehpbis70"
   >
     <svg
       class="cache-k1vg20-sizeStyles e1gt4cfo0"
diff --git a/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap
index 6f9b6395a8..a41945f504 100644
--- a/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`NumberInput should click on center button 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,7 +25,7 @@ exports[`NumberInput should click on center button 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -232,10 +232,10 @@ exports[`NumberInput should click on center button 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -300,7 +300,7 @@ exports[`NumberInput should click on center button 1`] = `
 
 exports[`NumberInput should click on min button 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -323,7 +323,7 @@ exports[`NumberInput should click on min button 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -530,10 +530,10 @@ exports[`NumberInput should click on min button 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -598,7 +598,7 @@ exports[`NumberInput should click on min button 1`] = `
 
 exports[`NumberInput should click on plus button with a step value 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -621,7 +621,7 @@ exports[`NumberInput should click on plus button with a step value 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -828,10 +828,10 @@ exports[`NumberInput should click on plus button with a step value 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -896,7 +896,7 @@ exports[`NumberInput should click on plus button with a step value 1`] = `
 
 exports[`NumberInput should click on plus button with a step value and an in-between value set 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -919,7 +919,7 @@ exports[`NumberInput should click on plus button with a step value and an in-bet
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1126,10 +1126,10 @@ exports[`NumberInput should click on plus button with a step value and an in-bet
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -1194,7 +1194,7 @@ exports[`NumberInput should click on plus button with a step value and an in-bet
 
 exports[`NumberInput should focus input and modify value 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1217,7 +1217,7 @@ exports[`NumberInput should focus input and modify value 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1424,10 +1424,10 @@ exports[`NumberInput should focus input and modify value 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -1492,7 +1492,7 @@ exports[`NumberInput should focus input and modify value 1`] = `
 
 exports[`NumberInput should focus input and modify value onMaxCrossed 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1515,7 +1515,7 @@ exports[`NumberInput should focus input and modify value onMaxCrossed 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1779,10 +1779,10 @@ exports[`NumberInput should focus input and modify value onMaxCrossed 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -1848,7 +1848,7 @@ exports[`NumberInput should focus input and modify value onMaxCrossed 1`] = `
 
 exports[`NumberInput should focus input and modify value onMinCrossed 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1871,7 +1871,7 @@ exports[`NumberInput should focus input and modify value onMinCrossed 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2135,10 +2135,10 @@ exports[`NumberInput should focus input and modify value onMinCrossed 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -2204,7 +2204,7 @@ exports[`NumberInput should focus input and modify value onMinCrossed 1`] = `
 
 exports[`NumberInput should increase and decrease input with arrow up and down 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2227,7 +2227,7 @@ exports[`NumberInput should increase and decrease input with arrow up and down 1
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2491,10 +2491,10 @@ exports[`NumberInput should increase and decrease input with arrow up and down 1
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -2560,7 +2560,7 @@ exports[`NumberInput should increase and decrease input with arrow up and down 1
 
 exports[`NumberInput should not changed controlled value on click min button 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2583,7 +2583,7 @@ exports[`NumberInput should not changed controlled value on click min button 1`]
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2790,10 +2790,10 @@ exports[`NumberInput should not changed controlled value on click min button 1`]
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -2858,7 +2858,7 @@ exports[`NumberInput should not changed controlled value on click min button 1`]
 
 exports[`NumberInput should renders correctly 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2881,7 +2881,7 @@ exports[`NumberInput should renders correctly 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3079,10 +3079,10 @@ exports[`NumberInput should renders correctly 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -3144,7 +3144,7 @@ exports[`NumberInput should renders correctly 1`] = `
 
 exports[`NumberInput should renders correctly disabled 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3167,7 +3167,7 @@ exports[`NumberInput should renders correctly disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3356,10 +3356,10 @@ exports[`NumberInput should renders correctly disabled 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="true"
@@ -3424,7 +3424,7 @@ exports[`NumberInput should renders correctly disabled 1`] = `
 
 exports[`NumberInput should renders correctly max value 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3447,7 +3447,7 @@ exports[`NumberInput should renders correctly max value 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3645,10 +3645,10 @@ exports[`NumberInput should renders correctly max value 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -3710,7 +3710,7 @@ exports[`NumberInput should renders correctly max value 1`] = `
 
 exports[`NumberInput should renders correctly min value 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3733,7 +3733,7 @@ exports[`NumberInput should renders correctly min value 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3931,10 +3931,10 @@ exports[`NumberInput should renders correctly min value 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -3996,7 +3996,7 @@ exports[`NumberInput should renders correctly min value 1`] = `
 
 exports[`NumberInput should renders correctly with error 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4019,7 +4019,7 @@ exports[`NumberInput should renders correctly with error 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4229,10 +4229,10 @@ exports[`NumberInput should renders correctly with error 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -4299,7 +4299,7 @@ exports[`NumberInput should renders correctly with error 1`] = `
 
 exports[`NumberInput should renders correctly with placeholder 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4322,7 +4322,7 @@ exports[`NumberInput should renders correctly with placeholder 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4520,10 +4520,10 @@ exports[`NumberInput should renders correctly with placeholder 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -4586,7 +4586,7 @@ exports[`NumberInput should renders correctly with placeholder 1`] = `
 
 exports[`NumberInput should renders large size 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4609,7 +4609,7 @@ exports[`NumberInput should renders large size 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4807,10 +4807,10 @@ exports[`NumberInput should renders large size 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -4872,7 +4872,7 @@ exports[`NumberInput should renders large size 1`] = `
 
 exports[`NumberInput should renders small size 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4895,7 +4895,7 @@ exports[`NumberInput should renders small size 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5093,10 +5093,10 @@ exports[`NumberInput should renders small size 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -5158,7 +5158,7 @@ exports[`NumberInput should renders small size 1`] = `
 
 exports[`NumberInput should use maxValue instead of defaultValue if default value is higher than maxValue 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5181,7 +5181,7 @@ exports[`NumberInput should use maxValue instead of defaultValue if default valu
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5445,10 +5445,10 @@ exports[`NumberInput should use maxValue instead of defaultValue if default valu
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -5514,7 +5514,7 @@ exports[`NumberInput should use maxValue instead of defaultValue if default valu
 
 exports[`NumberInput should use minValue instead of defaultValue if default value is lower than minValue 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5537,7 +5537,7 @@ exports[`NumberInput should use minValue instead of defaultValue if default valu
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5801,10 +5801,10 @@ exports[`NumberInput should use minValue instead of defaultValue if default valu
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -5870,7 +5870,7 @@ exports[`NumberInput should use minValue instead of defaultValue if default valu
 
 exports[`NumberInput should use the defaultValue 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5893,7 +5893,7 @@ exports[`NumberInput should use the defaultValue 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6100,10 +6100,10 @@ exports[`NumberInput should use the defaultValue 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
diff --git a/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap
index 72f6fd1867..624c434855 100644
--- a/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`PasswordCheck render with custom values 1`] = `
   gap: 8px;
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -65,7 +65,7 @@ exports[`PasswordCheck render with custom values 1`] = `
     class="cache-wayo1o-PasswordCheckContainer eunxap90"
   >
     <div
-      class="cache-we9r3h-Stack ehpbis70"
+      class="cache-irytw7-Stack ehpbis70"
     >
       <svg
         class="cache-k1vg20-sizeStyles e1gt4cfo0"
@@ -82,7 +82,7 @@ exports[`PasswordCheck render with custom values 1`] = `
       </p>
     </div>
     <div
-      class="cache-we9r3h-Stack ehpbis70"
+      class="cache-irytw7-Stack ehpbis70"
     >
       <svg
         class="cache-ksecsa-sizeStyles e1gt4cfo0"
diff --git a/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap
index 88beda5bfc..526f5aaff9 100644
--- a/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Radio renders correctly 1`] = `
 <DocumentFragment>
-  .cache-1r8thn3-Stack {
+  .cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -152,7 +152,7 @@ exports[`Radio renders correctly 1`] = `
 }
 
 <div
-    class="cache-1r8thn3-Stack ehpbis70"
+    class="cache-ymc80m-Stack ehpbis70"
   >
     <div
       aria-disabled="false"
@@ -205,7 +205,7 @@ exports[`Radio renders correctly 1`] = `
 
 exports[`Radio renders correctly when checked 1`] = `
 <DocumentFragment>
-  .cache-1r8thn3-Stack {
+  .cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -355,7 +355,7 @@ exports[`Radio renders correctly when checked 1`] = `
 }
 
 <div
-    class="cache-1r8thn3-Stack ehpbis70"
+    class="cache-ymc80m-Stack ehpbis70"
   >
     <div
       aria-disabled="false"
@@ -409,7 +409,7 @@ exports[`Radio renders correctly when checked 1`] = `
 
 exports[`Radio renders correctly when disabled 1`] = `
 <DocumentFragment>
-  .cache-1r8thn3-Stack {
+  .cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -559,7 +559,7 @@ exports[`Radio renders correctly when disabled 1`] = `
 }
 
 <div
-    class="cache-1r8thn3-Stack ehpbis70"
+    class="cache-ymc80m-Stack ehpbis70"
   >
     <div
       aria-disabled="true"
@@ -613,7 +613,7 @@ exports[`Radio renders correctly when disabled 1`] = `
 
 exports[`Radio renders correctly when error 1`] = `
 <DocumentFragment>
-  .cache-1r8thn3-Stack {
+  .cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -763,7 +763,7 @@ exports[`Radio renders correctly when error 1`] = `
 }
 
 <div
-    class="cache-1r8thn3-Stack ehpbis70"
+    class="cache-ymc80m-Stack ehpbis70"
   >
     <div
       aria-disabled="false"
@@ -817,7 +817,7 @@ exports[`Radio renders correctly when error 1`] = `
 
 exports[`Radio renders correctly when helper 1`] = `
 <DocumentFragment>
-  .cache-1r8thn3-Stack {
+  .cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -980,7 +980,7 @@ exports[`Radio renders correctly when helper 1`] = `
 }
 
 <div
-    class="cache-1r8thn3-Stack ehpbis70"
+    class="cache-ymc80m-Stack ehpbis70"
   >
     <div
       aria-disabled="false"
@@ -1046,7 +1046,7 @@ exports[`Radio renders correctly with tooltip 1`] = `
   width: 100%;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1201,7 +1201,7 @@ exports[`Radio renders correctly with tooltip 1`] = `
     tabindex="0"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -1255,7 +1255,7 @@ exports[`Radio renders correctly with tooltip 1`] = `
 
 exports[`Radio renders without name 1`] = `
 <DocumentFragment>
-  .cache-1r8thn3-Stack {
+  .cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1405,7 +1405,7 @@ exports[`Radio renders without name 1`] = `
 }
 
 <div
-    class="cache-1r8thn3-Stack ehpbis70"
+    class="cache-ymc80m-Stack ehpbis70"
   >
     <div
       aria-disabled="true"
diff --git a/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap
index 5c4d7d89fb..f44e60c68d 100644
--- a/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`RadioGroup renders correctly 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -31,7 +31,7 @@ exports[`RadioGroup renders correctly 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -66,7 +66,7 @@ exports[`RadioGroup renders correctly 1`] = `
   text-decoration: none;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -216,13 +216,13 @@ exports[`RadioGroup renders correctly 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e15shfap1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -230,10 +230,10 @@ exports[`RadioGroup renders correctly 1`] = `
           Label 
         </legend>
         <div
-          class="cache-7hpczr-Stack ehpbis70"
+          class="cache-gw33n2-Stack ehpbis70"
         >
           <div
-            class="cache-1r8thn3-Stack ehpbis70"
+            class="cache-ymc80m-Stack ehpbis70"
           >
             <div
               aria-disabled="false"
@@ -283,7 +283,7 @@ exports[`RadioGroup renders correctly 1`] = `
             </div>
           </div>
           <div
-            class="cache-1r8thn3-Stack ehpbis70"
+            class="cache-ymc80m-Stack ehpbis70"
           >
             <div
               aria-disabled="false"
@@ -340,7 +340,7 @@ exports[`RadioGroup renders correctly 1`] = `
 
 exports[`RadioGroup renders correctly with direction row 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -369,7 +369,7 @@ exports[`RadioGroup renders correctly with direction row 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -404,7 +404,7 @@ exports[`RadioGroup renders correctly with direction row 1`] = `
   text-decoration: none;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -427,7 +427,7 @@ exports[`RadioGroup renders correctly with direction row 1`] = `
   flex-wrap: nowrap;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -577,13 +577,13 @@ exports[`RadioGroup renders correctly with direction row 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e15shfap1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -591,10 +591,10 @@ exports[`RadioGroup renders correctly with direction row 1`] = `
           Label 
         </legend>
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         >
           <div
-            class="cache-1r8thn3-Stack ehpbis70"
+            class="cache-ymc80m-Stack ehpbis70"
           >
             <div
               aria-disabled="false"
@@ -644,7 +644,7 @@ exports[`RadioGroup renders correctly with direction row 1`] = `
             </div>
           </div>
           <div
-            class="cache-1r8thn3-Stack ehpbis70"
+            class="cache-ymc80m-Stack ehpbis70"
           >
             <div
               aria-disabled="false"
@@ -701,7 +701,7 @@ exports[`RadioGroup renders correctly with direction row 1`] = `
 
 exports[`RadioGroup renders correctly with error content 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -730,7 +730,7 @@ exports[`RadioGroup renders correctly with error content 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -765,7 +765,7 @@ exports[`RadioGroup renders correctly with error content 1`] = `
   text-decoration: none;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -927,13 +927,13 @@ exports[`RadioGroup renders correctly with error content 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e15shfap1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -941,10 +941,10 @@ exports[`RadioGroup renders correctly with error content 1`] = `
           Label 
         </legend>
         <div
-          class="cache-7hpczr-Stack ehpbis70"
+          class="cache-gw33n2-Stack ehpbis70"
         >
           <div
-            class="cache-1r8thn3-Stack ehpbis70"
+            class="cache-ymc80m-Stack ehpbis70"
           >
             <div
               aria-disabled="false"
@@ -994,7 +994,7 @@ exports[`RadioGroup renders correctly with error content 1`] = `
             </div>
           </div>
           <div
-            class="cache-1r8thn3-Stack ehpbis70"
+            class="cache-ymc80m-Stack ehpbis70"
           >
             <div
               aria-disabled="false"
@@ -1056,7 +1056,7 @@ exports[`RadioGroup renders correctly with error content 1`] = `
 
 exports[`RadioGroup renders correctly with helper content 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1085,7 +1085,7 @@ exports[`RadioGroup renders correctly with helper content 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1120,7 +1120,7 @@ exports[`RadioGroup renders correctly with helper content 1`] = `
   text-decoration: none;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1282,13 +1282,13 @@ exports[`RadioGroup renders correctly with helper content 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e15shfap1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -1296,10 +1296,10 @@ exports[`RadioGroup renders correctly with helper content 1`] = `
           Label 
         </legend>
         <div
-          class="cache-7hpczr-Stack ehpbis70"
+          class="cache-gw33n2-Stack ehpbis70"
         >
           <div
-            class="cache-1r8thn3-Stack ehpbis70"
+            class="cache-ymc80m-Stack ehpbis70"
           >
             <div
               aria-disabled="false"
@@ -1349,7 +1349,7 @@ exports[`RadioGroup renders correctly with helper content 1`] = `
             </div>
           </div>
           <div
-            class="cache-1r8thn3-Stack ehpbis70"
+            class="cache-ymc80m-Stack ehpbis70"
           >
             <div
               aria-disabled="false"
diff --git a/packages/ui/src/components/SelectInput/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/SelectInput/__tests__/__snapshots__/index.tsx.snap
index 8b1ce85001..e5ca2cb303 100644
--- a/packages/ui/src/components/SelectInput/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui/src/components/SelectInput/__tests__/__snapshots__/index.tsx.snap
@@ -235,7 +235,7 @@ exports[`SelectInput renders correctly animated 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -349,7 +349,7 @@ exports[`SelectInput renders correctly animated 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -588,7 +588,7 @@ exports[`SelectInput renders correctly controlled 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -702,7 +702,7 @@ exports[`SelectInput renders correctly controlled 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -941,7 +941,7 @@ exports[`SelectInput renders correctly default values with click 1`] = `
   color: hsl(0, 0%, 20%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1141,7 +1141,7 @@ exports[`SelectInput renders correctly default values with click 1`] = `
           class=" cache-15lsz6c-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -1399,7 +1399,7 @@ exports[`SelectInput renders correctly disabled 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1514,7 +1514,7 @@ exports[`SelectInput renders correctly disabled 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -1734,7 +1734,7 @@ exports[`SelectInput renders correctly disabled with click 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1849,7 +1849,7 @@ exports[`SelectInput renders correctly disabled with click 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -2082,7 +2082,7 @@ exports[`SelectInput renders correctly multi 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2196,7 +2196,7 @@ exports[`SelectInput renders correctly multi 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -2500,7 +2500,7 @@ exports[`SelectInput renders correctly multi disabled 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2622,7 +2622,7 @@ exports[`SelectInput renders correctly multi disabled 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -2856,7 +2856,7 @@ exports[`SelectInput renders correctly required 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2990,7 +2990,7 @@ exports[`SelectInput renders correctly required 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-8ikytl-sizeStyles e1gt4cfo0"
@@ -3240,7 +3240,7 @@ exports[`SelectInput renders correctly timed 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3367,7 +3367,7 @@ exports[`SelectInput renders correctly timed 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <hr
               aria-orientation="vertical"
@@ -3611,7 +3611,7 @@ exports[`SelectInput renders correctly timed with error 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3738,7 +3738,7 @@ exports[`SelectInput renders correctly timed with error 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <hr
               aria-orientation="vertical"
@@ -3982,7 +3982,7 @@ exports[`SelectInput renders correctly uncontrolled 1`] = `
   color: hsl(0, 0%, 20%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4182,7 +4182,7 @@ exports[`SelectInput renders correctly uncontrolled 1`] = `
           class=" cache-15lsz6c-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -4454,7 +4454,7 @@ exports[`SelectInput renders correctly with click 1`] = `
   color: hsl(0, 0%, 20%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4654,7 +4654,7 @@ exports[`SelectInput renders correctly with click 1`] = `
           class=" cache-15lsz6c-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -4926,7 +4926,7 @@ exports[`SelectInput renders correctly with click and option disabled 1`] = `
   color: hsl(0, 0%, 20%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5152,7 +5152,7 @@ exports[`SelectInput renders correctly with click and option disabled 1`] = `
           class=" cache-15lsz6c-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -5436,7 +5436,7 @@ exports[`SelectInput renders correctly with click and options 1`] = `
   color: hsl(0, 0%, 20%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5662,7 +5662,7 @@ exports[`SelectInput renders correctly with click and options 1`] = `
           class=" cache-15lsz6c-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -5946,7 +5946,7 @@ exports[`SelectInput renders correctly with custom styles 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6060,7 +6060,7 @@ exports[`SelectInput renders correctly with custom styles 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -6299,7 +6299,7 @@ exports[`SelectInput renders correctly with emptyState 1`] = `
   color: hsl(0, 0%, 20%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6454,7 +6454,7 @@ exports[`SelectInput renders correctly with emptyState 1`] = `
           class=" cache-15lsz6c-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -6707,7 +6707,7 @@ exports[`SelectInput should render correctly custom isLoading 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6824,7 +6824,7 @@ exports[`SelectInput should render correctly custom isLoading 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -7063,7 +7063,7 @@ exports[`SelectInput should render correctly description and inlineDescription 1
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7177,7 +7177,7 @@ exports[`SelectInput should render correctly description and inlineDescription 1
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -7501,7 +7501,7 @@ exports[`SelectInput should render correctly isLoading 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7629,7 +7629,7 @@ exports[`SelectInput should render correctly isLoading 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -7892,7 +7892,7 @@ exports[`SelectInput should render correctly multi isClearable 1`] = `
   display: none;
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8018,7 +8018,7 @@ exports[`SelectInput should render correctly multi isClearable 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -8259,7 +8259,7 @@ exports[`SelectInput should render correctly multi isClearable disabled 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8372,7 +8372,7 @@ exports[`SelectInput should render correctly multi isClearable disabled 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -8621,7 +8621,7 @@ exports[`SelectInput should render correctly multi isSearchable 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8733,7 +8733,7 @@ exports[`SelectInput should render correctly multi isSearchable 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -8974,7 +8974,7 @@ exports[`SelectInput should render correctly multi isSearchable disabled 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9087,7 +9087,7 @@ exports[`SelectInput should render correctly multi isSearchable disabled 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -9321,7 +9321,7 @@ exports[`SelectInput should render correctly with portal 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9435,7 +9435,7 @@ exports[`SelectInput should render correctly with portal 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
@@ -9677,7 +9677,7 @@ exports[`SelectInput should render correctly without children 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9791,7 +9791,7 @@ exports[`SelectInput should render correctly without children 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
diff --git a/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
index 36add9efaa..0747a4825f 100644
--- a/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
@@ -301,7 +301,7 @@ exports[`SelectableCard renders correctly with checkbox type 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -383,7 +383,7 @@ exports[`SelectableCard renders correctly with checkbox type 1`] = `
         </g>
       </svg>
       <div
-        class="cache-19m27my-Stack ehpbis70"
+        class="cache-113ljh8-Stack ehpbis70"
       >
         <div
           class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -696,7 +696,7 @@ exports[`SelectableCard renders correctly with checkbox type and checked prop 1`
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -779,7 +779,7 @@ exports[`SelectableCard renders correctly with checkbox type and checked prop 1`
         </g>
       </svg>
       <div
-        class="cache-19m27my-Stack ehpbis70"
+        class="cache-113ljh8-Stack ehpbis70"
       >
         <div
           class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -1092,7 +1092,7 @@ exports[`SelectableCard renders correctly with checkbox type and disabled prop 1
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1175,7 +1175,7 @@ exports[`SelectableCard renders correctly with checkbox type and disabled prop 1
         </g>
       </svg>
       <div
-        class="cache-19m27my-Stack ehpbis70"
+        class="cache-113ljh8-Stack ehpbis70"
       >
         <div
           class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -1488,7 +1488,7 @@ exports[`SelectableCard renders correctly with checkbox type and isError prop 1`
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1585,7 +1585,7 @@ exports[`SelectableCard renders correctly with checkbox type and isError prop 1`
         </g>
       </svg>
       <div
-        class="cache-19m27my-Stack ehpbis70"
+        class="cache-113ljh8-Stack ehpbis70"
       >
         <div
           class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -1909,7 +1909,7 @@ exports[`SelectableCard renders correctly with checkbox type and tooltip prop 1`
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1996,7 +1996,7 @@ exports[`SelectableCard renders correctly with checkbox type and tooltip prop 1`
           </g>
         </svg>
         <div
-          class="cache-19m27my-Stack ehpbis70"
+          class="cache-113ljh8-Stack ehpbis70"
         >
           <div
             class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2310,7 +2310,7 @@ exports[`SelectableCard renders correctly with complex children 1`] = `
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2393,7 +2393,7 @@ exports[`SelectableCard renders correctly with complex children 1`] = `
         </g>
       </svg>
       <div
-        class="cache-19m27my-Stack ehpbis70"
+        class="cache-113ljh8-Stack ehpbis70"
       >
         <div
           class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2460,7 +2460,7 @@ exports[`SelectableCard renders correctly with default props 1`] = `
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2643,7 +2643,7 @@ exports[`SelectableCard renders correctly with default props 1`] = `
     data-disabled="false"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -2742,7 +2742,7 @@ exports[`SelectableCard renders correctly with radio type and checked prop 1`] =
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2925,7 +2925,7 @@ exports[`SelectableCard renders correctly with radio type and checked prop 1`] =
     data-disabled="false"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -3025,7 +3025,7 @@ exports[`SelectableCard renders correctly with radio type and disabled prop 1`]
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3208,7 +3208,7 @@ exports[`SelectableCard renders correctly with radio type and disabled prop 1`]
     data-disabled="true"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="true"
@@ -3308,7 +3308,7 @@ exports[`SelectableCard renders correctly with radio type and isError prop 1`] =
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3492,7 +3492,7 @@ exports[`SelectableCard renders correctly with radio type and isError prop 1`] =
     data-error="true"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
@@ -3600,7 +3600,7 @@ exports[`SelectableCard renders correctly with radio type and tooltip prop 1`] =
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3788,7 +3788,7 @@ exports[`SelectableCard renders correctly with radio type and tooltip prop 1`] =
       data-disabled="false"
     >
       <div
-        class="cache-1r8thn3-Stack ehpbis70"
+        class="cache-ymc80m-Stack ehpbis70"
       >
         <div
           aria-disabled="false"
@@ -4130,7 +4130,7 @@ exports[`SelectableCard renders correctly with showTick and type checkbox 1`] =
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4212,7 +4212,7 @@ exports[`SelectableCard renders correctly with showTick and type checkbox 1`] =
         </g>
       </svg>
       <div
-        class="cache-19m27my-Stack ehpbis70"
+        class="cache-113ljh8-Stack ehpbis70"
       >
         <div
           class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -4275,7 +4275,7 @@ exports[`SelectableCard renders correctly with showTick and type radio 1`] = `
   box-shadow: 0px 4px 16px 4px #F6F3FFCC;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4450,7 +4450,7 @@ exports[`SelectableCard renders correctly with showTick and type radio 1`] = `
     data-disabled="false"
   >
     <div
-      class="cache-1r8thn3-Stack ehpbis70"
+      class="cache-ymc80m-Stack ehpbis70"
     >
       <div
         aria-disabled="false"
diff --git a/packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap
index c3dff96dbf..a679e55438 100644
--- a/packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Snippet renders correctly 1`] = `
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -156,7 +156,7 @@ exports[`Snippet renders correctly 1`] = `
     class="cache-1rjf9yl-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <pre
         class="e1q0gj908 cache-1hiu8ya-StyledText-PreText e13y3mga0"
@@ -215,7 +215,7 @@ exports[`Snippet renders correctly in multiline  1`] = `
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -414,7 +414,7 @@ exports[`Snippet renders correctly in multiline  1`] = `
     class="cache-358s5-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <div
         class="cache-1ou0y3f-StyledExpandable e5hc7t70"
@@ -525,7 +525,7 @@ exports[`Snippet renders correctly in multiline with prefix command 1`] = `
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -739,7 +739,7 @@ exports[`Snippet renders correctly in multiline with prefix command 1`] = `
     class="cache-358s5-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <div
         class="cache-1ou0y3f-StyledExpandable e5hc7t70"
@@ -850,7 +850,7 @@ exports[`Snippet renders correctly in multiline with prefix lines number 1`] = `
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1065,7 +1065,7 @@ exports[`Snippet renders correctly in multiline with prefix lines number 1`] = `
     class="cache-358s5-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <div
         class="cache-1ou0y3f-StyledExpandable e5hc7t70"
@@ -1175,7 +1175,7 @@ exports[`Snippet renders correctly with copiedText 1`] = `
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1314,7 +1314,7 @@ exports[`Snippet renders correctly with copiedText 1`] = `
     class="cache-1rjf9yl-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <pre
         class="e1q0gj908 cache-1hiu8ya-StyledText-PreText e13y3mga0"
@@ -1372,7 +1372,7 @@ exports[`Snippet renders correctly with copyText 1`] = `
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1511,7 +1511,7 @@ exports[`Snippet renders correctly with copyText 1`] = `
     class="cache-1rjf9yl-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <pre
         class="e1q0gj908 cache-1hiu8ya-StyledText-PreText e13y3mga0"
@@ -1570,7 +1570,7 @@ exports[`Snippet renders correctly with hideText 1`] = `
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1769,7 +1769,7 @@ exports[`Snippet renders correctly with hideText 1`] = `
     class="cache-358s5-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <div
         class="cache-1ou0y3f-StyledExpandable e5hc7t70"
@@ -1880,7 +1880,7 @@ exports[`Snippet renders correctly with showText 1`] = `
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2079,7 +2079,7 @@ exports[`Snippet renders correctly with showText 1`] = `
     class="cache-358s5-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <div
         class="cache-1ou0y3f-StyledExpandable e5hc7t70"
@@ -2189,7 +2189,7 @@ exports[`Snippet renders correctly with single line with prefix command 1`] = `
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2343,7 +2343,7 @@ exports[`Snippet renders correctly with single line with prefix command 1`] = `
     class="cache-1rjf9yl-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <pre
         class="e1q0gj908 cache-1hiu8ya-StyledText-PreText e13y3mga0"
@@ -2401,7 +2401,7 @@ exports[`Snippet renders correctly with single line with prefix lines number 1`]
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2556,7 +2556,7 @@ exports[`Snippet renders correctly with single line with prefix lines number 1`]
     class="cache-1rjf9yl-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <pre
         class="e1q0gj908 cache-1hiu8ya-StyledText-PreText e13y3mga0"
@@ -2615,7 +2615,7 @@ exports[`Snippet should click on extend button to display full content on  1`] =
   border-radius: 4px;
 }
 
-.cache-cf30m9-Stack-StyledStack {
+.cache-jdits0-Stack-StyledStack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2814,7 +2814,7 @@ exports[`Snippet should click on extend button to display full content on  1`] =
     class="cache-358s5-Container e1q0gj906"
   >
     <div
-      class="cache-cf30m9-Stack-StyledStack e1q0gj905"
+      class="cache-jdits0-Stack-StyledStack e1q0gj905"
     >
       <div
         class="cache-rk9ngy-StyledExpandable e5hc7t70"
diff --git a/packages/ui/src/components/Stack/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Stack/__tests__/__snapshots__/index.test.tsx.snap
index e705d7a48c..23e8913049 100644
--- a/packages/ui/src/components/Stack/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Stack/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Stack should render correctly with alignCenter 1`] = `
 <DocumentFragment>
-  .cache-1i7e9sg-Stack {
+  .cache-1l6mcrb-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -26,7 +26,7 @@ exports[`Stack should render correctly with alignCenter 1`] = `
 }
 
 <div
-    class="cache-1i7e9sg-Stack ehpbis70"
+    class="cache-1l6mcrb-Stack ehpbis70"
   >
     <div>
       first child
@@ -40,7 +40,7 @@ exports[`Stack should render correctly with alignCenter 1`] = `
 
 exports[`Stack should render correctly with default props 1`] = `
 <DocumentFragment>
-  .cache-11tw670-Stack {
+  .cache-1guc91g-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -64,7 +64,7 @@ exports[`Stack should render correctly with default props 1`] = `
 }
 
 <div
-    class="cache-11tw670-Stack ehpbis70"
+    class="cache-1guc91g-Stack ehpbis70"
   >
     <div>
       first child
@@ -79,9 +79,51 @@ exports[`Stack should render correctly with default props 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Stack should render correctly with flex 1 1`] = `
+<DocumentFragment>
+  .cache-10fpg8v-Stack {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+<div
+    class="cache-10fpg8v-Stack ehpbis70"
+    flex="1"
+  >
+    <div>
+      first child
+    </div>
+    <div>
+      second child
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Stack should render correctly with row direction 1`] = `
 <DocumentFragment>
-  .cache-1jx9yod-Stack {
+  .cache-1tfad1c-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -105,7 +147,7 @@ exports[`Stack should render correctly with row direction 1`] = `
 }
 
 <div
-    class="cache-1jx9yod-Stack ehpbis70"
+    class="cache-1tfad1c-Stack ehpbis70"
   >
     <div>
       first child
@@ -120,9 +162,49 @@ exports[`Stack should render correctly with row direction 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Stack should render correctly with width 100% 1`] = `
+<DocumentFragment>
+  .cache-1sg8g9d-Stack {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+<div
+    class="cache-1sg8g9d-Stack ehpbis70"
+    width="100%"
+  >
+    <div>
+      first child
+    </div>
+    <div>
+      second child
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Stack should render correctly with wrap as boolean 1`] = `
 <DocumentFragment>
-  .cache-1hg4n6q-Stack {
+  .cache-1w45fx4-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -146,7 +228,7 @@ exports[`Stack should render correctly with wrap as boolean 1`] = `
 }
 
 <div
-    class="cache-1hg4n6q-Stack ehpbis70"
+    class="cache-1w45fx4-Stack ehpbis70"
   >
     <div>
       first child
@@ -160,7 +242,7 @@ exports[`Stack should render correctly with wrap as boolean 1`] = `
 
 exports[`Stack should render correctly with wrap as string 1`] = `
 <DocumentFragment>
-  .cache-tao90g-Stack {
+  .cache-1b660pb-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -184,7 +266,7 @@ exports[`Stack should render correctly with wrap as string 1`] = `
 }
 
 <div
-    class="cache-tao90g-Stack ehpbis70"
+    class="cache-1b660pb-Stack ehpbis70"
   >
     <div>
       first child
diff --git a/packages/ui/src/components/Stack/__tests__/index.test.tsx b/packages/ui/src/components/Stack/__tests__/index.test.tsx
index 70e81c55d5..8226043c9b 100644
--- a/packages/ui/src/components/Stack/__tests__/index.test.tsx
+++ b/packages/ui/src/components/Stack/__tests__/index.test.tsx
@@ -44,4 +44,20 @@ describe('Stack', () => {
         <div>second child</div>
       </Stack>,
     ))
+
+  test(`should render correctly with width 100%`, () =>
+    shouldMatchEmotionSnapshot(
+      <Stack width="100%">
+        <div>first child</div>
+        <div>second child</div>
+      </Stack>,
+    ))
+
+  test(`should render correctly with flex 1`, () =>
+    shouldMatchEmotionSnapshot(
+      <Stack flex="1">
+        <div>first child</div>
+        <div>second child</div>
+      </Stack>,
+    ))
 })
diff --git a/packages/ui/src/components/Stack/index.tsx b/packages/ui/src/components/Stack/index.tsx
index 611d2e83b2..3a03a26685 100644
--- a/packages/ui/src/components/Stack/index.tsx
+++ b/packages/ui/src/components/Stack/index.tsx
@@ -8,6 +8,8 @@ type StackProps = {
   alignItems?: CSSProperties['alignItems']
   justifyContent?: CSSProperties['justifyContent']
   wrap?: boolean | CSSProperties['flexWrap']
+  width?: CSSProperties['width']
+  flex?: CSSProperties['flex']
   className?: string
   children: ReactNode
   'data-testid'?: string
@@ -28,11 +30,15 @@ export const Stack = styled('div', {
     alignItems = 'normal',
     justifyContent = 'normal',
     wrap = 'nowrap',
+    width,
+    flex,
   }) => `
     gap: ${theme.space[gap as keyof SCWUITheme['space']]};
     flex-direction: ${direction};
     align-items: ${alignItems};
     justify-content: ${justifyContent};
     flex-wrap: ${typeof wrap === 'boolean' ? 'wrap' : wrap};
+    ${flex ? `flex: ${flex};` : ''}
+    ${width ? `width: ${width};` : ''}
   `}
 `
diff --git a/packages/ui/src/components/SwitchButton/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SwitchButton/__tests__/__snapshots__/index.test.tsx.snap
index 336ea0644a..4dfc0bd4b9 100644
--- a/packages/ui/src/components/SwitchButton/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/SwitchButton/__tests__/__snapshots__/index.test.tsx.snap
@@ -198,7 +198,7 @@ exports[`SwitchButton renders correctly 1`] = `
   color: #521094;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -383,7 +383,7 @@ exports[`SwitchButton renders correctly 1`] = `
         data-disabled="false"
       >
         <div
-          class="cache-1r8thn3-Stack ehpbis70"
+          class="cache-ymc80m-Stack ehpbis70"
         >
           <div
             aria-disabled="false"
@@ -438,7 +438,7 @@ exports[`SwitchButton renders correctly 1`] = `
         data-disabled="false"
       >
         <div
-          class="cache-1r8thn3-Stack ehpbis70"
+          class="cache-ymc80m-Stack ehpbis70"
         >
           <div
             aria-disabled="false"
@@ -595,7 +595,7 @@ exports[`SwitchButton renders correctly with right value 1`] = `
   color: #521094;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -780,7 +780,7 @@ exports[`SwitchButton renders correctly with right value 1`] = `
         data-disabled="false"
       >
         <div
-          class="cache-1r8thn3-Stack ehpbis70"
+          class="cache-ymc80m-Stack ehpbis70"
         >
           <div
             aria-disabled="false"
@@ -835,7 +835,7 @@ exports[`SwitchButton renders correctly with right value 1`] = `
         data-disabled="false"
       >
         <div
-          class="cache-1r8thn3-Stack ehpbis70"
+          class="cache-ymc80m-Stack ehpbis70"
         >
           <div
             aria-disabled="false"
@@ -1000,7 +1000,7 @@ exports[`SwitchButton renders with tooltip 1`] = `
   color: #521094;
 }
 
-.cache-1r8thn3-Stack {
+.cache-ymc80m-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1190,7 +1190,7 @@ exports[`SwitchButton renders with tooltip 1`] = `
           data-disabled="false"
         >
           <div
-            class="cache-1r8thn3-Stack ehpbis70"
+            class="cache-ymc80m-Stack ehpbis70"
           >
             <div
               aria-disabled="false"
@@ -1245,7 +1245,7 @@ exports[`SwitchButton renders with tooltip 1`] = `
           data-disabled="false"
         >
           <div
-            class="cache-1r8thn3-Stack ehpbis70"
+            class="cache-ymc80m-Stack ehpbis70"
           >
             <div
               aria-disabled="false"
diff --git a/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
index 08a5f8ce4f..094f34d833 100644
--- a/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -2426,7 +2426,7 @@ exports[`Table Should render correctly with selectable then click on first row t
   stroke: #d9dadd;
 }
 
-.cache-19m27my-Stack {
+.cache-113ljh8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2546,7 +2546,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2657,7 +2657,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2741,7 +2741,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2825,7 +2825,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2909,7 +2909,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -2993,7 +2993,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3077,7 +3077,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3161,7 +3161,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3245,7 +3245,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3329,7 +3329,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3413,7 +3413,7 @@ exports[`Table Should render correctly with selectable then click on first row t
                 </g>
               </svg>
               <div
-                class="cache-19m27my-Stack ehpbis70"
+                class="cache-113ljh8-Stack ehpbis70"
               >
                 <div
                   class="cache-1x9cp5u-StyledRow e3f5lzv0"
@@ -3504,7 +3504,7 @@ exports[`Table Should render correctly with sort then click 1`] = `
   gap: 8px;
 }
 
-.cache-325e3p-Stack-StyledIconContainer {
+.cache-p1qzel-Stack-StyledIconContainer {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3528,11 +3528,11 @@ exports[`Table Should render correctly with sort then click 1`] = `
   color: #727683;
 }
 
-.cache-325e3p-Stack-StyledIconContainer[aria-disabled='true'] {
+.cache-p1qzel-Stack-StyledIconContainer[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.cache-325e3p-Stack-StyledIconContainer[role*='button'] {
+.cache-p1qzel-Stack-StyledIconContainer[role*='button'] {
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -3605,7 +3605,7 @@ exports[`Table Should render correctly with sort then click 1`] = `
             >
               Column 1
               <div
-                class="cache-325e3p-Stack-StyledIconContainer ev6jkq82"
+                class="cache-p1qzel-Stack-StyledIconContainer ev6jkq82"
               >
                 <svg
                   class="cache-61dw6k-sizeStyles e1gt4cfo0"
@@ -3637,7 +3637,7 @@ exports[`Table Should render correctly with sort then click 1`] = `
             >
               Column 2
               <div
-                class="cache-325e3p-Stack-StyledIconContainer ev6jkq82"
+                class="cache-p1qzel-Stack-StyledIconContainer ev6jkq82"
               >
                 <svg
                   class="cache-10gwzu7-sizeStyles e1gt4cfo0"
@@ -3668,7 +3668,7 @@ exports[`Table Should render correctly with sort then click 1`] = `
             >
               Column 3
               <div
-                class="cache-325e3p-Stack-StyledIconContainer ev6jkq82"
+                class="cache-p1qzel-Stack-StyledIconContainer ev6jkq82"
               >
                 <svg
                   class="cache-61dw6k-sizeStyles e1gt4cfo0"
@@ -3699,7 +3699,7 @@ exports[`Table Should render correctly with sort then click 1`] = `
             >
               Column 4
               <div
-                class="cache-325e3p-Stack-StyledIconContainer ev6jkq82"
+                class="cache-p1qzel-Stack-StyledIconContainer ev6jkq82"
               >
                 <svg
                   class="cache-61dw6k-sizeStyles e1gt4cfo0"
@@ -3730,7 +3730,7 @@ exports[`Table Should render correctly with sort then click 1`] = `
             >
               Column 5
               <div
-                class="cache-325e3p-Stack-StyledIconContainer ev6jkq82"
+                class="cache-p1qzel-Stack-StyledIconContainer ev6jkq82"
               >
                 <svg
                   class="cache-61dw6k-sizeStyles e1gt4cfo0"
diff --git a/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap
index 0e6f41fe11..d3f2f7d0f8 100644
--- a/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -113,7 +113,7 @@ exports[`TextInput should handle events on random button 1`] = `
   box-shadow: none!important;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -230,7 +230,7 @@ exports[`TextInput should handle events on random button 1`] = `
         class="cache-i0z4cq-StyledRightElement-StyledRightElement-StyledRightElement el3h3g97"
       >
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <button
             aria-label="randomize"
@@ -374,7 +374,7 @@ exports[`TextInput should handle events on toggleable password 1`] = `
   box-shadow: none!important;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -491,7 +491,7 @@ exports[`TextInput should handle events on toggleable password 1`] = `
         class="cache-i0z4cq-StyledRightElement-StyledRightElement-StyledRightElement el3h3g97"
       >
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <button
             aria-label="show"
@@ -2807,7 +2807,7 @@ exports[`TextInput should render correctly with multiple right components 1`] =
   background-color: #e9eaeb;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2965,7 +2965,7 @@ exports[`TextInput should render correctly with multiple right components 1`] =
           role="separator"
         />
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <button
             aria-label="show"
@@ -3143,7 +3143,7 @@ exports[`TextInput should render correctly with notice 1`] = `
   padding-top: 2px;
 }
 
-.cache-y2s7ex-Stack-StyledNotice {
+.cache-1ul7jq-Stack-StyledNotice {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3214,7 +3214,7 @@ exports[`TextInput should render correctly with notice 1`] = `
       />
     </div>
     <div
-      class="el3h3g93 cache-y2s7ex-Stack-StyledNotice ehpbis70"
+      class="el3h3g93 cache-1ul7jq-Stack-StyledNotice ehpbis70"
     >
       <svg
         class="cache-k1vg20-sizeStyles e1gt4cfo0"
@@ -3684,7 +3684,7 @@ exports[`TextInput should render correctly with unit is px 1`] = `
   background-color: #e9eaeb;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3763,7 +3763,7 @@ exports[`TextInput should render correctly with unit is px 1`] = `
           role="separator"
         />
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <p
             class="el3h3g90 cache-1uooiep-StyledText-UnitLabel e13y3mga0"
@@ -3921,7 +3921,7 @@ exports[`TextInput should render correctly with unit is px and required 1`] = `
   background-color: #e9eaeb;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4008,7 +4008,7 @@ exports[`TextInput should render correctly with unit is px and required 1`] = `
           role="separator"
         />
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <p
             class="el3h3g90 cache-1uooiep-StyledText-UnitLabel e13y3mga0"
@@ -4143,7 +4143,7 @@ exports[`TextInput should render correctly with valid false 1`] = `
   color: #3f4250;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4212,7 +4212,7 @@ exports[`TextInput should render correctly with valid false 1`] = `
         class="cache-1539on3-StyledRightElement-StyledRightElement el3h3g97"
       >
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <svg
             class="cache-4q9g5e-sizeStyles e1gt4cfo0"
@@ -4350,7 +4350,7 @@ exports[`TextInput should render correctly with valid false 2`] = `
   color: #3f4250;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4419,7 +4419,7 @@ exports[`TextInput should render correctly with valid false 2`] = `
         class="cache-1539on3-StyledRightElement-StyledRightElement el3h3g97"
       >
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <svg
             class="cache-4q9g5e-sizeStyles e1gt4cfo0"
@@ -4557,7 +4557,7 @@ exports[`TextInput should render correctly with valid true 1`] = `
   color: #3f4250;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4626,7 +4626,7 @@ exports[`TextInput should render correctly with valid true 1`] = `
         class="cache-1539on3-StyledRightElement-StyledRightElement el3h3g97"
       >
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <svg
             class="cache-ksecsa-sizeStyles e1gt4cfo0"
@@ -4764,7 +4764,7 @@ exports[`TextInput should render correctly with valid true 2`] = `
   color: #3f4250;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4833,7 +4833,7 @@ exports[`TextInput should render correctly with valid true 2`] = `
         class="cache-1539on3-StyledRightElement-StyledRightElement el3h3g97"
       >
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <svg
             class="cache-ksecsa-sizeStyles e1gt4cfo0"
@@ -5246,7 +5246,7 @@ exports[`TextInput should render random 1`] = `
   box-shadow: none!important;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5362,7 +5362,7 @@ exports[`TextInput should render random 1`] = `
         class="cache-i0z4cq-StyledRightElement-StyledRightElement-StyledRightElement el3h3g97"
       >
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <button
             aria-label="randomize"
@@ -5517,7 +5517,7 @@ exports[`TextInput should render random 2`] = `
   box-shadow: none!important;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5633,7 +5633,7 @@ exports[`TextInput should render random 2`] = `
         class="cache-i0z4cq-StyledRightElement-StyledRightElement-StyledRightElement el3h3g97"
       >
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <button
             aria-label="randomize"
@@ -5800,7 +5800,7 @@ exports[`TextInput should render random with required 1`] = `
   background-color: #e9eaeb;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5929,7 +5929,7 @@ exports[`TextInput should render random with required 1`] = `
           role="separator"
         />
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <button
             aria-label="randomize"
@@ -6072,7 +6072,7 @@ exports[`TextInput should render toggleable password 1`] = `
   box-shadow: none!important;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6188,7 +6188,7 @@ exports[`TextInput should render toggleable password 1`] = `
         class="cache-i0z4cq-StyledRightElement-StyledRightElement-StyledRightElement el3h3g97"
       >
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <button
             aria-label="show"
@@ -6354,7 +6354,7 @@ exports[`TextInput should render toggleable password with required 1`] = `
   background-color: #e9eaeb;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6483,7 +6483,7 @@ exports[`TextInput should render toggleable password with required 1`] = `
           role="separator"
         />
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <button
             aria-label="show"
@@ -6650,7 +6650,7 @@ exports[`TextInput should render unit with required 1`] = `
   background-color: #e9eaeb;
 }
 
-.cache-18q3x76-Stack-RightComponent {
+.cache-1128fcb-Stack-RightComponent {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6737,7 +6737,7 @@ exports[`TextInput should render unit with required 1`] = `
           role="separator"
         />
         <div
-          class="cache-18q3x76-Stack-RightComponent el3h3g91"
+          class="cache-1128fcb-Stack-RightComponent el3h3g91"
         >
           <p
             class="el3h3g90 cache-1uooiep-StyledText-UnitLabel e13y3mga0"
diff --git a/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.test.tsx.snap
index 28a1bea65d..85799c6a0e 100644
--- a/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -224,7 +224,7 @@ exports[`TimeInput renders correctly with base props 1`] = `
   color: hsl(0, 0%, 60%);
 }
 
-.cache-we9r3h-Stack {
+.cache-irytw7-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -349,7 +349,7 @@ exports[`TimeInput renders correctly with base props 1`] = `
           class=" cache-1xc3v61-indicatorContainer"
         >
           <div
-            class="cache-we9r3h-Stack ehpbis70"
+            class="cache-irytw7-Stack ehpbis70"
           >
             <hr
               aria-orientation="vertical"
diff --git a/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap
index b6e29a8aa7..3b59087287 100644
--- a/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Toaster renders correctly with all kind of toast 1`] = `
 [
-  .cache-6874q2-Stack {
+  .cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -52,7 +52,7 @@ exports[`Toaster renders correctly with all kind of toast 1`] = `
   >
     <div>
       <div
-        class="cache-6874q2-Stack ehpbis70"
+        class="cache-4lkpn5-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -70,7 +70,7 @@ exports[`Toaster renders correctly with all kind of toast 1`] = `
       </div>
     </div>
   </div>,
-  .cache-6874q2-Stack {
+  .cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -120,7 +120,7 @@ exports[`Toaster renders correctly with all kind of toast 1`] = `
   >
     <div>
       <div
-        class="cache-6874q2-Stack ehpbis70"
+        class="cache-4lkpn5-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -138,7 +138,7 @@ exports[`Toaster renders correctly with all kind of toast 1`] = `
       </div>
     </div>
   </div>,
-  .cache-6874q2-Stack {
+  .cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -188,7 +188,7 @@ exports[`Toaster renders correctly with all kind of toast 1`] = `
   >
     <div>
       <div
-        class="cache-6874q2-Stack ehpbis70"
+        class="cache-4lkpn5-Stack ehpbis70"
       >
         <svg
           class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -255,7 +255,7 @@ exports[`Toaster renders correctly with all kind of toast 2`] = `
   background-color: #e51963;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -360,7 +360,7 @@ exports[`Toaster renders correctly with all kind of toast 2`] = `
         >
           <div>
             <div
-              class="cache-6874q2-Stack ehpbis70"
+              class="cache-4lkpn5-Stack ehpbis70"
             >
               <svg
                 class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -410,7 +410,7 @@ exports[`Toaster renders correctly with all kind of toast 2`] = `
         >
           <div>
             <div
-              class="cache-6874q2-Stack ehpbis70"
+              class="cache-4lkpn5-Stack ehpbis70"
             >
               <svg
                 class="cache-bqy7up-sizeStyles e1gt4cfo0"
@@ -460,7 +460,7 @@ exports[`Toaster renders correctly with all kind of toast 2`] = `
         >
           <div>
             <div
-              class="cache-6874q2-Stack ehpbis70"
+              class="cache-4lkpn5-Stack ehpbis70"
             >
               <svg
                 class="cache-bqy7up-sizeStyles e1gt4cfo0"
diff --git a/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap
index ed4ba0bcd0..6dc2c08aff 100644
--- a/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`Toggle renders correctly 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -150,7 +150,7 @@ exports[`Toggle renders correctly 1`] = `
     class="cache-r95p0q-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     />
     <div
       class="cache-1fqyjci-StyledToggle e1wstm612"
@@ -200,7 +200,7 @@ exports[`Toggle renders correctly label 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -334,7 +334,7 @@ exports[`Toggle renders correctly label 1`] = `
     class="cache-r95p0q-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     >
       <div
         class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -390,7 +390,7 @@ exports[`Toggle renders correctly when checked 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -510,7 +510,7 @@ exports[`Toggle renders correctly when checked 1`] = `
     class="cache-r95p0q-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     />
     <div
       class="cache-1fqyjci-StyledToggle e1wstm612"
@@ -561,7 +561,7 @@ exports[`Toggle renders correctly when disabled 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -681,7 +681,7 @@ exports[`Toggle renders correctly when disabled 1`] = `
     class="cache-r95p0q-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     />
     <div
       class="cache-1fqyjci-StyledToggle e1wstm612"
@@ -732,7 +732,7 @@ exports[`Toggle renders correctly when required with label 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -875,7 +875,7 @@ exports[`Toggle renders correctly when required with label 1`] = `
     class="cache-r95p0q-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     >
       <div
         class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -941,7 +941,7 @@ exports[`Toggle renders correctly when required with label left 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1084,7 +1084,7 @@ exports[`Toggle renders correctly when required with label left 1`] = `
     class="cache-1gksb9y-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     >
       <div
         class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -1150,7 +1150,7 @@ exports[`Toggle renders correctly with complex label 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1284,7 +1284,7 @@ exports[`Toggle renders correctly with complex label 1`] = `
     class="cache-r95p0q-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     >
       <div
         class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -1342,7 +1342,7 @@ exports[`Toggle renders correctly with custom labels on right 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1476,7 +1476,7 @@ exports[`Toggle renders correctly with custom labels on right 1`] = `
     class="cache-r95p0q-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     >
       <div
         class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -1532,7 +1532,7 @@ exports[`Toggle renders correctly with helper 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1678,7 +1678,7 @@ exports[`Toggle renders correctly with helper 1`] = `
     class="cache-r95p0q-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     >
       <div
         class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -1739,7 +1739,7 @@ exports[`Toggle renders correctly with labels on left 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1873,7 +1873,7 @@ exports[`Toggle renders correctly with labels on left 1`] = `
     class="cache-1gksb9y-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     >
       <div
         class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -1929,7 +1929,7 @@ exports[`Toggle renders correctly with non default size 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2049,7 +2049,7 @@ exports[`Toggle renders correctly with non default size 1`] = `
     class="cache-hfh15c-StyledLabel e1wstm610"
   >
     <div
-      class="cache-13wfq9z-Stack ehpbis70"
+      class="cache-155uuxj-Stack ehpbis70"
     />
     <div
       class="cache-u2ifpt-StyledToggle e1wstm612"
@@ -2107,7 +2107,7 @@ exports[`Toggle renders correctly with tooltip 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2246,7 +2246,7 @@ exports[`Toggle renders correctly with tooltip 1`] = `
       class="cache-r95p0q-StyledLabel e1wstm610"
     >
       <div
-        class="cache-13wfq9z-Stack ehpbis70"
+        class="cache-155uuxj-Stack ehpbis70"
       >
         <div
           class="cache-15fwcc4-StyledRow e3f5lzv0"
diff --git a/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap
index 400bfc931c..4871875a10 100644
--- a/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ToggleGroup renders correctly 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -31,7 +31,7 @@ exports[`ToggleGroup renders correctly 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -66,7 +66,7 @@ exports[`ToggleGroup renders correctly 1`] = `
   text-decoration: none;
 }
 
-.cache-1tbrwzr-Stack {
+.cache-zl3m0r-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -117,7 +117,7 @@ exports[`ToggleGroup renders correctly 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -247,13 +247,13 @@ exports[`ToggleGroup renders correctly 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1qvneex1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -261,14 +261,14 @@ exports[`ToggleGroup renders correctly 1`] = `
           Label 
         </legend>
         <div
-          class="cache-1tbrwzr-Stack ehpbis70"
+          class="cache-zl3m0r-Stack ehpbis70"
         >
           <label
             aria-disabled="false"
             class="cache-r95p0q-StyledLabel e1wstm610"
           >
             <div
-              class="cache-13wfq9z-Stack ehpbis70"
+              class="cache-155uuxj-Stack ehpbis70"
             >
               <div
                 class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -296,7 +296,7 @@ exports[`ToggleGroup renders correctly 1`] = `
             class="cache-r95p0q-StyledLabel e1wstm610"
           >
             <div
-              class="cache-13wfq9z-Stack ehpbis70"
+              class="cache-155uuxj-Stack ehpbis70"
             >
               <div
                 class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -328,7 +328,7 @@ exports[`ToggleGroup renders correctly 1`] = `
 
 exports[`ToggleGroup renders correctly with direction row 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -357,7 +357,7 @@ exports[`ToggleGroup renders correctly with direction row 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -392,7 +392,7 @@ exports[`ToggleGroup renders correctly with direction row 1`] = `
   text-decoration: none;
 }
 
-.cache-6874q2-Stack {
+.cache-4lkpn5-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -443,7 +443,7 @@ exports[`ToggleGroup renders correctly with direction row 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -573,13 +573,13 @@ exports[`ToggleGroup renders correctly with direction row 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1qvneex1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -587,14 +587,14 @@ exports[`ToggleGroup renders correctly with direction row 1`] = `
           Label 
         </legend>
         <div
-          class="cache-6874q2-Stack ehpbis70"
+          class="cache-4lkpn5-Stack ehpbis70"
         >
           <label
             aria-disabled="false"
             class="cache-r95p0q-StyledLabel e1wstm610"
           >
             <div
-              class="cache-13wfq9z-Stack ehpbis70"
+              class="cache-155uuxj-Stack ehpbis70"
             >
               <div
                 class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -622,7 +622,7 @@ exports[`ToggleGroup renders correctly with direction row 1`] = `
             class="cache-r95p0q-StyledLabel e1wstm610"
           >
             <div
-              class="cache-13wfq9z-Stack ehpbis70"
+              class="cache-155uuxj-Stack ehpbis70"
             >
               <div
                 class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -654,7 +654,7 @@ exports[`ToggleGroup renders correctly with direction row 1`] = `
 
 exports[`ToggleGroup renders correctly with error content 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -683,7 +683,7 @@ exports[`ToggleGroup renders correctly with error content 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -718,7 +718,7 @@ exports[`ToggleGroup renders correctly with error content 1`] = `
   text-decoration: none;
 }
 
-.cache-1tbrwzr-Stack {
+.cache-zl3m0r-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -769,7 +769,7 @@ exports[`ToggleGroup renders correctly with error content 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -911,13 +911,13 @@ exports[`ToggleGroup renders correctly with error content 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1qvneex1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -925,14 +925,14 @@ exports[`ToggleGroup renders correctly with error content 1`] = `
           Label 
         </legend>
         <div
-          class="cache-1tbrwzr-Stack ehpbis70"
+          class="cache-zl3m0r-Stack ehpbis70"
         >
           <label
             aria-disabled="false"
             class="cache-r95p0q-StyledLabel e1wstm610"
           >
             <div
-              class="cache-13wfq9z-Stack ehpbis70"
+              class="cache-155uuxj-Stack ehpbis70"
             >
               <div
                 class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -960,7 +960,7 @@ exports[`ToggleGroup renders correctly with error content 1`] = `
             class="cache-r95p0q-StyledLabel e1wstm610"
           >
             <div
-              class="cache-13wfq9z-Stack ehpbis70"
+              class="cache-155uuxj-Stack ehpbis70"
             >
               <div
                 class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -997,7 +997,7 @@ exports[`ToggleGroup renders correctly with error content 1`] = `
 
 exports[`ToggleGroup renders correctly with helper content 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1026,7 +1026,7 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1061,7 +1061,7 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
   text-decoration: none;
 }
 
-.cache-1tbrwzr-Stack {
+.cache-zl3m0r-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1112,7 +1112,7 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1254,13 +1254,13 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1qvneex1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -1268,14 +1268,14 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
           Label 
         </legend>
         <div
-          class="cache-1tbrwzr-Stack ehpbis70"
+          class="cache-zl3m0r-Stack ehpbis70"
         >
           <label
             aria-disabled="false"
             class="cache-r95p0q-StyledLabel e1wstm610"
           >
             <div
-              class="cache-13wfq9z-Stack ehpbis70"
+              class="cache-155uuxj-Stack ehpbis70"
             >
               <div
                 class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -1303,7 +1303,7 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
             class="cache-r95p0q-StyledLabel e1wstm610"
           >
             <div
-              class="cache-13wfq9z-Stack ehpbis70"
+              class="cache-155uuxj-Stack ehpbis70"
             >
               <div
                 class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -1340,7 +1340,7 @@ exports[`ToggleGroup renders correctly with helper content 1`] = `
 
 exports[`ToggleGroup renders correctly with required prop 1`] = `
 <DocumentFragment>
-  .cache-7hpczr-Stack {
+  .cache-gw33n2-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1369,7 +1369,7 @@ exports[`ToggleGroup renders correctly with required prop 1`] = `
   margin: 0;
 }
 
-.cache-zfnlb8-Stack {
+.cache-oey408-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1414,7 +1414,7 @@ exports[`ToggleGroup renders correctly with required prop 1`] = `
   vertical-align: super;
 }
 
-.cache-1tbrwzr-Stack {
+.cache-zl3m0r-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1465,7 +1465,7 @@ exports[`ToggleGroup renders correctly with required prop 1`] = `
   color: #b5b7bd;
 }
 
-.cache-13wfq9z-Stack {
+.cache-155uuxj-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1595,13 +1595,13 @@ exports[`ToggleGroup renders correctly with required prop 1`] = `
 }
 
 <div
-    class="cache-7hpczr-Stack ehpbis70"
+    class="cache-gw33n2-Stack ehpbis70"
   >
     <fieldset
       class="cache-103llo5-FieldSet e1qvneex1"
     >
       <div
-        class="cache-zfnlb8-Stack ehpbis70"
+        class="cache-oey408-Stack ehpbis70"
       >
         <legend
           class="cache-vjvakd-StyledText e13y3mga0"
@@ -1617,14 +1617,14 @@ exports[`ToggleGroup renders correctly with required prop 1`] = `
           </svg>
         </legend>
         <div
-          class="cache-1tbrwzr-Stack ehpbis70"
+          class="cache-zl3m0r-Stack ehpbis70"
         >
           <label
             aria-disabled="false"
             class="cache-r95p0q-StyledLabel e1wstm610"
           >
             <div
-              class="cache-13wfq9z-Stack ehpbis70"
+              class="cache-155uuxj-Stack ehpbis70"
             >
               <div
                 class="cache-15fwcc4-StyledRow e3f5lzv0"
@@ -1652,7 +1652,7 @@ exports[`ToggleGroup renders correctly with required prop 1`] = `
             class="cache-r95p0q-StyledLabel e1wstm610"
           >
             <div
-              class="cache-13wfq9z-Stack ehpbis70"
+              class="cache-155uuxj-Stack ehpbis70"
             >
               <div
                 class="cache-15fwcc4-StyledRow e3f5lzv0"