From 2e020dc87b118db340c97eb961f1a7c62f3139b8 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 30 Nov 2021 15:15:40 +0100
Subject: [PATCH] chore(devdeps): update emotion monorepo to v11.7.0 (#939)

* chore(devdeps): update emotion monorepo to v11.7.0

* fix: upgrade jest helpers

* fix: update snaps

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Emmanuel Chambon <echambon@scaleway.com>
---
 package.json                                  |   8 +-
 .../__tests__/__snapshots__/index.tsx.snap    |  32 +-
 .../__tests__/__snapshots__/index.tsx.snap    |  56 ++--
 .../__tests__/__snapshots__/index.tsx.snap    | 280 +++++++++---------
 .../__snapshots__/index.test.tsx.snap         |  18 +-
 .../__tests__/__snapshots__/index.tsx.snap    |  74 ++---
 .../__tests__/__snapshots__/index.tsx.snap    |  76 ++---
 .../__tests__/__snapshots__/index.tsx.snap    | 148 ++++-----
 yarn.lock                                     |  36 +--
 9 files changed, 364 insertions(+), 364 deletions(-)

diff --git a/package.json b/package.json
index 2090bbada9..a3e56a7983 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
     }
   },
   "peerDependencies": {
-    "@emotion/react": "11.6.0",
+    "@emotion/react": "11.7.0",
     "@emotion/styled": "11.6.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
@@ -103,15 +103,15 @@
     "@commitlint/config-conventional": "15.0.0",
     "@emotion/babel-preset-css-prop": "11.2.0",
     "@emotion/cache": "11.6.0",
-    "@emotion/eslint-plugin": "11.5.0",
+    "@emotion/eslint-plugin": "11.7.0",
     "@emotion/jest": "11.6.0",
-    "@emotion/react": "11.6.0",
+    "@emotion/react": "11.7.0",
     "@emotion/styled": "11.6.0",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-node-resolve": "13.0.6",
     "@rollup/plugin-url": "6.1.0",
     "@scaleway/eslint-config-react": "3.0.0",
-    "@scaleway/jest-helpers": "1.1.4",
+    "@scaleway/jest-helpers": "1.1.5",
     "@scaleway/use-i18n": "3.1.23",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/commit-analyzer": "9.0.2",
diff --git a/src/components/Container/__tests__/__snapshots__/index.tsx.snap b/src/components/Container/__tests__/__snapshots__/index.tsx.snap
index 58e444bd72..3db9fbff91 100644
--- a/src/components/Container/__tests__/__snapshots__/index.tsx.snap
+++ b/src/components/Container/__tests__/__snapshots__/index.tsx.snap
@@ -49,7 +49,7 @@ exports[`Container renders correctly 1`] = `
   margin-right: 16px;
 }
 
-.cache-1jlksc5-Container {
+.cache-h4rrr2 {
   padding: 24px;
   border-radius: 4px;
   border: 1px solid #d4dae7;
@@ -62,11 +62,11 @@ exports[`Container renders correctly 1`] = `
   cursor: default;
 }
 
-.cache-1jlksc5-Container>* {
+.cache-h4rrr2>* {
   margin-top: 0;
 }
 
-.cache-1jlksc5-Container>*+* {
+.cache-h4rrr2>*+* {
   margin-top: 16px;
 }
 
@@ -86,7 +86,7 @@ exports[`Container renders correctly 1`] = `
       <div />
     </div>
     <div
-      class="elb23zt0 cache-1jlksc5-Container e7ah3bn0"
+      class="elb23zt0 cache-h4rrr2 e7ah3bn0"
     >
       Hello
     </div>
@@ -143,7 +143,7 @@ exports[`Container renders correctly on edition mode 1`] = `
   margin-right: 16px;
 }
 
-.cache-7hen1z-Container {
+.cache-haz2zf {
   padding: 24px;
   border-radius: 4px;
   border: 1px solid #d4dae7;
@@ -156,11 +156,11 @@ exports[`Container renders correctly on edition mode 1`] = `
   cursor: default;
 }
 
-.cache-7hen1z-Container>* {
+.cache-haz2zf>* {
   margin-top: 0;
 }
 
-.cache-7hen1z-Container>*+* {
+.cache-haz2zf>*+* {
   margin-top: 16px;
 }
 
@@ -180,7 +180,7 @@ exports[`Container renders correctly on edition mode 1`] = `
       <div />
     </div>
     <div
-      class="elb23zt0 cache-7hen1z-Container e7ah3bn0"
+      class="elb23zt0 cache-haz2zf e7ah3bn0"
     >
       Hello
     </div>
@@ -237,7 +237,7 @@ exports[`Container renders correctly when disabled 1`] = `
   margin-right: 16px;
 }
 
-.cache-1e4v6x2-Container {
+.cache-1v21s23 {
   padding: 24px;
   border-radius: 4px;
   border: 1px solid #d4dae7;
@@ -250,11 +250,11 @@ exports[`Container renders correctly when disabled 1`] = `
   cursor: not-allowed;
 }
 
-.cache-1e4v6x2-Container>* {
+.cache-1v21s23>* {
   margin-top: 0;
 }
 
-.cache-1e4v6x2-Container>*+* {
+.cache-1v21s23>*+* {
   margin-top: 16px;
 }
 
@@ -274,7 +274,7 @@ exports[`Container renders correctly when disabled 1`] = `
       <div />
     </div>
     <div
-      class="elb23zt0 cache-1e4v6x2-Container e7ah3bn0"
+      class="elb23zt0 cache-1v21s23 e7ah3bn0"
       disabled=""
     >
       Hello
@@ -332,7 +332,7 @@ exports[`Container renders correctly with small variant 1`] = `
   margin-right: 16px;
 }
 
-.cache-1p72hfy-Container {
+.cache-wwboek {
   padding: 24px;
   border-radius: 4px;
   border: 1px solid #d4dae7;
@@ -345,11 +345,11 @@ exports[`Container renders correctly with small variant 1`] = `
   cursor: default;
 }
 
-.cache-1p72hfy-Container>* {
+.cache-wwboek>* {
   margin-top: 0;
 }
 
-.cache-1p72hfy-Container>*+* {
+.cache-wwboek>*+* {
   margin-top: 16px;
 }
 
@@ -369,7 +369,7 @@ exports[`Container renders correctly with small variant 1`] = `
       <div />
     </div>
     <div
-      class="elb23zt0 cache-1p72hfy-Container e7ah3bn0"
+      class="elb23zt0 cache-wwboek e7ah3bn0"
     >
       Hello
     </div>
diff --git a/src/components/LineChart/__tests__/__snapshots__/index.tsx.snap b/src/components/LineChart/__tests__/__snapshots__/index.tsx.snap
index e964fd4580..189e6bb8a0 100644
--- a/src/components/LineChart/__tests__/__snapshots__/index.tsx.snap
+++ b/src/components/LineChart/__tests__/__snapshots__/index.tsx.snap
@@ -732,7 +732,7 @@ exports[`LineChart renders correctly when chart is hovered 1`] = `
   border-bottom: 1px solid #f6f5f7;
 }
 
-.cache-fevtnc {
+.cache-1q7g03k-CustomLegend {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -740,7 +740,7 @@ exports[`LineChart renders correctly when chart is hovered 1`] = `
   padding: 4px 0;
 }
 
-.cache-fevtnc>:not(:last-child) {
+.cache-1q7g03k-CustomLegend>:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -828,7 +828,7 @@ exports[`LineChart renders correctly when chart is hovered 1`] = `
   color: #4a4f62;
 }
 
-.cache-ozhuv7 {
+.cache-1wwhcz7-CustomLegend {
   margin-left: 16px;
   width: 32px;
   height: 2px;
@@ -915,7 +915,7 @@ exports[`LineChart renders correctly when chart is hovered 1`] = `
       class="cache-12617z7-CustomLegend"
     >
       <div
-        class="cache-fevtnc"
+        class="cache-1q7g03k-CustomLegend"
       >
         <div
           class="cache-1nrlk4a e1l6meh01"
@@ -955,7 +955,7 @@ exports[`LineChart renders correctly when chart is hovered 1`] = `
                     line chart values
                   </p>
                   <div
-                    class="cache-ozhuv7"
+                    class="cache-1wwhcz7-CustomLegend"
                   />
                 </div>
               </div>
@@ -1660,7 +1660,7 @@ exports[`LineChart renders correctly when legend is deselected 1`] = `
   border-bottom: 1px solid #f6f5f7;
 }
 
-.cache-fevtnc {
+.cache-1q7g03k-CustomLegend {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1668,7 +1668,7 @@ exports[`LineChart renders correctly when legend is deselected 1`] = `
   padding: 4px 0;
 }
 
-.cache-fevtnc>:not(:last-child) {
+.cache-1q7g03k-CustomLegend>:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1756,7 +1756,7 @@ exports[`LineChart renders correctly when legend is deselected 1`] = `
   color: #4a4f62;
 }
 
-.cache-ozhuv7 {
+.cache-1wwhcz7-CustomLegend {
   margin-left: 16px;
   width: 32px;
   height: 2px;
@@ -1843,7 +1843,7 @@ exports[`LineChart renders correctly when legend is deselected 1`] = `
       class="cache-12617z7-CustomLegend"
     >
       <div
-        class="cache-fevtnc"
+        class="cache-1q7g03k-CustomLegend"
       >
         <div
           class="cache-1nrlk4a e1l6meh01"
@@ -1883,7 +1883,7 @@ exports[`LineChart renders correctly when legend is deselected 1`] = `
                     line chart values
                   </p>
                   <div
-                    class="cache-ozhuv7"
+                    class="cache-1wwhcz7-CustomLegend"
                   />
                 </div>
               </div>
@@ -4025,7 +4025,7 @@ exports[`LineChart renders correctly with detailed legend 1`] = `
   border-bottom: 1px solid #f6f5f7;
 }
 
-.cache-fevtnc {
+.cache-1q7g03k-CustomLegend {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4033,7 +4033,7 @@ exports[`LineChart renders correctly with detailed legend 1`] = `
   padding: 4px 0;
 }
 
-.cache-fevtnc>:not(:last-child) {
+.cache-1q7g03k-CustomLegend>:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4121,7 +4121,7 @@ exports[`LineChart renders correctly with detailed legend 1`] = `
   color: #4a4f62;
 }
 
-.cache-ozhuv7 {
+.cache-1wwhcz7-CustomLegend {
   margin-left: 16px;
   width: 32px;
   height: 2px;
@@ -4208,7 +4208,7 @@ exports[`LineChart renders correctly with detailed legend 1`] = `
       class="cache-12617z7-CustomLegend"
     >
       <div
-        class="cache-fevtnc"
+        class="cache-1q7g03k-CustomLegend"
       >
         <div
           class="cache-1nrlk4a e1l6meh01"
@@ -4248,7 +4248,7 @@ exports[`LineChart renders correctly with detailed legend 1`] = `
                     line chart values
                   </p>
                   <div
-                    class="cache-ozhuv7"
+                    class="cache-1wwhcz7-CustomLegend"
                   />
                 </div>
               </div>
@@ -5384,7 +5384,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
   border-bottom: 1px solid #f6f5f7;
 }
 
-.cache-fevtnc {
+.cache-1q7g03k-CustomLegend {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5392,7 +5392,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
   padding: 4px 0;
 }
 
-.cache-fevtnc>:not(:last-child) {
+.cache-1q7g03k-CustomLegend>:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5480,7 +5480,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
   color: #4a4f62;
 }
 
-.cache-ozhuv7 {
+.cache-1wwhcz7-CustomLegend {
   margin-left: 16px;
   width: 32px;
   height: 2px;
@@ -5531,7 +5531,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
   color: #4a4f62;
 }
 
-.cache-13a56l {
+.cache-8hr9vu-CustomLegend {
   margin-left: 16px;
   width: 32px;
   height: 2px;
@@ -5574,7 +5574,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
       class="cache-12617z7-CustomLegend"
     >
       <div
-        class="cache-fevtnc"
+        class="cache-1q7g03k-CustomLegend"
       >
         <div
           class="cache-1nrlk4a e1l6meh01"
@@ -5614,7 +5614,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
                     Serie 1
                   </p>
                   <div
-                    class="cache-ozhuv7"
+                    class="cache-1wwhcz7-CustomLegend"
                   />
                 </div>
               </div>
@@ -5650,7 +5650,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
         </p>
       </div>
       <div
-        class="cache-fevtnc"
+        class="cache-1q7g03k-CustomLegend"
       >
         <div
           class="cache-1nrlk4a e1l6meh01"
@@ -5690,7 +5690,7 @@ exports[`LineChart renders correctly with multiple series 1`] = `
                     Serie 2
                   </p>
                   <div
-                    class="cache-13a56l"
+                    class="cache-8hr9vu-CustomLegend"
                   />
                 </div>
               </div>
@@ -7325,7 +7325,7 @@ exports[`LineChart renders correctly with timeline data 1`] = `
   border-bottom: 1px solid #f6f5f7;
 }
 
-.cache-fevtnc {
+.cache-1q7g03k-CustomLegend {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7333,7 +7333,7 @@ exports[`LineChart renders correctly with timeline data 1`] = `
   padding: 4px 0;
 }
 
-.cache-fevtnc>:not(:last-child) {
+.cache-1q7g03k-CustomLegend>:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -7421,7 +7421,7 @@ exports[`LineChart renders correctly with timeline data 1`] = `
   color: #4a4f62;
 }
 
-.cache-ozhuv7 {
+.cache-1wwhcz7-CustomLegend {
   margin-left: 16px;
   width: 32px;
   height: 2px;
@@ -7508,7 +7508,7 @@ exports[`LineChart renders correctly with timeline data 1`] = `
       class="cache-12617z7-CustomLegend"
     >
       <div
-        class="cache-fevtnc"
+        class="cache-1q7g03k-CustomLegend"
       >
         <div
           class="cache-1nrlk4a e1l6meh01"
@@ -7548,7 +7548,7 @@ exports[`LineChart renders correctly with timeline data 1`] = `
                     line chart hours values
                   </p>
                   <div
-                    class="cache-ozhuv7"
+                    class="cache-1wwhcz7-CustomLegend"
                   />
                 </div>
               </div>
diff --git a/src/components/Menu/__tests__/__snapshots__/index.tsx.snap b/src/components/Menu/__tests__/__snapshots__/index.tsx.snap
index 3da62f8a18..b9f8ee82a9 100644
--- a/src/components/Menu/__tests__/__snapshots__/index.tsx.snap
+++ b/src/components/Menu/__tests__/__snapshots__/index.tsx.snap
@@ -598,7 +598,7 @@ exports[`Menu placement renders "bottom" 1`] = `
   box-shadow: 0 2px 5px 5px rgba(165,165,205,0.3);
 }
 
-.cache-1avvh67 {
+.cache-1foy029-Popper {
   background-color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -618,8 +618,8 @@ exports[`Menu placement renders "bottom" 1`] = `
   box-shadow: 0 -1px 5px 3px rgba(165,165,205,0.15);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   border: solid transparent;
   border-width: 9px;
   content: ' ';
@@ -629,16 +629,16 @@ exports[`Menu placement renders "bottom" 1`] = `
   pointer-events: none;
 }
 
-.cache-1avvh67:after {
+.cache-1foy029-Popper:after {
   border-color: rgba(255, 255, 255, 0);
 }
 
-.cache-1avvh67:before {
+.cache-1foy029-Popper:before {
   border-color: rgba(165, 165, 205, 0);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
@@ -646,21 +646,21 @@ exports[`Menu placement renders "bottom" 1`] = `
   transform: translateX(-50%);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   bottom: 100%;
 }
 
-.cache-1avvh67:after {
+.cache-1foy029-Popper:after {
   border-bottom-color: #fff;
 }
 
-.cache-1avvh67:before {
+.cache-1foy029-Popper:before {
   border-bottom-color: rgba(165, 165, 205, 0.4);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   left: 50%;
   right: inherit;
 }
@@ -765,7 +765,7 @@ exports[`Menu placement renders "bottom" 1`] = `
     tabindex="-1"
   >
     <div
-      class="cache-1avvh67"
+      class="cache-1foy029-Popper"
       role="menu"
     >
       <button
@@ -803,7 +803,7 @@ exports[`Menu placement renders "bottom-end" 1`] = `
   box-shadow: 0 2px 5px 5px rgba(165,165,205,0.3);
 }
 
-.cache-1fzhmyd {
+.cache-1pt5xr4-Popper {
   background-color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -823,8 +823,8 @@ exports[`Menu placement renders "bottom-end" 1`] = `
   box-shadow: 0 -1px 5px 3px rgba(165,165,205,0.15);
 }
 
-.cache-1fzhmyd:after,
-.cache-1fzhmyd:before {
+.cache-1pt5xr4-Popper:after,
+.cache-1pt5xr4-Popper:before {
   border: solid transparent;
   border-width: 9px;
   content: ' ';
@@ -834,39 +834,39 @@ exports[`Menu placement renders "bottom-end" 1`] = `
   pointer-events: none;
 }
 
-.cache-1fzhmyd:after {
+.cache-1pt5xr4-Popper:after {
   border-color: rgba(255, 255, 255, 0);
 }
 
-.cache-1fzhmyd:before {
+.cache-1pt5xr4-Popper:before {
   border-color: rgba(165, 165, 205, 0);
 }
 
-.cache-1fzhmyd:after {
+.cache-1pt5xr4-Popper:after {
   margin-left: -9px;
   right: 24px;
 }
 
-.cache-1fzhmyd:before {
+.cache-1pt5xr4-Popper:before {
   margin-left: -11px;
   right: 24px;
 }
 
-.cache-1fzhmyd:after,
-.cache-1fzhmyd:before {
+.cache-1pt5xr4-Popper:after,
+.cache-1pt5xr4-Popper:before {
   bottom: 100%;
 }
 
-.cache-1fzhmyd:after {
+.cache-1pt5xr4-Popper:after {
   border-bottom-color: #fff;
 }
 
-.cache-1fzhmyd:before {
+.cache-1pt5xr4-Popper:before {
   border-bottom-color: rgba(165, 165, 205, 0.4);
 }
 
-.cache-1fzhmyd:after,
-.cache-1fzhmyd:before {
+.cache-1pt5xr4-Popper:after,
+.cache-1pt5xr4-Popper:before {
   left: 50%;
   right: inherit;
 }
@@ -971,7 +971,7 @@ exports[`Menu placement renders "bottom-end" 1`] = `
     tabindex="-1"
   >
     <div
-      class="cache-1fzhmyd"
+      class="cache-1pt5xr4-Popper"
       role="menu"
     >
       <button
@@ -1009,7 +1009,7 @@ exports[`Menu placement renders "bottom-start" 1`] = `
   box-shadow: 0 2px 5px 5px rgba(165,165,205,0.3);
 }
 
-.cache-1mkdq8z {
+.cache-1lax4sb-Popper {
   background-color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1029,8 +1029,8 @@ exports[`Menu placement renders "bottom-start" 1`] = `
   box-shadow: 0 -1px 5px 3px rgba(165,165,205,0.15);
 }
 
-.cache-1mkdq8z:after,
-.cache-1mkdq8z:before {
+.cache-1lax4sb-Popper:after,
+.cache-1lax4sb-Popper:before {
   border: solid transparent;
   border-width: 9px;
   content: ' ';
@@ -1040,39 +1040,39 @@ exports[`Menu placement renders "bottom-start" 1`] = `
   pointer-events: none;
 }
 
-.cache-1mkdq8z:after {
+.cache-1lax4sb-Popper:after {
   border-color: rgba(255, 255, 255, 0);
 }
 
-.cache-1mkdq8z:before {
+.cache-1lax4sb-Popper:before {
   border-color: rgba(165, 165, 205, 0);
 }
 
-.cache-1mkdq8z:after {
+.cache-1lax4sb-Popper:after {
   margin-right: -9px;
   left: 24px;
 }
 
-.cache-1mkdq8z:before {
+.cache-1lax4sb-Popper:before {
   margin-right: -11px;
   left: 24px;
 }
 
-.cache-1mkdq8z:after,
-.cache-1mkdq8z:before {
+.cache-1lax4sb-Popper:after,
+.cache-1lax4sb-Popper:before {
   bottom: 100%;
 }
 
-.cache-1mkdq8z:after {
+.cache-1lax4sb-Popper:after {
   border-bottom-color: #fff;
 }
 
-.cache-1mkdq8z:before {
+.cache-1lax4sb-Popper:before {
   border-bottom-color: rgba(165, 165, 205, 0.4);
 }
 
-.cache-1mkdq8z:after,
-.cache-1mkdq8z:before {
+.cache-1lax4sb-Popper:after,
+.cache-1lax4sb-Popper:before {
   left: 50%;
   right: inherit;
 }
@@ -1177,7 +1177,7 @@ exports[`Menu placement renders "bottom-start" 1`] = `
     tabindex="-1"
   >
     <div
-      class="cache-1mkdq8z"
+      class="cache-1lax4sb-Popper"
       role="menu"
     >
       <button
@@ -1215,7 +1215,7 @@ exports[`Menu placement renders "top" 1`] = `
   box-shadow: 0 2px 5px 5px rgba(165,165,205,0.3);
 }
 
-.cache-1hmg1vd {
+.cache-17aevdr-Popper {
   background-color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1235,8 +1235,8 @@ exports[`Menu placement renders "top" 1`] = `
   box-shadow: 0 1px 5px 3px rgba(165,165,205,0.15);
 }
 
-.cache-1hmg1vd:after,
-.cache-1hmg1vd:before {
+.cache-17aevdr-Popper:after,
+.cache-17aevdr-Popper:before {
   border: solid transparent;
   border-width: 9px;
   content: ' ';
@@ -1246,16 +1246,16 @@ exports[`Menu placement renders "top" 1`] = `
   pointer-events: none;
 }
 
-.cache-1hmg1vd:after {
+.cache-17aevdr-Popper:after {
   border-color: rgba(255, 255, 255, 0);
 }
 
-.cache-1hmg1vd:before {
+.cache-17aevdr-Popper:before {
   border-color: rgba(165, 165, 205, 0);
 }
 
-.cache-1hmg1vd:after,
-.cache-1hmg1vd:before {
+.cache-17aevdr-Popper:after,
+.cache-17aevdr-Popper:before {
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
@@ -1263,21 +1263,21 @@ exports[`Menu placement renders "top" 1`] = `
   transform: translateX(-50%);
 }
 
-.cache-1hmg1vd:after,
-.cache-1hmg1vd:before {
+.cache-17aevdr-Popper:after,
+.cache-17aevdr-Popper:before {
   top: 100%;
 }
 
-.cache-1hmg1vd:after {
+.cache-17aevdr-Popper:after {
   border-top-color: #fff;
 }
 
-.cache-1hmg1vd:before {
+.cache-17aevdr-Popper:before {
   border-top-color: rgba(165, 165, 205, 0.4);
 }
 
-.cache-1hmg1vd:after,
-.cache-1hmg1vd:before {
+.cache-17aevdr-Popper:after,
+.cache-17aevdr-Popper:before {
   left: 50%;
   right: inherit;
 }
@@ -1382,7 +1382,7 @@ exports[`Menu placement renders "top" 1`] = `
     tabindex="-1"
   >
     <div
-      class="cache-1hmg1vd"
+      class="cache-17aevdr-Popper"
       role="menu"
     >
       <button
@@ -1420,7 +1420,7 @@ exports[`Menu placement renders "top-end" 1`] = `
   box-shadow: 0 2px 5px 5px rgba(165,165,205,0.3);
 }
 
-.cache-1q8465l {
+.cache-bvwdsn-Popper {
   background-color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1440,8 +1440,8 @@ exports[`Menu placement renders "top-end" 1`] = `
   box-shadow: 0 1px 5px 3px rgba(165,165,205,0.15);
 }
 
-.cache-1q8465l:after,
-.cache-1q8465l:before {
+.cache-bvwdsn-Popper:after,
+.cache-bvwdsn-Popper:before {
   border: solid transparent;
   border-width: 9px;
   content: ' ';
@@ -1451,39 +1451,39 @@ exports[`Menu placement renders "top-end" 1`] = `
   pointer-events: none;
 }
 
-.cache-1q8465l:after {
+.cache-bvwdsn-Popper:after {
   border-color: rgba(255, 255, 255, 0);
 }
 
-.cache-1q8465l:before {
+.cache-bvwdsn-Popper:before {
   border-color: rgba(165, 165, 205, 0);
 }
 
-.cache-1q8465l:after {
+.cache-bvwdsn-Popper:after {
   margin-left: -9px;
   right: 24px;
 }
 
-.cache-1q8465l:before {
+.cache-bvwdsn-Popper:before {
   margin-left: -11px;
   right: 24px;
 }
 
-.cache-1q8465l:after,
-.cache-1q8465l:before {
+.cache-bvwdsn-Popper:after,
+.cache-bvwdsn-Popper:before {
   top: 100%;
 }
 
-.cache-1q8465l:after {
+.cache-bvwdsn-Popper:after {
   border-top-color: #fff;
 }
 
-.cache-1q8465l:before {
+.cache-bvwdsn-Popper:before {
   border-top-color: rgba(165, 165, 205, 0.4);
 }
 
-.cache-1q8465l:after,
-.cache-1q8465l:before {
+.cache-bvwdsn-Popper:after,
+.cache-bvwdsn-Popper:before {
   left: 50%;
   right: inherit;
 }
@@ -1588,7 +1588,7 @@ exports[`Menu placement renders "top-end" 1`] = `
     tabindex="-1"
   >
     <div
-      class="cache-1q8465l"
+      class="cache-bvwdsn-Popper"
       role="menu"
     >
       <button
@@ -1626,7 +1626,7 @@ exports[`Menu placement renders "top-start" 1`] = `
   box-shadow: 0 2px 5px 5px rgba(165,165,205,0.3);
 }
 
-.cache-1ifotjn {
+.cache-h4lek3-Popper {
   background-color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1646,8 +1646,8 @@ exports[`Menu placement renders "top-start" 1`] = `
   box-shadow: 0 1px 5px 3px rgba(165,165,205,0.15);
 }
 
-.cache-1ifotjn:after,
-.cache-1ifotjn:before {
+.cache-h4lek3-Popper:after,
+.cache-h4lek3-Popper:before {
   border: solid transparent;
   border-width: 9px;
   content: ' ';
@@ -1657,39 +1657,39 @@ exports[`Menu placement renders "top-start" 1`] = `
   pointer-events: none;
 }
 
-.cache-1ifotjn:after {
+.cache-h4lek3-Popper:after {
   border-color: rgba(255, 255, 255, 0);
 }
 
-.cache-1ifotjn:before {
+.cache-h4lek3-Popper:before {
   border-color: rgba(165, 165, 205, 0);
 }
 
-.cache-1ifotjn:after {
+.cache-h4lek3-Popper:after {
   margin-right: -9px;
   left: 24px;
 }
 
-.cache-1ifotjn:before {
+.cache-h4lek3-Popper:before {
   margin-right: -11px;
   left: 24px;
 }
 
-.cache-1ifotjn:after,
-.cache-1ifotjn:before {
+.cache-h4lek3-Popper:after,
+.cache-h4lek3-Popper:before {
   top: 100%;
 }
 
-.cache-1ifotjn:after {
+.cache-h4lek3-Popper:after {
   border-top-color: #fff;
 }
 
-.cache-1ifotjn:before {
+.cache-h4lek3-Popper:before {
   border-top-color: rgba(165, 165, 205, 0.4);
 }
 
-.cache-1ifotjn:after,
-.cache-1ifotjn:before {
+.cache-h4lek3-Popper:after,
+.cache-h4lek3-Popper:before {
   left: 50%;
   right: inherit;
 }
@@ -1794,7 +1794,7 @@ exports[`Menu placement renders "top-start" 1`] = `
     tabindex="-1"
   >
     <div
-      class="cache-1ifotjn"
+      class="cache-h4lek3-Popper"
       role="menu"
     >
       <button
@@ -1832,7 +1832,7 @@ exports[`Menu renders with Menu.Item 1`] = `
   box-shadow: 0 2px 5px 5px rgba(165,165,205,0.3);
 }
 
-.cache-1avvh67 {
+.cache-1foy029-Popper {
   background-color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1852,8 +1852,8 @@ exports[`Menu renders with Menu.Item 1`] = `
   box-shadow: 0 -1px 5px 3px rgba(165,165,205,0.15);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   border: solid transparent;
   border-width: 9px;
   content: ' ';
@@ -1863,16 +1863,16 @@ exports[`Menu renders with Menu.Item 1`] = `
   pointer-events: none;
 }
 
-.cache-1avvh67:after {
+.cache-1foy029-Popper:after {
   border-color: rgba(255, 255, 255, 0);
 }
 
-.cache-1avvh67:before {
+.cache-1foy029-Popper:before {
   border-color: rgba(165, 165, 205, 0);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
@@ -1880,21 +1880,21 @@ exports[`Menu renders with Menu.Item 1`] = `
   transform: translateX(-50%);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   bottom: 100%;
 }
 
-.cache-1avvh67:after {
+.cache-1foy029-Popper:after {
   border-bottom-color: #fff;
 }
 
-.cache-1avvh67:before {
+.cache-1foy029-Popper:before {
   border-bottom-color: rgba(165, 165, 205, 0.4);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   left: 50%;
   right: inherit;
 }
@@ -1999,7 +1999,7 @@ exports[`Menu renders with Menu.Item 1`] = `
     tabindex="-1"
   >
     <div
-      class="cache-1avvh67"
+      class="cache-1foy029-Popper"
       role="menu"
     >
       <button
@@ -2037,7 +2037,7 @@ exports[`Menu renders with Menu.ItemLink & Menu.Item disabled 1`] = `
   box-shadow: 0 2px 5px 5px rgba(165,165,205,0.3);
 }
 
-.cache-1avvh67 {
+.cache-1foy029-Popper {
   background-color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2057,8 +2057,8 @@ exports[`Menu renders with Menu.ItemLink & Menu.Item disabled 1`] = `
   box-shadow: 0 -1px 5px 3px rgba(165,165,205,0.15);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   border: solid transparent;
   border-width: 9px;
   content: ' ';
@@ -2068,16 +2068,16 @@ exports[`Menu renders with Menu.ItemLink & Menu.Item disabled 1`] = `
   pointer-events: none;
 }
 
-.cache-1avvh67:after {
+.cache-1foy029-Popper:after {
   border-color: rgba(255, 255, 255, 0);
 }
 
-.cache-1avvh67:before {
+.cache-1foy029-Popper:before {
   border-color: rgba(165, 165, 205, 0);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
@@ -2085,21 +2085,21 @@ exports[`Menu renders with Menu.ItemLink & Menu.Item disabled 1`] = `
   transform: translateX(-50%);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   bottom: 100%;
 }
 
-.cache-1avvh67:after {
+.cache-1foy029-Popper:after {
   border-bottom-color: #fff;
 }
 
-.cache-1avvh67:before {
+.cache-1foy029-Popper:before {
   border-bottom-color: rgba(165, 165, 205, 0.4);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   left: 50%;
   right: inherit;
 }
@@ -2223,7 +2223,7 @@ exports[`Menu renders with Menu.ItemLink & Menu.Item disabled 1`] = `
     tabindex="-1"
   >
     <div
-      class="cache-1avvh67"
+      class="cache-1foy029-Popper"
       role="menu"
     >
       <button
@@ -2290,7 +2290,7 @@ exports[`Menu renders with Menu.ItemLink 1`] = `
   box-shadow: 0 2px 5px 5px rgba(165,165,205,0.3);
 }
 
-.cache-1avvh67 {
+.cache-1foy029-Popper {
   background-color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2310,8 +2310,8 @@ exports[`Menu renders with Menu.ItemLink 1`] = `
   box-shadow: 0 -1px 5px 3px rgba(165,165,205,0.15);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   border: solid transparent;
   border-width: 9px;
   content: ' ';
@@ -2321,16 +2321,16 @@ exports[`Menu renders with Menu.ItemLink 1`] = `
   pointer-events: none;
 }
 
-.cache-1avvh67:after {
+.cache-1foy029-Popper:after {
   border-color: rgba(255, 255, 255, 0);
 }
 
-.cache-1avvh67:before {
+.cache-1foy029-Popper:before {
   border-color: rgba(165, 165, 205, 0);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
@@ -2338,21 +2338,21 @@ exports[`Menu renders with Menu.ItemLink 1`] = `
   transform: translateX(-50%);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   bottom: 100%;
 }
 
-.cache-1avvh67:after {
+.cache-1foy029-Popper:after {
   border-bottom-color: #fff;
 }
 
-.cache-1avvh67:before {
+.cache-1foy029-Popper:before {
   border-bottom-color: rgba(165, 165, 205, 0.4);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   left: 50%;
   right: inherit;
 }
@@ -2457,7 +2457,7 @@ exports[`Menu renders with Menu.ItemLink 1`] = `
     tabindex="-1"
   >
     <div
-      class="cache-1avvh67"
+      class="cache-1foy029-Popper"
       role="menu"
     >
       <a
@@ -2495,7 +2495,7 @@ exports[`Menu renders with modal={false} 1`] = `
   box-shadow: 0 2px 5px 5px rgba(165,165,205,0.3);
 }
 
-.cache-1avvh67 {
+.cache-1foy029-Popper {
   background-color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2515,8 +2515,8 @@ exports[`Menu renders with modal={false} 1`] = `
   box-shadow: 0 -1px 5px 3px rgba(165,165,205,0.15);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   border: solid transparent;
   border-width: 9px;
   content: ' ';
@@ -2526,16 +2526,16 @@ exports[`Menu renders with modal={false} 1`] = `
   pointer-events: none;
 }
 
-.cache-1avvh67:after {
+.cache-1foy029-Popper:after {
   border-color: rgba(255, 255, 255, 0);
 }
 
-.cache-1avvh67:before {
+.cache-1foy029-Popper:before {
   border-color: rgba(165, 165, 205, 0);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
@@ -2543,21 +2543,21 @@ exports[`Menu renders with modal={false} 1`] = `
   transform: translateX(-50%);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   bottom: 100%;
 }
 
-.cache-1avvh67:after {
+.cache-1foy029-Popper:after {
   border-bottom-color: #fff;
 }
 
-.cache-1avvh67:before {
+.cache-1foy029-Popper:before {
   border-bottom-color: rgba(165, 165, 205, 0.4);
 }
 
-.cache-1avvh67:after,
-.cache-1avvh67:before {
+.cache-1foy029-Popper:after,
+.cache-1foy029-Popper:before {
   left: 50%;
   right: inherit;
 }
@@ -2662,7 +2662,7 @@ exports[`Menu renders with modal={false} 1`] = `
     tabindex="-1"
   >
     <div
-      class="cache-1avvh67"
+      class="cache-1foy029-Popper"
       role="menu"
     >
       <button
diff --git a/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap b/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap
index 8690b02f02..33013ab87a 100644
--- a/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`PasswordCheck render with custom values 1`] = `
   }
 }
 
-.cache-1wf6x8x {
+.cache-13m6wm9-PasswordCheck {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -67,7 +67,7 @@ exports[`PasswordCheck render with custom values 1`] = `
   font-size: 14px;
 }
 
-.cache-nlz21q {
+.cache-dsk04c-PasswordCheck {
   fill: darkGrey;
   height: 20px;
   width: 20px;
@@ -79,11 +79,11 @@ exports[`PasswordCheck render with custom values 1`] = `
   align-self: center;
 }
 
-.cache-nlz21q.cache-nlz21q {
+.cache-dsk04c-PasswordCheck.cache-dsk04c-PasswordCheck {
   vertical-align: middle;
 }
 
-.cache-1fp7rki {
+.cache-115fstu-PasswordCheck {
   fill: #45d6b5;
   height: 20px;
   width: 20px;
@@ -95,7 +95,7 @@ exports[`PasswordCheck render with custom values 1`] = `
   align-self: center;
 }
 
-.cache-1fp7rki.cache-1fp7rki {
+.cache-115fstu-PasswordCheck.cache-115fstu-PasswordCheck {
   vertical-align: middle;
 }
 
@@ -109,10 +109,10 @@ exports[`PasswordCheck render with custom values 1`] = `
         class="efyj23m0 cache-1w6xz3u e7ah3bn0"
       >
         <p
-          class="cache-1wf6x8x"
+          class="cache-13m6wm9-PasswordCheck"
         >
           <svg
-            class="etwatq50 cache-nlz21q e7ah3bn0"
+            class="etwatq50 cache-dsk04c-PasswordCheck e7ah3bn0"
             viewBox="0 0 24 24"
           >
             <path
@@ -126,10 +126,10 @@ exports[`PasswordCheck render with custom values 1`] = `
         class="efyj23m0 cache-1w6xz3u e7ah3bn0"
       >
         <p
-          class="cache-1wf6x8x"
+          class="cache-13m6wm9-PasswordCheck"
         >
           <svg
-            class="etwatq50 cache-1fp7rki e7ah3bn0"
+            class="etwatq50 cache-115fstu-PasswordCheck e7ah3bn0"
             viewBox="0 0 24 24"
           >
             <path
diff --git a/src/components/Placeholder/__tests__/__snapshots__/index.tsx.snap b/src/components/Placeholder/__tests__/__snapshots__/index.tsx.snap
index 9c1b8f41d6..a2fef8f98a 100644
--- a/src/components/Placeholder/__tests__/__snapshots__/index.tsx.snap
+++ b/src/components/Placeholder/__tests__/__snapshots__/index.tsx.snap
@@ -71,7 +71,7 @@ exports[`Placeholder renders correctly with type="block" 1`] = `
   padding: 16px;
 }
 
-.cache-z3njbs {
+.cache-32mtjs-Block {
   margin-right: 8px;
   width: 32px;
   height: 32px;
@@ -135,7 +135,7 @@ exports[`Placeholder renders correctly with type="block" 1`] = `
           class="cache-1fwys9n e7ah3bn0"
         >
           <div
-            class="cache-z3njbs"
+            class="cache-32mtjs-Block"
           />
           <div
             class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -150,7 +150,7 @@ exports[`Placeholder renders correctly with type="block" 1`] = `
           class="cache-1fwys9n e7ah3bn0"
         >
           <div
-            class="cache-z3njbs"
+            class="cache-32mtjs-Block"
           />
           <div
             class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -165,7 +165,7 @@ exports[`Placeholder renders correctly with type="block" 1`] = `
           class="cache-1fwys9n e7ah3bn0"
         >
           <div
-            class="cache-z3njbs"
+            class="cache-32mtjs-Block"
           />
           <div
             class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -274,7 +274,7 @@ exports[`Placeholder renders correctly with type="blocks" 1`] = `
   max-width: 25%;
 }
 
-.cache-173s0r1 {
+.cache-1rjh31y-Blocks {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -292,7 +292,7 @@ exports[`Placeholder renders correctly with type="blocks" 1`] = `
   border-radius: 4px;
 }
 
-.cache-z3njbs {
+.cache-14v2evw-Blocks {
   margin-right: 8px;
   width: 32px;
   height: 32px;
@@ -343,10 +343,10 @@ exports[`Placeholder renders correctly with type="blocks" 1`] = `
             class="efyj23m0 cache-1yolip7 e7ah3bn0"
           >
             <div
-              class="cache-173s0r1"
+              class="cache-1rjh31y-Blocks"
             >
               <div
-                class="cache-z3njbs"
+                class="cache-14v2evw-Blocks"
               />
               <div
                 class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -357,10 +357,10 @@ exports[`Placeholder renders correctly with type="blocks" 1`] = `
             class="efyj23m0 cache-1yolip7 e7ah3bn0"
           >
             <div
-              class="cache-173s0r1"
+              class="cache-1rjh31y-Blocks"
             >
               <div
-                class="cache-z3njbs"
+                class="cache-14v2evw-Blocks"
               />
               <div
                 class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -371,10 +371,10 @@ exports[`Placeholder renders correctly with type="blocks" 1`] = `
             class="efyj23m0 cache-1yolip7 e7ah3bn0"
           >
             <div
-              class="cache-173s0r1"
+              class="cache-1rjh31y-Blocks"
             >
               <div
-                class="cache-z3njbs"
+                class="cache-14v2evw-Blocks"
               />
               <div
                 class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -385,10 +385,10 @@ exports[`Placeholder renders correctly with type="blocks" 1`] = `
             class="efyj23m0 cache-1yolip7 e7ah3bn0"
           >
             <div
-              class="cache-173s0r1"
+              class="cache-1rjh31y-Blocks"
             >
               <div
-                class="cache-z3njbs"
+                class="cache-14v2evw-Blocks"
               />
               <div
                 class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -399,10 +399,10 @@ exports[`Placeholder renders correctly with type="blocks" 1`] = `
             class="efyj23m0 cache-1yolip7 e7ah3bn0"
           >
             <div
-              class="cache-173s0r1"
+              class="cache-1rjh31y-Blocks"
             >
               <div
-                class="cache-z3njbs"
+                class="cache-14v2evw-Blocks"
               />
               <div
                 class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -413,10 +413,10 @@ exports[`Placeholder renders correctly with type="blocks" 1`] = `
             class="efyj23m0 cache-1yolip7 e7ah3bn0"
           >
             <div
-              class="cache-173s0r1"
+              class="cache-1rjh31y-Blocks"
             >
               <div
-                class="cache-z3njbs"
+                class="cache-14v2evw-Blocks"
               />
               <div
                 class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -427,10 +427,10 @@ exports[`Placeholder renders correctly with type="blocks" 1`] = `
             class="efyj23m0 cache-1yolip7 e7ah3bn0"
           >
             <div
-              class="cache-173s0r1"
+              class="cache-1rjh31y-Blocks"
             >
               <div
-                class="cache-z3njbs"
+                class="cache-14v2evw-Blocks"
               />
               <div
                 class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -441,10 +441,10 @@ exports[`Placeholder renders correctly with type="blocks" 1`] = `
             class="efyj23m0 cache-1yolip7 e7ah3bn0"
           >
             <div
-              class="cache-173s0r1"
+              class="cache-1rjh31y-Blocks"
             >
               <div
-                class="cache-z3njbs"
+                class="cache-14v2evw-Blocks"
               />
               <div
                 class="e15slp7a0 cache-1u4y7cs e7ah3bn0"
@@ -480,7 +480,7 @@ exports[`Placeholder renders correctly with type="box" 1`] = `
   overflow: hidden;
 }
 
-.cache-1h7w086 {
+.cache-35kfaf-BoxWithIcon {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -499,7 +499,7 @@ exports[`Placeholder renders correctly with type="box" 1`] = `
   border: 1px solid #dce1eb;
 }
 
-.cache-1h7w086.cache-1h7w086 {
+.cache-35kfaf-BoxWithIcon.cache-35kfaf-BoxWithIcon {
   width: 25px;
   height: 25px;
   margin-right: 8px;
@@ -517,7 +517,7 @@ exports[`Placeholder renders correctly with type="box" 1`] = `
   flex: 0 0 undefined;
 }
 
-.cache-gjv3j6 {
+.cache-4honi-BoxWithIcon {
   width: 8.333333333333334px;
   height: 8.333333333333334px;
   border-radius: 8.333333333333334px;
@@ -559,10 +559,10 @@ exports[`Placeholder renders correctly with type="box" 1`] = `
     class="cache-qdw476 e7ah3bn0"
   >
     <div
-      class="cache-1h7w086 e7ah3bn0"
+      class="cache-35kfaf-BoxWithIcon e7ah3bn0"
     >
       <div
-        class="cache-gjv3j6"
+        class="cache-4honi-BoxWithIcon"
       />
       <div
         class="e15slp7a0 cache-easwmr e7ah3bn0"
@@ -971,7 +971,7 @@ exports[`Placeholder renders correctly with type="slider" 1`] = `
   flex: 0 0 undefined;
 }
 
-.cache-ql3pn2 {
+.cache-1tpq01d-Slider {
   border: 1px solid #dce1eb;
   border-radius: 4px;
   width: 240px;
@@ -979,7 +979,7 @@ exports[`Placeholder renders correctly with type="slider" 1`] = `
   margin-right: 16px;
 }
 
-.cache-1qirhp0 {
+.cache-1xq1if8-Slider {
   border: 1px solid #dce1eb;
   background-color: #dce1eb;
   border-top-right-radius: 4px;
@@ -1015,31 +1015,31 @@ exports[`Placeholder renders correctly with type="slider" 1`] = `
       class="cache-sygccq-Slider e7ah3bn0"
     >
       <div
-        class="cache-ql3pn2"
+        class="cache-1tpq01d-Slider"
       >
         <div
-          class="cache-1qirhp0"
+          class="cache-1xq1if8-Slider"
         />
       </div>
       <div
-        class="cache-ql3pn2"
+        class="cache-1tpq01d-Slider"
       >
         <div
-          class="cache-1qirhp0"
+          class="cache-1xq1if8-Slider"
         />
       </div>
       <div
-        class="cache-ql3pn2"
+        class="cache-1tpq01d-Slider"
       >
         <div
-          class="cache-1qirhp0"
+          class="cache-1xq1if8-Slider"
         />
       </div>
       <div
-        class="cache-ql3pn2"
+        class="cache-1tpq01d-Slider"
       >
         <div
-          class="cache-1qirhp0"
+          class="cache-1xq1if8-Slider"
         />
       </div>
     </div>
diff --git a/src/components/StatusIndicator/__tests__/__snapshots__/index.tsx.snap b/src/components/StatusIndicator/__tests__/__snapshots__/index.tsx.snap
index 3deb561d21..563760e537 100644
--- a/src/components/StatusIndicator/__tests__/__snapshots__/index.tsx.snap
+++ b/src/components/StatusIndicator/__tests__/__snapshots__/index.tsx.snap
@@ -34,7 +34,7 @@ exports[`StatusIndicator render animated 1`] = `
 
 exports[`StatusIndicator render available 1`] = `
 <DocumentFragment>
-  .cache-c1ktzk-StatusIndicator {
+  .cache-1avkw60 {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -43,14 +43,14 @@ exports[`StatusIndicator render available 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-c1ktzk-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1avkw60 e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render creating 1`] = `
 <DocumentFragment>
-  .cache-q5x4l5-StatusIndicator {
+  .cache-1c0b7ua {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -59,14 +59,14 @@ exports[`StatusIndicator render creating 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-q5x4l5-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1c0b7ua e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render deleting 1`] = `
 <DocumentFragment>
-  .cache-q5x4l5-StatusIndicator {
+  .cache-1c0b7ua {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -75,14 +75,14 @@ exports[`StatusIndicator render deleting 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-q5x4l5-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1c0b7ua e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render deployed 1`] = `
 <DocumentFragment>
-  .cache-c1ktzk-StatusIndicator {
+  .cache-1avkw60 {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -91,14 +91,14 @@ exports[`StatusIndicator render deployed 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-c1ktzk-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1avkw60 e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render disk_full 1`] = `
 <DocumentFragment>
-  .cache-3na4b1-StatusIndicator {
+  .cache-qgc2qw {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -107,14 +107,14 @@ exports[`StatusIndicator render disk_full 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-3na4b1-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-qgc2qw e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render error 1`] = `
 <DocumentFragment>
-  .cache-3na4b1-StatusIndicator {
+  .cache-qgc2qw {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -123,14 +123,14 @@ exports[`StatusIndicator render error 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-3na4b1-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-qgc2qw e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render locked 1`] = `
 <DocumentFragment>
-  .cache-3na4b1-StatusIndicator {
+  .cache-qgc2qw {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -139,14 +139,14 @@ exports[`StatusIndicator render locked 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-3na4b1-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-qgc2qw e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render pending 1`] = `
 <DocumentFragment>
-  .cache-q5x4l5-StatusIndicator {
+  .cache-1c0b7ua {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -155,14 +155,14 @@ exports[`StatusIndicator render pending 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-q5x4l5-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1c0b7ua e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render ready 1`] = `
 <DocumentFragment>
-  .cache-c1ktzk-StatusIndicator {
+  .cache-1avkw60 {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -171,14 +171,14 @@ exports[`StatusIndicator render ready 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-c1ktzk-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1avkw60 e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render running 1`] = `
 <DocumentFragment>
-  .cache-c1ktzk-StatusIndicator {
+  .cache-1avkw60 {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -187,14 +187,14 @@ exports[`StatusIndicator render running 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-c1ktzk-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1avkw60 e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render snapshotting 1`] = `
 <DocumentFragment>
-  .cache-q5x4l5-StatusIndicator {
+  .cache-1c0b7ua {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -203,14 +203,14 @@ exports[`StatusIndicator render snapshotting 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-q5x4l5-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1c0b7ua e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render starting 1`] = `
 <DocumentFragment>
-  .cache-q5x4l5-StatusIndicator {
+  .cache-1c0b7ua {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -219,14 +219,14 @@ exports[`StatusIndicator render starting 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-q5x4l5-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1c0b7ua e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render stopped 1`] = `
 <DocumentFragment>
-  .cache-1aoiwak-StatusIndicator {
+  .cache-otih8l {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -235,14 +235,14 @@ exports[`StatusIndicator render stopped 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-1aoiwak-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-otih8l e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render stopped_in_place 1`] = `
 <DocumentFragment>
-  .cache-183lxe4-StatusIndicator {
+  .cache-86irys {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -251,14 +251,14 @@ exports[`StatusIndicator render stopped_in_place 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-183lxe4-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-86irys e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render stopping 1`] = `
 <DocumentFragment>
-  .cache-q5x4l5-StatusIndicator {
+  .cache-1c0b7ua {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -267,14 +267,14 @@ exports[`StatusIndicator render stopping 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-q5x4l5-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1c0b7ua e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render unavailable 1`] = `
 <DocumentFragment>
-  .cache-3na4b1-StatusIndicator {
+  .cache-qgc2qw {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -283,14 +283,14 @@ exports[`StatusIndicator render unavailable 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-3na4b1-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-qgc2qw e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render unknow 1`] = `
 <DocumentFragment>
-  .cache-q5x4l5-StatusIndicator {
+  .cache-1c0b7ua {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -299,14 +299,14 @@ exports[`StatusIndicator render unknow 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-q5x4l5-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1c0b7ua e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render updating 1`] = `
 <DocumentFragment>
-  .cache-q5x4l5-StatusIndicator {
+  .cache-1c0b7ua {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -315,14 +315,14 @@ exports[`StatusIndicator render updating 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-q5x4l5-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1c0b7ua e7ah3bn0"
   />
 </DocumentFragment>
 `;
 
 exports[`StatusIndicator render warning 1`] = `
 <DocumentFragment>
-  .cache-q5x4l5-StatusIndicator {
+  .cache-1c0b7ua {
   display: inline-block;
   border-radius: 50%;
   width: 10px;
@@ -331,7 +331,7 @@ exports[`StatusIndicator render warning 1`] = `
 }
 
 <div
-    class="e6t57f80 cache-q5x4l5-StatusIndicator e7ah3bn0"
+    class="e6t57f80 cache-1c0b7ua e7ah3bn0"
   />
 </DocumentFragment>
 `;
diff --git a/src/components/VerificationCode/__tests__/__snapshots__/index.tsx.snap b/src/components/VerificationCode/__tests__/__snapshots__/index.tsx.snap
index 17a9c1bfee..18f2307377 100644
--- a/src/components/VerificationCode/__tests__/__snapshots__/index.tsx.snap
+++ b/src/components/VerificationCode/__tests__/__snapshots__/index.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`VerificationCode renders correctly with default values 1`] = `
 <DocumentFragment>
-  .cache-1vqp5lt {
+  .cache-15e247j-VerificationCode {
   border: solid 1px #dce1eb;
   font-size: 24px;
   color: #4a4f62;
@@ -13,23 +13,23 @@ exports[`VerificationCode renders correctly with default values 1`] = `
   height: 64px;
 }
 
-.cache-1vqp5lt:last-child {
+.cache-15e247j-VerificationCode:last-child {
   margin-right: 0;
 }
 
-.cache-1vqp5lt::-webkit-input-placeholder {
+.cache-15e247j-VerificationCode::-webkit-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::-moz-placeholder {
+.cache-15e247j-VerificationCode::-moz-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt:-ms-input-placeholder {
+.cache-15e247j-VerificationCode:-ms-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::placeholder {
+.cache-15e247j-VerificationCode::placeholder {
   color: #dce1eb;
 }
 
@@ -38,7 +38,7 @@ exports[`VerificationCode renders correctly with default values 1`] = `
   >
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="0"
       id="verification-code-0"
       pattern="[0-9]*"
@@ -48,7 +48,7 @@ exports[`VerificationCode renders correctly with default values 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="1"
       id="verification-code-1"
       pattern="[0-9]*"
@@ -58,7 +58,7 @@ exports[`VerificationCode renders correctly with default values 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="2"
       id="verification-code-2"
       pattern="[0-9]*"
@@ -68,7 +68,7 @@ exports[`VerificationCode renders correctly with default values 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="3"
       id="verification-code-3"
       pattern="[0-9]*"
@@ -82,7 +82,7 @@ exports[`VerificationCode renders correctly with default values 1`] = `
 
 exports[`VerificationCode renders correctly with initial value and placeholder and 6 fields 1`] = `
 <DocumentFragment>
-  .cache-1vqp5lt {
+  .cache-15e247j-VerificationCode {
   border: solid 1px #dce1eb;
   font-size: 24px;
   color: #4a4f62;
@@ -93,23 +93,23 @@ exports[`VerificationCode renders correctly with initial value and placeholder a
   height: 64px;
 }
 
-.cache-1vqp5lt:last-child {
+.cache-15e247j-VerificationCode:last-child {
   margin-right: 0;
 }
 
-.cache-1vqp5lt::-webkit-input-placeholder {
+.cache-15e247j-VerificationCode::-webkit-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::-moz-placeholder {
+.cache-15e247j-VerificationCode::-moz-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt:-ms-input-placeholder {
+.cache-15e247j-VerificationCode:-ms-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::placeholder {
+.cache-15e247j-VerificationCode::placeholder {
   color: #dce1eb;
 }
 
@@ -118,7 +118,7 @@ exports[`VerificationCode renders correctly with initial value and placeholder a
   >
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="0"
       id="verification-code-0"
       pattern="[0-9]*"
@@ -128,7 +128,7 @@ exports[`VerificationCode renders correctly with initial value and placeholder a
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="1"
       id="verification-code-1"
       pattern="[0-9]*"
@@ -138,7 +138,7 @@ exports[`VerificationCode renders correctly with initial value and placeholder a
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="2"
       id="verification-code-2"
       pattern="[0-9]*"
@@ -148,7 +148,7 @@ exports[`VerificationCode renders correctly with initial value and placeholder a
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="3"
       id="verification-code-3"
       pattern="[0-9]*"
@@ -158,7 +158,7 @@ exports[`VerificationCode renders correctly with initial value and placeholder a
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="4"
       id="verification-code-4"
       pattern="[0-9]*"
@@ -168,7 +168,7 @@ exports[`VerificationCode renders correctly with initial value and placeholder a
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="5"
       id="verification-code-5"
       pattern="[0-9]*"
@@ -182,7 +182,7 @@ exports[`VerificationCode renders correctly with initial value and placeholder a
 
 exports[`VerificationCode should handle and replace non number with "" when type is number 1`] = `
 <DocumentFragment>
-  .cache-1vqp5lt {
+  .cache-15e247j-VerificationCode {
   border: solid 1px #dce1eb;
   font-size: 24px;
   color: #4a4f62;
@@ -193,23 +193,23 @@ exports[`VerificationCode should handle and replace non number with "" when type
   height: 64px;
 }
 
-.cache-1vqp5lt:last-child {
+.cache-15e247j-VerificationCode:last-child {
   margin-right: 0;
 }
 
-.cache-1vqp5lt::-webkit-input-placeholder {
+.cache-15e247j-VerificationCode::-webkit-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::-moz-placeholder {
+.cache-15e247j-VerificationCode::-moz-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt:-ms-input-placeholder {
+.cache-15e247j-VerificationCode:-ms-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::placeholder {
+.cache-15e247j-VerificationCode::placeholder {
   color: #dce1eb;
 }
 
@@ -218,7 +218,7 @@ exports[`VerificationCode should handle and replace non number with "" when type
   >
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="0"
       id="verification-code-0"
       pattern="[0-9]*"
@@ -228,7 +228,7 @@ exports[`VerificationCode should handle and replace non number with "" when type
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="1"
       id="verification-code-1"
       pattern="[0-9]*"
@@ -238,7 +238,7 @@ exports[`VerificationCode should handle and replace non number with "" when type
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="2"
       id="verification-code-2"
       pattern="[0-9]*"
@@ -248,7 +248,7 @@ exports[`VerificationCode should handle and replace non number with "" when type
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="3"
       id="verification-code-3"
       pattern="[0-9]*"
@@ -262,7 +262,7 @@ exports[`VerificationCode should handle and replace non number with "" when type
 
 exports[`VerificationCode should handle paste when type is not number 1`] = `
 <DocumentFragment>
-  .cache-1vqp5lt {
+  .cache-15e247j-VerificationCode {
   border: solid 1px #dce1eb;
   font-size: 24px;
   color: #4a4f62;
@@ -273,23 +273,23 @@ exports[`VerificationCode should handle paste when type is not number 1`] = `
   height: 64px;
 }
 
-.cache-1vqp5lt:last-child {
+.cache-15e247j-VerificationCode:last-child {
   margin-right: 0;
 }
 
-.cache-1vqp5lt::-webkit-input-placeholder {
+.cache-15e247j-VerificationCode::-webkit-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::-moz-placeholder {
+.cache-15e247j-VerificationCode::-moz-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt:-ms-input-placeholder {
+.cache-15e247j-VerificationCode:-ms-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::placeholder {
+.cache-15e247j-VerificationCode::placeholder {
   color: #dce1eb;
 }
 
@@ -298,7 +298,7 @@ exports[`VerificationCode should handle paste when type is not number 1`] = `
   >
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="0"
       id="verification-code-0"
       placeholder=""
@@ -307,7 +307,7 @@ exports[`VerificationCode should handle paste when type is not number 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="1"
       id="verification-code-1"
       placeholder=""
@@ -316,7 +316,7 @@ exports[`VerificationCode should handle paste when type is not number 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="2"
       id="verification-code-2"
       placeholder=""
@@ -325,7 +325,7 @@ exports[`VerificationCode should handle paste when type is not number 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="3"
       id="verification-code-3"
       placeholder=""
@@ -334,7 +334,7 @@ exports[`VerificationCode should handle paste when type is not number 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="4"
       id="verification-code-4"
       placeholder=""
@@ -343,7 +343,7 @@ exports[`VerificationCode should handle paste when type is not number 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="5"
       id="verification-code-5"
       placeholder=""
@@ -356,7 +356,7 @@ exports[`VerificationCode should handle paste when type is not number 1`] = `
 
 exports[`VerificationCode should handle paste with no overflowing values 1`] = `
 <DocumentFragment>
-  .cache-1vqp5lt {
+  .cache-15e247j-VerificationCode {
   border: solid 1px #dce1eb;
   font-size: 24px;
   color: #4a4f62;
@@ -367,23 +367,23 @@ exports[`VerificationCode should handle paste with no overflowing values 1`] = `
   height: 64px;
 }
 
-.cache-1vqp5lt:last-child {
+.cache-15e247j-VerificationCode:last-child {
   margin-right: 0;
 }
 
-.cache-1vqp5lt::-webkit-input-placeholder {
+.cache-15e247j-VerificationCode::-webkit-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::-moz-placeholder {
+.cache-15e247j-VerificationCode::-moz-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt:-ms-input-placeholder {
+.cache-15e247j-VerificationCode:-ms-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::placeholder {
+.cache-15e247j-VerificationCode::placeholder {
   color: #dce1eb;
 }
 
@@ -392,7 +392,7 @@ exports[`VerificationCode should handle paste with no overflowing values 1`] = `
   >
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="0"
       id="verification-code-0"
       pattern="[0-9]*"
@@ -402,7 +402,7 @@ exports[`VerificationCode should handle paste with no overflowing values 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="1"
       id="verification-code-1"
       pattern="[0-9]*"
@@ -412,7 +412,7 @@ exports[`VerificationCode should handle paste with no overflowing values 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="2"
       id="verification-code-2"
       pattern="[0-9]*"
@@ -422,7 +422,7 @@ exports[`VerificationCode should handle paste with no overflowing values 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="3"
       id="verification-code-3"
       pattern="[0-9]*"
@@ -436,7 +436,7 @@ exports[`VerificationCode should handle paste with no overflowing values 1`] = `
 
 exports[`VerificationCode should handle paste with overflowing values 1`] = `
 <DocumentFragment>
-  .cache-1vqp5lt {
+  .cache-15e247j-VerificationCode {
   border: solid 1px #dce1eb;
   font-size: 24px;
   color: #4a4f62;
@@ -447,23 +447,23 @@ exports[`VerificationCode should handle paste with overflowing values 1`] = `
   height: 64px;
 }
 
-.cache-1vqp5lt:last-child {
+.cache-15e247j-VerificationCode:last-child {
   margin-right: 0;
 }
 
-.cache-1vqp5lt::-webkit-input-placeholder {
+.cache-15e247j-VerificationCode::-webkit-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::-moz-placeholder {
+.cache-15e247j-VerificationCode::-moz-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt:-ms-input-placeholder {
+.cache-15e247j-VerificationCode:-ms-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::placeholder {
+.cache-15e247j-VerificationCode::placeholder {
   color: #dce1eb;
 }
 
@@ -472,7 +472,7 @@ exports[`VerificationCode should handle paste with overflowing values 1`] = `
   >
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="0"
       id="verification-code-0"
       pattern="[0-9]*"
@@ -482,7 +482,7 @@ exports[`VerificationCode should handle paste with overflowing values 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="1"
       id="verification-code-1"
       pattern="[0-9]*"
@@ -492,7 +492,7 @@ exports[`VerificationCode should handle paste with overflowing values 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="2"
       id="verification-code-2"
       pattern="[0-9]*"
@@ -502,7 +502,7 @@ exports[`VerificationCode should handle paste with overflowing values 1`] = `
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="3"
       id="verification-code-3"
       pattern="[0-9]*"
@@ -516,7 +516,7 @@ exports[`VerificationCode should handle paste with overflowing values 1`] = `
 
 exports[`VerificationCode should handle paste with overflowing values at different index than 0 1`] = `
 <DocumentFragment>
-  .cache-1vqp5lt {
+  .cache-15e247j-VerificationCode {
   border: solid 1px #dce1eb;
   font-size: 24px;
   color: #4a4f62;
@@ -527,23 +527,23 @@ exports[`VerificationCode should handle paste with overflowing values at differe
   height: 64px;
 }
 
-.cache-1vqp5lt:last-child {
+.cache-15e247j-VerificationCode:last-child {
   margin-right: 0;
 }
 
-.cache-1vqp5lt::-webkit-input-placeholder {
+.cache-15e247j-VerificationCode::-webkit-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::-moz-placeholder {
+.cache-15e247j-VerificationCode::-moz-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt:-ms-input-placeholder {
+.cache-15e247j-VerificationCode:-ms-input-placeholder {
   color: #dce1eb;
 }
 
-.cache-1vqp5lt::placeholder {
+.cache-15e247j-VerificationCode::placeholder {
   color: #dce1eb;
 }
 
@@ -552,7 +552,7 @@ exports[`VerificationCode should handle paste with overflowing values at differe
   >
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="0"
       id="verification-code-0"
       pattern="[0-9]*"
@@ -562,7 +562,7 @@ exports[`VerificationCode should handle paste with overflowing values at differe
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="1"
       id="verification-code-1"
       pattern="[0-9]*"
@@ -572,7 +572,7 @@ exports[`VerificationCode should handle paste with overflowing values at differe
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="2"
       id="verification-code-2"
       pattern="[0-9]*"
@@ -582,7 +582,7 @@ exports[`VerificationCode should handle paste with overflowing values at differe
     />
     <input
       aria-invalid="false"
-      class="cache-1vqp5lt e1odpyad0"
+      class="cache-15e247j-VerificationCode e1odpyad0"
       data-id="3"
       id="verification-code-3"
       pattern="[0-9]*"
diff --git a/yarn.lock b/yarn.lock
index ec0360a3e8..21f53821d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1899,12 +1899,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/eslint-plugin@npm:11.5.0":
-  version: 11.5.0
-  resolution: "@emotion/eslint-plugin@npm:11.5.0"
+"@emotion/eslint-plugin@npm:11.7.0":
+  version: 11.7.0
+  resolution: "@emotion/eslint-plugin@npm:11.7.0"
   peerDependencies:
-    eslint: 6 || 7
-  checksum: e3a9aa65cd0d2b2def841a64bc9a1c7e99e766395885c48b15dff3efbac051c2adb797de1e4444f014b6722610241e616d91deeb4f219c6352dbf72059d694d5
+    eslint: 6 || 7 || 8
+  checksum: 71bdeed3663e00af57631d810d615517051e8941799ef9177083e3d5db45aada21288383bcb7d150aaa29a6519b2cabe3dc9a2e61f1262290e4b5b3d5644f93a
   languageName: node
   linkType: hard
 
@@ -1968,9 +1968,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:11.6.0, @emotion/react@npm:^11.1.1":
-  version: 11.6.0
-  resolution: "@emotion/react@npm:11.6.0"
+"@emotion/react@npm:11.7.0, @emotion/react@npm:^11.1.1":
+  version: 11.7.0
+  resolution: "@emotion/react@npm:11.7.0"
   dependencies:
     "@babel/runtime": ^7.13.10
     "@emotion/cache": ^11.6.0
@@ -1987,7 +1987,7 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 4fb2d108dc32716d1f162026ac5fdbd0662e3b435a34fb324629d72bb6bff61b18ac8975b51457c16ffa41543bade5d07558566ab76420b3926fbb9159441232
+  checksum: 8b50d61caabe04ae413ae23b98c170da643754ec89f25eb001464095685686585d0f88988bc36432f231e6de6abdbee73308c42ba427de9eaaf5a54d7f2f6ae5
   languageName: node
   linkType: hard
 
@@ -3316,17 +3316,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@scaleway/jest-helpers@npm:1.1.4":
-  version: 1.1.4
-  resolution: "@scaleway/jest-helpers@npm:1.1.4"
+"@scaleway/jest-helpers@npm:1.1.5":
+  version: 1.1.5
+  resolution: "@scaleway/jest-helpers@npm:1.1.5"
   dependencies:
     "@emotion/cache": 11.6.0
     "@emotion/jest": 11.6.0
-    "@emotion/react": 11.6.0
+    "@emotion/react": 11.7.0
     "@testing-library/react": 12.1.2
   peerDependencies:
     react: ^17.0.1
-  checksum: fe29160609b0b50fd5cee800af2254c9fa4912408643c84bc592e82fd724988a1242bceeae5742fb4dce0487090bec3ed22000a2aa1255c00a211c8b285ea1fb
+  checksum: 6f36fe3e082011249ac7aabdacb1c5bcf5fe0344cd394b9b703d778fc501098e8ac8626f4e966772c9163d3ad81ad90f1d4df8d9d1f42e7a423b0671fcb865f9
   languageName: node
   linkType: hard
 
@@ -3353,9 +3353,9 @@ __metadata:
     "@commitlint/config-conventional": 15.0.0
     "@emotion/babel-preset-css-prop": 11.2.0
     "@emotion/cache": 11.6.0
-    "@emotion/eslint-plugin": 11.5.0
+    "@emotion/eslint-plugin": 11.7.0
     "@emotion/jest": 11.6.0
-    "@emotion/react": 11.6.0
+    "@emotion/react": 11.7.0
     "@emotion/serialize": 1.0.2
     "@emotion/styled": 11.6.0
     "@nivo/bar": 0.74.0
@@ -3366,7 +3366,7 @@ __metadata:
     "@rollup/plugin-node-resolve": 13.0.6
     "@rollup/plugin-url": 6.1.0
     "@scaleway/eslint-config-react": 3.0.0
-    "@scaleway/jest-helpers": 1.1.4
+    "@scaleway/jest-helpers": 1.1.5
     "@scaleway/random-name": 3.0.0
     "@scaleway/use-i18n": 3.1.23
     "@semantic-release/changelog": 6.0.1
@@ -3445,7 +3445,7 @@ __metadata:
     webpack: 5.61.0
     zxcvbn: 4.4.2
   peerDependencies:
-    "@emotion/react": 11.6.0
+    "@emotion/react": 11.7.0
     "@emotion/styled": 11.6.0
     react: 17.0.2
     react-dom: 17.0.2