From e56719e705e32912bd9066fa730835b460eda460 Mon Sep 17 00:00:00 2001
From: Alexandre Philibeaux <aphilibeaux@scaleway.com>
Date: Thu, 14 Apr 2022 14:52:31 +0000
Subject: [PATCH] test(update): upgrade scaleway ui

---
 .../__snapshots__/index.spec.tsx.snap         |   8 +-
 .../__snapshots__/index.spec.tsx.snap         |  34 +-
 .../__snapshots__/index.spec.tsx.snap         |   8 +-
 .../__snapshots__/index.spec.tsx.snap         |  85 ++--
 .../__snapshots__/index.spec.tsx.snap         |  40 +-
 .../__snapshots__/index.spec.tsx.snap         |  28 +-
 .../__snapshots__/index.spec.tsx.snap         | 392 +++++++++---------
 .../__snapshots__/index.spec.tsx.snap         |  30 +-
 .../__snapshots__/index.spec.tsx.snap         |  92 ++--
 9 files changed, 356 insertions(+), 361 deletions(-)

diff --git a/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap b/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap
index 16e32667..6d570950 100644
--- a/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -553,8 +553,8 @@ exports[`CheckboxField should render correctly with errors 1`] = `
   outline: 1px #c4c9d6 dotted;
 }
 
-.cache-1s0pypy-StyledIcon-sizeStyles-StyledIcon {
-  fill: #ef5774;
+.cache-1fsoyqr-StyledIcon-sizeStyles-StyledIcon {
+  fill: #ff8c69;
   height: 24px;
   width: 24px;
   min-width: 24px;
@@ -562,7 +562,7 @@ exports[`CheckboxField should render correctly with errors 1`] = `
   box-sizing: content-box;
 }
 
-.cache-1s0pypy-StyledIcon-sizeStyles-StyledIcon.cache-1s0pypy-StyledIcon-sizeStyles-StyledIcon {
+.cache-1fsoyqr-StyledIcon-sizeStyles-StyledIcon.cache-1fsoyqr-StyledIcon-sizeStyles-StyledIcon {
   vertical-align: middle;
   margin-right: 10px;
   padding: 2px;
@@ -612,7 +612,7 @@ exports[`CheckboxField should render correctly with errors 1`] = `
           type="checkbox"
         />
         <svg
-          class="eu28k4m3 etwatq50 cache-1s0pypy-StyledIcon-sizeStyles-StyledIcon"
+          class="eu28k4m3 etwatq50 cache-1fsoyqr-StyledIcon-sizeStyles-StyledIcon"
           viewBox="0 0 24 24"
         >
           <path
diff --git a/src/components/RadioBorderedBoxField/__tests__/__snapshots__/index.spec.tsx.snap b/src/components/RadioBorderedBoxField/__tests__/__snapshots__/index.spec.tsx.snap
index f78f02f7..2d4c9e4c 100644
--- a/src/components/RadioBorderedBoxField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/components/RadioBorderedBoxField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`RadioBorderedBoxField should render correctly 1`] = `
 <DocumentFragment>
-  .cache-1kz06s5-BorderedBox-StyledBox {
+  .cache-1dm7ubo-BorderedBox-StyledBorderedBox {
   padding: 24px;
   border-radius: 4px;
   border: 1px solid #d4dae7;
@@ -119,7 +119,7 @@ exports[`RadioBorderedBoxField should render correctly 1`] = `
     novalidate=""
   >
     <div
-      class="cache-1kz06s5-BorderedBox-StyledBox e13z6rra3"
+      class="cache-1dm7ubo-BorderedBox-StyledBorderedBox e13z6rra3"
     >
       <div
         class="cache-zdyabc-StyledRadioContainer e13z6rra2"
@@ -177,13 +177,13 @@ exports[`RadioBorderedBoxField should render correctly 1`] = `
 
 exports[`RadioBorderedBoxField should render correctly checked 1`] = `
 <DocumentFragment>
-  .cache-1d58127-BorderedBox-StyledBox {
+  .cache-1o75o4c-BorderedBox-StyledBorderedBox {
   padding: 24px;
   border-radius: 4px;
   border: 1px solid #d4dae7;
   display: block;
   border: 1px solid #4f0599!important;
-  box-shadow: 0 0 0 2px rgba(79,5,153,0.25);
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
 .cache-zdyabc-StyledRadioContainer {
@@ -296,7 +296,7 @@ exports[`RadioBorderedBoxField should render correctly checked 1`] = `
     novalidate=""
   >
     <div
-      class="cache-1d58127-BorderedBox-StyledBox e13z6rra3"
+      class="cache-1o75o4c-BorderedBox-StyledBorderedBox e13z6rra3"
     >
       <div
         class="cache-zdyabc-StyledRadioContainer e13z6rra2"
@@ -355,7 +355,7 @@ exports[`RadioBorderedBoxField should render correctly checked 1`] = `
 
 exports[`RadioBorderedBoxField should render correctly disabled 1`] = `
 <DocumentFragment>
-  .cache-18iq4fs-BorderedBox-StyledBox {
+  .cache-mro85z-BorderedBox-StyledBorderedBox {
   padding: 24px;
   border-radius: 4px;
   border: 1px solid #d4dae7;
@@ -465,7 +465,7 @@ exports[`RadioBorderedBoxField should render correctly disabled 1`] = `
     novalidate=""
   >
     <div
-      class="cache-18iq4fs-BorderedBox-StyledBox e13z6rra3"
+      class="cache-mro85z-BorderedBox-StyledBorderedBox e13z6rra3"
       disabled=""
     >
       <div
@@ -527,13 +527,13 @@ exports[`RadioBorderedBoxField should render correctly disabled 1`] = `
 
 exports[`RadioBorderedBoxField should render correctly with errors 1`] = `
 <DocumentFragment>
-  .cache-404zjn-BorderedBox-StyledBox {
+  .cache-1lgob3g-BorderedBox-StyledBorderedBox {
   padding: 24px;
   border-radius: 4px;
   border: 1px solid #d4dae7;
   display: block;
   border: 1px solid #dd3252!important;
-  box-shadow: 0 0 0 2px rgba(221,50,82,0.25);
+  box-shadow: 0px 0px 0px 3px #DD325240;
 }
 
 .cache-zdyabc-StyledRadioContainer {
@@ -600,15 +600,15 @@ exports[`RadioBorderedBoxField should render correctly with errors 1`] = `
   margin-right: 8px;
 }
 
-.cache-cuzpql-StyledIcon-sizeStyles-StyledIcon {
-  fill: #ef5774;
+.cache-1asq98u-StyledIcon-sizeStyles-StyledIcon {
+  fill: #ff8c69;
   height: 24px;
   width: 24px;
   min-width: 24px;
   min-height: 24px;
 }
 
-.cache-cuzpql-StyledIcon-sizeStyles-StyledIcon.cache-cuzpql-StyledIcon-sizeStyles-StyledIcon {
+.cache-1asq98u-StyledIcon-sizeStyles-StyledIcon.cache-1asq98u-StyledIcon-sizeStyles-StyledIcon {
   vertical-align: middle;
 }
 
@@ -651,7 +651,7 @@ exports[`RadioBorderedBoxField should render correctly with errors 1`] = `
     novalidate=""
   >
     <div
-      class="cache-404zjn-BorderedBox-StyledBox e13z6rra3"
+      class="cache-1lgob3g-BorderedBox-StyledBorderedBox e13z6rra3"
     >
       <div
         class="cache-zdyabc-StyledRadioContainer e13z6rra2"
@@ -667,7 +667,7 @@ exports[`RadioBorderedBoxField should render correctly with errors 1`] = `
               class="cache-1p2voni-IconContainer e1duuirp3"
             >
               <svg
-                class="e1duuirp4 etwatq50 cache-cuzpql-StyledIcon-sizeStyles-StyledIcon"
+                class="e1duuirp4 etwatq50 cache-1asq98u-StyledIcon-sizeStyles-StyledIcon"
                 viewBox="0 0 24 24"
               >
                 <path
@@ -716,13 +716,13 @@ exports[`RadioBorderedBoxField should render correctly with errors 1`] = `
 
 exports[`RadioBorderedBoxField should trigger events correctly 1`] = `
 <DocumentFragment>
-  .cache-1d58127-BorderedBox-StyledBox {
+  .cache-1o75o4c-BorderedBox-StyledBorderedBox {
   padding: 24px;
   border-radius: 4px;
   border: 1px solid #d4dae7;
   display: block;
   border: 1px solid #4f0599!important;
-  box-shadow: 0 0 0 2px rgba(79,5,153,0.25);
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
 .cache-zdyabc-StyledRadioContainer {
@@ -835,7 +835,7 @@ exports[`RadioBorderedBoxField should trigger events correctly 1`] = `
     novalidate=""
   >
     <div
-      class="cache-1d58127-BorderedBox-StyledBox e13z6rra3"
+      class="cache-1o75o4c-BorderedBox-StyledBorderedBox e13z6rra3"
     >
       <div
         class="cache-zdyabc-StyledRadioContainer e13z6rra2"
diff --git a/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap b/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap
index 35156c5c..0e79027f 100644
--- a/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -438,15 +438,15 @@ exports[`RadioField should render correctly with errors 1`] = `
   margin-right: 8px;
 }
 
-.cache-cuzpql-StyledIcon-sizeStyles-StyledIcon {
-  fill: #ef5774;
+.cache-1asq98u-StyledIcon-sizeStyles-StyledIcon {
+  fill: #ff8c69;
   height: 24px;
   width: 24px;
   min-width: 24px;
   min-height: 24px;
 }
 
-.cache-cuzpql-StyledIcon-sizeStyles-StyledIcon.cache-cuzpql-StyledIcon-sizeStyles-StyledIcon {
+.cache-1asq98u-StyledIcon-sizeStyles-StyledIcon.cache-1asq98u-StyledIcon-sizeStyles-StyledIcon {
   vertical-align: middle;
 }
 
@@ -492,7 +492,7 @@ exports[`RadioField should render correctly with errors 1`] = `
           class="cache-1p2voni-IconContainer e1duuirp3"
         >
           <svg
-            class="e1duuirp4 etwatq50 cache-cuzpql-StyledIcon-sizeStyles-StyledIcon"
+            class="e1duuirp4 etwatq50 cache-1asq98u-StyledIcon-sizeStyles-StyledIcon"
             viewBox="0 0 24 24"
           >
             <path
diff --git a/src/components/RichSelectField/__tests__/__snapshots__/index.spec.tsx.snap b/src/components/RichSelectField/__tests__/__snapshots__/index.spec.tsx.snap
index 6854cef3..70e38f94 100644
--- a/src/components/RichSelectField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/components/RichSelectField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -24,7 +24,7 @@ exports[`RichSelectField should render correctly 1`] = `
   white-space: nowrap;
 }
 
-.cache-19bz70h-control {
+.cache-1lfuu8w-control {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -61,24 +61,24 @@ exports[`RichSelectField should render correctly 1`] = `
   animation: none;
 }
 
-.cache-19bz70h-control:hover {
+.cache-1lfuu8w-control:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.cache-19bz70h-control:focus-within {
+.cache-1lfuu8w-control:focus-within {
   border-color: #4f0599;
-  box-shadow: 0 0 2px 2px rgba(79,5,153,0.25);
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-19bz70h-control:focus-within svg {
+.cache-1lfuu8w-control:focus-within svg {
   fill: #4f0599;
 }
 
-.cache-19bz70h-control:hover {
+.cache-1lfuu8w-control:hover {
   border-color: #390171;
 }
 
-.cache-19bz70h-control:hover svg {
+.cache-1lfuu8w-control:hover svg {
   fill: #4f0599;
 }
 
@@ -264,7 +264,7 @@ exports[`RichSelectField should render correctly 1`] = `
         class="cache-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" cache-19bz70h-control"
+        class=" cache-1lfuu8w-control"
       >
         <div
           class=" cache-evyzo2-ValueContainer"
@@ -292,7 +292,6 @@ exports[`RichSelectField should render correctly 1`] = `
               aria-describedby="react-select-2-placeholder"
               aria-expanded="false"
               aria-haspopup="true"
-              aria-owns="react-select-2-listbox"
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
@@ -369,7 +368,7 @@ exports[`RichSelectField should render correctly disabled 1`] = `
   white-space: nowrap;
 }
 
-.cache-19bz70h-control {
+.cache-1lfuu8w-control {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -406,24 +405,24 @@ exports[`RichSelectField should render correctly disabled 1`] = `
   animation: none;
 }
 
-.cache-19bz70h-control:hover {
+.cache-1lfuu8w-control:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.cache-19bz70h-control:focus-within {
+.cache-1lfuu8w-control:focus-within {
   border-color: #4f0599;
-  box-shadow: 0 0 2px 2px rgba(79,5,153,0.25);
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-19bz70h-control:focus-within svg {
+.cache-1lfuu8w-control:focus-within svg {
   fill: #4f0599;
 }
 
-.cache-19bz70h-control:hover {
+.cache-1lfuu8w-control:hover {
   border-color: #390171;
 }
 
-.cache-19bz70h-control:hover svg {
+.cache-1lfuu8w-control:hover svg {
   fill: #4f0599;
 }
 
@@ -609,7 +608,7 @@ exports[`RichSelectField should render correctly disabled 1`] = `
         class="cache-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" cache-19bz70h-control"
+        class=" cache-1lfuu8w-control"
       >
         <div
           class=" cache-evyzo2-ValueContainer"
@@ -637,7 +636,6 @@ exports[`RichSelectField should render correctly disabled 1`] = `
               aria-describedby="react-select-3-placeholder"
               aria-expanded="false"
               aria-haspopup="true"
-              aria-owns="react-select-3-listbox"
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
@@ -714,7 +712,7 @@ exports[`RichSelectField should render correctly multiple 1`] = `
   white-space: nowrap;
 }
 
-.cache-19bz70h-control {
+.cache-1lfuu8w-control {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -751,24 +749,24 @@ exports[`RichSelectField should render correctly multiple 1`] = `
   animation: none;
 }
 
-.cache-19bz70h-control:hover {
+.cache-1lfuu8w-control:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.cache-19bz70h-control:focus-within {
+.cache-1lfuu8w-control:focus-within {
   border-color: #4f0599;
-  box-shadow: 0 0 2px 2px rgba(79,5,153,0.25);
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-19bz70h-control:focus-within svg {
+.cache-1lfuu8w-control:focus-within svg {
   fill: #4f0599;
 }
 
-.cache-19bz70h-control:hover {
+.cache-1lfuu8w-control:hover {
   border-color: #390171;
 }
 
-.cache-19bz70h-control:hover svg {
+.cache-1lfuu8w-control:hover svg {
   fill: #4f0599;
 }
 
@@ -953,7 +951,7 @@ exports[`RichSelectField should render correctly multiple 1`] = `
         class="cache-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" cache-19bz70h-control"
+        class=" cache-1lfuu8w-control"
       >
         <div
           class=" cache-evyzo2-ValueContainer"
@@ -981,7 +979,6 @@ exports[`RichSelectField should render correctly multiple 1`] = `
               aria-describedby="react-select-4-placeholder"
               aria-expanded="false"
               aria-haspopup="true"
-              aria-owns="react-select-4-listbox"
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
@@ -1059,7 +1056,7 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
   white-space: nowrap;
 }
 
-.cache-19bz70h-control {
+.cache-1lfuu8w-control {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1096,24 +1093,24 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
   animation: none;
 }
 
-.cache-19bz70h-control:hover {
+.cache-1lfuu8w-control:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.cache-19bz70h-control:focus-within {
+.cache-1lfuu8w-control:focus-within {
   border-color: #4f0599;
-  box-shadow: 0 0 2px 2px rgba(79,5,153,0.25);
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-19bz70h-control:focus-within svg {
+.cache-1lfuu8w-control:focus-within svg {
   fill: #4f0599;
 }
 
-.cache-19bz70h-control:hover {
+.cache-1lfuu8w-control:hover {
   border-color: #390171;
 }
 
-.cache-19bz70h-control:hover svg {
+.cache-1lfuu8w-control:hover svg {
   fill: #4f0599;
 }
 
@@ -1299,7 +1296,7 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
         class="cache-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" cache-19bz70h-control"
+        class=" cache-1lfuu8w-control"
       >
         <div
           class=" cache-evyzo2-ValueContainer"
@@ -1327,7 +1324,6 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
               aria-describedby="react-select-5-placeholder"
               aria-expanded="false"
               aria-haspopup="true"
-              aria-owns="react-select-5-listbox"
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
@@ -1404,7 +1400,7 @@ exports[`RichSelectField should trigger events 1`] = `
   white-space: nowrap;
 }
 
-.cache-19bz70h-control {
+.cache-1lfuu8w-control {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1441,24 +1437,24 @@ exports[`RichSelectField should trigger events 1`] = `
   animation: none;
 }
 
-.cache-19bz70h-control:hover {
+.cache-1lfuu8w-control:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.cache-19bz70h-control:focus-within {
+.cache-1lfuu8w-control:focus-within {
   border-color: #4f0599;
-  box-shadow: 0 0 2px 2px rgba(79,5,153,0.25);
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-19bz70h-control:focus-within svg {
+.cache-1lfuu8w-control:focus-within svg {
   fill: #4f0599;
 }
 
-.cache-19bz70h-control:hover {
+.cache-1lfuu8w-control:hover {
   border-color: #390171;
 }
 
-.cache-19bz70h-control:hover svg {
+.cache-1lfuu8w-control:hover svg {
   fill: #4f0599;
 }
 
@@ -1659,7 +1655,7 @@ exports[`RichSelectField should trigger events 1`] = `
         class="cache-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" cache-19bz70h-control"
+        class=" cache-1lfuu8w-control"
       >
         <div
           class=" cache-evyzo2-ValueContainer"
@@ -1685,7 +1681,6 @@ exports[`RichSelectField should trigger events 1`] = `
               aria-autocomplete="list"
               aria-expanded="false"
               aria-haspopup="true"
-              aria-owns="react-select-8-listbox"
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
diff --git a/src/components/StepperField/__tests__/__snapshots__/index.spec.tsx.snap b/src/components/StepperField/__tests__/__snapshots__/index.spec.tsx.snap
index f78f0c21..ed96c73d 100644
--- a/src/components/StepperField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/components/StepperField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -76,7 +76,7 @@ exports[`StepperField should render correctly 1`] = `
   vertical-align: middle;
 }
 
-.cache-h78v76-StyledCenterBox {
+.cache-zu3ai1-StyledCenterBox {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -102,12 +102,12 @@ exports[`StepperField should render correctly 1`] = `
   max-width: calc(100% - 96px);
 }
 
-.cache-h78v76-StyledCenterBox:hover:not([disabled], :focus) {
+.cache-zu3ai1-StyledCenterBox:hover:not([disabled], :focus) {
   border: 1px solid #4f0599;
 }
 
-.cache-h78v76-StyledCenterBox:focus-within:not([disabled]) {
-  box-shadow: 0 0 2px 2px rgba(79,5,153,0.3);
+.cache-zu3ai1-StyledCenterBox:focus-within:not([disabled]) {
+  box-shadow: 0px 0px 0px 3px #4F059940;
   border: 1px solid #4f0599;
 }
 
@@ -205,7 +205,7 @@ exports[`StepperField should render correctly 1`] = `
       </button>
       <div
         aria-live="assertive"
-        class="cache-h78v76-StyledCenterBox etyrq8m3"
+        class="cache-zu3ai1-StyledCenterBox etyrq8m3"
         role="status"
       >
         <input
@@ -322,7 +322,7 @@ exports[`StepperField should render correctly disabled 1`] = `
   vertical-align: middle;
 }
 
-.cache-h78v76-StyledCenterBox {
+.cache-zu3ai1-StyledCenterBox {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -348,12 +348,12 @@ exports[`StepperField should render correctly disabled 1`] = `
   max-width: calc(100% - 96px);
 }
 
-.cache-h78v76-StyledCenterBox:hover:not([disabled], :focus) {
+.cache-zu3ai1-StyledCenterBox:hover:not([disabled], :focus) {
   border: 1px solid #4f0599;
 }
 
-.cache-h78v76-StyledCenterBox:focus-within:not([disabled]) {
-  box-shadow: 0 0 2px 2px rgba(79,5,153,0.3);
+.cache-zu3ai1-StyledCenterBox:focus-within:not([disabled]) {
+  box-shadow: 0px 0px 0px 3px #4F059940;
   border: 1px solid #4f0599;
 }
 
@@ -408,7 +408,7 @@ exports[`StepperField should render correctly disabled 1`] = `
       </button>
       <div
         aria-live="assertive"
-        class="cache-h78v76-StyledCenterBox etyrq8m3"
+        class="cache-zu3ai1-StyledCenterBox etyrq8m3"
         role="status"
       >
         <input
@@ -521,7 +521,7 @@ exports[`StepperField should trigger event onMinCrossed & onMaxCrossed 1`] = `
   vertical-align: middle;
 }
 
-.cache-h78v76-StyledCenterBox {
+.cache-zu3ai1-StyledCenterBox {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -547,12 +547,12 @@ exports[`StepperField should trigger event onMinCrossed & onMaxCrossed 1`] = `
   max-width: calc(100% - 96px);
 }
 
-.cache-h78v76-StyledCenterBox:hover:not([disabled], :focus) {
+.cache-zu3ai1-StyledCenterBox:hover:not([disabled], :focus) {
   border: 1px solid #4f0599;
 }
 
-.cache-h78v76-StyledCenterBox:focus-within:not([disabled]) {
-  box-shadow: 0 0 2px 2px rgba(79,5,153,0.3);
+.cache-zu3ai1-StyledCenterBox:focus-within:not([disabled]) {
+  box-shadow: 0px 0px 0px 3px #4F059940;
   border: 1px solid #4f0599;
 }
 
@@ -645,7 +645,7 @@ exports[`StepperField should trigger event onMinCrossed & onMaxCrossed 1`] = `
       </button>
       <div
         aria-live="assertive"
-        class="cache-h78v76-StyledCenterBox etyrq8m3"
+        class="cache-zu3ai1-StyledCenterBox etyrq8m3"
         role="status"
       >
         <input
@@ -754,7 +754,7 @@ exports[`StepperField should trigger events correctly 1`] = `
   vertical-align: middle;
 }
 
-.cache-h78v76-StyledCenterBox {
+.cache-zu3ai1-StyledCenterBox {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -780,12 +780,12 @@ exports[`StepperField should trigger events correctly 1`] = `
   max-width: calc(100% - 96px);
 }
 
-.cache-h78v76-StyledCenterBox:hover:not([disabled], :focus) {
+.cache-zu3ai1-StyledCenterBox:hover:not([disabled], :focus) {
   border: 1px solid #4f0599;
 }
 
-.cache-h78v76-StyledCenterBox:focus-within:not([disabled]) {
-  box-shadow: 0 0 2px 2px rgba(79,5,153,0.3);
+.cache-zu3ai1-StyledCenterBox:focus-within:not([disabled]) {
+  box-shadow: 0px 0px 0px 3px #4F059940;
   border: 1px solid #4f0599;
 }
 
@@ -883,7 +883,7 @@ exports[`StepperField should trigger events correctly 1`] = `
       </button>
       <div
         aria-live="assertive"
-        class="cache-h78v76-StyledCenterBox etyrq8m3"
+        class="cache-zu3ai1-StyledCenterBox etyrq8m3"
         role="status"
       >
         <input
diff --git a/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap b/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap
index 6a01f806..d2bed52e 100644
--- a/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`Submit form is invalid 1`] = `
   position: relative;
 }
 
-.cache-r05oyn-StyledInput {
+.cache-17ab1cr-StyledInput {
   -webkit-transition: border-color 0.2s ease,box-shadow 0.2s ease;
   transition: border-color 0.2s ease,box-shadow 0.2s ease;
   -webkit-appearance: none;
@@ -35,49 +35,49 @@ exports[`Submit form is invalid 1`] = `
   padding: 8px;
 }
 
-.cache-r05oyn-StyledInput::-webkit-input-placeholder {
+.cache-17ab1cr-StyledInput::-webkit-input-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-r05oyn-StyledInput::-moz-placeholder {
+.cache-17ab1cr-StyledInput::-moz-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-r05oyn-StyledInput:-ms-input-placeholder {
+.cache-17ab1cr-StyledInput:-ms-input-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-r05oyn-StyledInput::placeholder {
+.cache-17ab1cr-StyledInput::placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-r05oyn-StyledInput:hover,
-.cache-r05oyn-StyledInput:focus {
+.cache-17ab1cr-StyledInput:hover,
+.cache-17ab1cr-StyledInput:focus {
   border-color: #4f0599;
 }
 
-.cache-r05oyn-StyledInput:focus {
-  box-shadow: 0 0 0 2px rgba(79,5,153,0.25);
+.cache-17ab1cr-StyledInput:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
   border-color: #4f0599;
 }
 
-.cache-r05oyn-StyledInput::-webkit-input-placeholder {
+.cache-17ab1cr-StyledInput::-webkit-input-placeholder {
   opacity: 1;
 }
 
-.cache-r05oyn-StyledInput::-moz-placeholder {
+.cache-17ab1cr-StyledInput::-moz-placeholder {
   opacity: 1;
 }
 
-.cache-r05oyn-StyledInput:-ms-input-placeholder {
+.cache-17ab1cr-StyledInput:-ms-input-placeholder {
   opacity: 1;
 }
 
-.cache-r05oyn-StyledInput::placeholder {
+.cache-17ab1cr-StyledInput::placeholder {
   opacity: 1;
 }
 
@@ -187,7 +187,7 @@ exports[`Submit form is invalid 1`] = `
       >
         <input
           autocomplete="on"
-          class="cache-r05oyn-StyledInput e18bmnpq0"
+          class="cache-17ab1cr-StyledInput e18bmnpq0"
           name="toto"
           type="text"
           value="4"
diff --git a/src/components/SwitchField/__tests__/__snapshots__/index.spec.tsx.snap b/src/components/SwitchField/__tests__/__snapshots__/index.spec.tsx.snap
index 781cc4ff..57e168f0 100644
--- a/src/components/SwitchField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/components/SwitchField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`SwitchField should render correctly 1`] = `
   opacity: 0.3;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -57,12 +57,12 @@ exports[`SwitchField should render correctly 1`] = `
   min-width: 48px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #c4c9d6;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
   position: absolute;
   margin-left: 4px;
   margin-right: 4px;
@@ -74,7 +74,7 @@ exports[`SwitchField should render correctly 1`] = `
   bottom: 0;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
   display: block;
   border-radius: 50%;
   width: 24px;
@@ -82,95 +82,95 @@ exports[`SwitchField should render correctly 1`] = `
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: 32px;
   margin-right: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
   margin-right: 32px;
   margin-left: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
   padding: 4px;
   height: 16px;
   min-width: 32px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
   right: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
   width: 16px;
   height: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: calc(
           16px + 4px
         );
   margin-right: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
   margin-right: calc(
           16px + 4px
         );
   margin-left: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
   color: #151a2d;
   background-color: #4f0599;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
   color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #4f0599;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
   color: #4a4f62;
   background-color: #c4c9d6;
   font-weight: bold;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   color: #22c8a2;
   background-color: #cdfcf1;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
   color: #151a2d;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
   box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #22c8a2;
 }
 
@@ -201,7 +201,7 @@ exports[`SwitchField should render correctly 1`] = `
       >
         <div
           aria-checked="false"
-          class="cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
+          class="cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
           data-size="small"
           data-variant="primary"
         >
@@ -259,7 +259,7 @@ exports[`SwitchField should render correctly checked 1`] = `
   opacity: 0.3;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -282,12 +282,12 @@ exports[`SwitchField should render correctly checked 1`] = `
   min-width: 48px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #c4c9d6;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
   position: absolute;
   margin-left: 4px;
   margin-right: 4px;
@@ -299,7 +299,7 @@ exports[`SwitchField should render correctly checked 1`] = `
   bottom: 0;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
   display: block;
   border-radius: 50%;
   width: 24px;
@@ -307,95 +307,95 @@ exports[`SwitchField should render correctly checked 1`] = `
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: 32px;
   margin-right: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
   margin-right: 32px;
   margin-left: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
   padding: 4px;
   height: 16px;
   min-width: 32px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
   right: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
   width: 16px;
   height: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: calc(
           16px + 4px
         );
   margin-right: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
   margin-right: calc(
           16px + 4px
         );
   margin-left: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
   color: #151a2d;
   background-color: #4f0599;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
   color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #4f0599;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
   color: #4a4f62;
   background-color: #c4c9d6;
   font-weight: bold;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   color: #22c8a2;
   background-color: #cdfcf1;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
   color: #151a2d;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
   box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #22c8a2;
 }
 
@@ -426,7 +426,7 @@ exports[`SwitchField should render correctly checked 1`] = `
       >
         <div
           aria-checked="true"
-          class="cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
+          class="cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
           data-size="small"
           data-variant="primary"
         >
@@ -485,7 +485,7 @@ exports[`SwitchField should render correctly disabled 1`] = `
   opacity: 0.3;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -508,12 +508,12 @@ exports[`SwitchField should render correctly disabled 1`] = `
   min-width: 48px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #c4c9d6;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
   position: absolute;
   margin-left: 4px;
   margin-right: 4px;
@@ -525,7 +525,7 @@ exports[`SwitchField should render correctly disabled 1`] = `
   bottom: 0;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
   display: block;
   border-radius: 50%;
   width: 24px;
@@ -533,95 +533,95 @@ exports[`SwitchField should render correctly disabled 1`] = `
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: 32px;
   margin-right: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
   margin-right: 32px;
   margin-left: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
   padding: 4px;
   height: 16px;
   min-width: 32px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
   right: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
   width: 16px;
   height: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: calc(
           16px + 4px
         );
   margin-right: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
   margin-right: calc(
           16px + 4px
         );
   margin-left: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
   color: #151a2d;
   background-color: #4f0599;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
   color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #4f0599;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
   color: #4a4f62;
   background-color: #c4c9d6;
   font-weight: bold;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   color: #22c8a2;
   background-color: #cdfcf1;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
   color: #151a2d;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
   box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #22c8a2;
 }
 
@@ -652,7 +652,7 @@ exports[`SwitchField should render correctly disabled 1`] = `
       >
         <div
           aria-checked="false"
-          class="cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
+          class="cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
           data-size="small"
           data-variant="primary"
         >
@@ -711,7 +711,7 @@ exports[`SwitchField should render correctly with label and checked 1`] = `
   opacity: 0.3;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -734,12 +734,12 @@ exports[`SwitchField should render correctly with label and checked 1`] = `
   min-width: 48px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #c4c9d6;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
   position: absolute;
   margin-left: 4px;
   margin-right: 4px;
@@ -751,7 +751,7 @@ exports[`SwitchField should render correctly with label and checked 1`] = `
   bottom: 0;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
   display: block;
   border-radius: 50%;
   width: 24px;
@@ -759,95 +759,95 @@ exports[`SwitchField should render correctly with label and checked 1`] = `
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: 32px;
   margin-right: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
   margin-right: 32px;
   margin-left: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
   padding: 4px;
   height: 16px;
   min-width: 32px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
   right: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
   width: 16px;
   height: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: calc(
           16px + 4px
         );
   margin-right: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
   margin-right: calc(
           16px + 4px
         );
   margin-left: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
   color: #151a2d;
   background-color: #4f0599;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
   color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #4f0599;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
   color: #4a4f62;
   background-color: #c4c9d6;
   font-weight: bold;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   color: #22c8a2;
   background-color: #cdfcf1;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
   color: #151a2d;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
   box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #22c8a2;
 }
 
@@ -886,7 +886,7 @@ exports[`SwitchField should render correctly with label and checked 1`] = `
       >
         <div
           aria-checked="true"
-          class="cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
+          class="cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
           data-size="small"
           data-variant="primary"
         >
@@ -950,7 +950,7 @@ exports[`SwitchField should render correctly with offLabel 1`] = `
   opacity: 0.3;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -973,12 +973,12 @@ exports[`SwitchField should render correctly with offLabel 1`] = `
   min-width: 48px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #c4c9d6;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
   position: absolute;
   margin-left: 4px;
   margin-right: 4px;
@@ -990,7 +990,7 @@ exports[`SwitchField should render correctly with offLabel 1`] = `
   bottom: 0;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
   display: block;
   border-radius: 50%;
   width: 24px;
@@ -998,95 +998,95 @@ exports[`SwitchField should render correctly with offLabel 1`] = `
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: 32px;
   margin-right: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
   margin-right: 32px;
   margin-left: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
   padding: 4px;
   height: 16px;
   min-width: 32px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
   right: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
   width: 16px;
   height: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: calc(
           16px + 4px
         );
   margin-right: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
   margin-right: calc(
           16px + 4px
         );
   margin-left: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
   color: #151a2d;
   background-color: #4f0599;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
   color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #4f0599;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
   color: #4a4f62;
   background-color: #c4c9d6;
   font-weight: bold;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   color: #22c8a2;
   background-color: #cdfcf1;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
   color: #151a2d;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
   box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #22c8a2;
 }
 
@@ -1117,7 +1117,7 @@ exports[`SwitchField should render correctly with offLabel 1`] = `
       >
         <div
           aria-checked="false"
-          class="cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
+          class="cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
           data-size="small"
           data-variant="primary"
         >
@@ -1175,7 +1175,7 @@ exports[`SwitchField should render correctly with onLabel 1`] = `
   opacity: 0.3;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -1198,12 +1198,12 @@ exports[`SwitchField should render correctly with onLabel 1`] = `
   min-width: 48px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #c4c9d6;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
   position: absolute;
   margin-left: 4px;
   margin-right: 4px;
@@ -1215,7 +1215,7 @@ exports[`SwitchField should render correctly with onLabel 1`] = `
   bottom: 0;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
   display: block;
   border-radius: 50%;
   width: 24px;
@@ -1223,95 +1223,95 @@ exports[`SwitchField should render correctly with onLabel 1`] = `
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: 32px;
   margin-right: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
   margin-right: 32px;
   margin-left: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
   padding: 4px;
   height: 16px;
   min-width: 32px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
   right: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
   width: 16px;
   height: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: calc(
           16px + 4px
         );
   margin-right: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
   margin-right: calc(
           16px + 4px
         );
   margin-left: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
   color: #151a2d;
   background-color: #4f0599;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
   color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #4f0599;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
   color: #4a4f62;
   background-color: #c4c9d6;
   font-weight: bold;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   color: #22c8a2;
   background-color: #cdfcf1;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
   color: #151a2d;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
   box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #22c8a2;
 }
 
@@ -1342,7 +1342,7 @@ exports[`SwitchField should render correctly with onLabel 1`] = `
       >
         <div
           aria-checked="false"
-          class="cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
+          class="cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
           data-size="small"
           data-variant="primary"
         >
@@ -1400,7 +1400,7 @@ exports[`SwitchField should render correctly without onLabel and offLabel but ha
   opacity: 0.3;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -1423,12 +1423,12 @@ exports[`SwitchField should render correctly without onLabel and offLabel but ha
   min-width: 48px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #c4c9d6;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse5 {
   position: absolute;
   margin-left: 4px;
   margin-right: 4px;
@@ -1440,7 +1440,7 @@ exports[`SwitchField should render correctly without onLabel and offLabel but ha
   bottom: 0;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch .e1x48wse6 {
   display: block;
   border-radius: 50%;
   width: 24px;
@@ -1448,95 +1448,95 @@ exports[`SwitchField should render correctly without onLabel and offLabel but ha
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true']>.e1x48wse5 {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: 32px;
   margin-right: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[aria-checked='true'] .e1x48wse4 {
   margin-right: 32px;
   margin-left: 8px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] {
   padding: 4px;
   height: 16px;
   min-width: 32px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse5 {
   right: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'] .e1x48wse6 {
   width: 16px;
   height: 16px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small']:not([aria-checked='true'])>.e1x48wse4 {
   margin-left: calc(
           16px + 4px
         );
   margin-right: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-size='small'][aria-checked='true'] .e1x48wse4 {
   margin-right: calc(
           16px + 4px
         );
   margin-left: 4px;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true'] {
   color: #151a2d;
   background-color: #4f0599;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']>.e1x48wse4 {
   color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
-  box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #4f0599;
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='primary'][aria-checked='true']:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] {
   color: #4a4f62;
   background-color: #c4c9d6;
   font-weight: bold;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'] .e1x48wse6 {
   background-color: #ffffff;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] {
   color: #22c8a2;
   background-color: #cdfcf1;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true'] .e1x48wse6 {
   background-color: #22c8a2;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']>.e1x48wse4 {
   color: #151a2d;
 }
 
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
-.cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus-within,
+.cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch[data-variant='success'][aria-checked='true']:focus {
   box-shadow: 0 0 1px 2px #ffffff,0 0 1px 3px #22c8a2;
 }
 
@@ -1575,7 +1575,7 @@ exports[`SwitchField should render correctly without onLabel and offLabel but ha
       >
         <div
           aria-checked="false"
-          class="cache-ubwvg7-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
+          class="cache-1ru8llz-StyledSwitch-primary-StyledSwitch-success-StyledSwitch e1x48wse3"
           data-size="small"
           data-variant="primary"
         >
diff --git a/src/components/TagsField/__tests__/__snapshots__/index.spec.tsx.snap b/src/components/TagsField/__tests__/__snapshots__/index.spec.tsx.snap
index d91d706a..beb3d9fe 100644
--- a/src/components/TagsField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/components/TagsField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`SwitchField should render correctly 1`] = `
 <DocumentFragment>
-  .cache-qibkhh {
+  .cache-4own23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16,12 +16,12 @@ exports[`SwitchField should render correctly 1`] = `
   border: 1px solid #d4dae7;
 }
 
-.cache-qibkhh:focus-within {
+.cache-4own23:focus-within {
   border: 1px solid #4f0599;
-  box-shadow: 0 0 1px 2px rgba(79,5,153,0.25);
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-qibkhh>* {
+.cache-4own23>* {
   margin: 6px;
 }
 
@@ -53,7 +53,7 @@ exports[`SwitchField should render correctly 1`] = `
     novalidate=""
   >
     <div
-      class="cache-qibkhh"
+      class="cache-4own23"
     >
       <input
         aria-label="test"
@@ -70,7 +70,7 @@ exports[`SwitchField should render correctly 1`] = `
 
 exports[`SwitchField should render correctly disabled 1`] = `
 <DocumentFragment>
-  .cache-qibkhh {
+  .cache-4own23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -84,12 +84,12 @@ exports[`SwitchField should render correctly disabled 1`] = `
   border: 1px solid #d4dae7;
 }
 
-.cache-qibkhh:focus-within {
+.cache-4own23:focus-within {
   border: 1px solid #4f0599;
-  box-shadow: 0 0 1px 2px rgba(79,5,153,0.25);
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-qibkhh>* {
+.cache-4own23>* {
   margin: 6px;
 }
 
@@ -97,7 +97,7 @@ exports[`SwitchField should render correctly disabled 1`] = `
     novalidate=""
   >
     <div
-      class="cache-qibkhh"
+      class="cache-4own23"
     />
   </form>
 </DocumentFragment>
@@ -105,7 +105,7 @@ exports[`SwitchField should render correctly disabled 1`] = `
 
 exports[`SwitchField should render correctly with default tags 1`] = `
 <DocumentFragment>
-  .cache-qibkhh {
+  .cache-4own23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -119,12 +119,12 @@ exports[`SwitchField should render correctly with default tags 1`] = `
   border: 1px solid #d4dae7;
 }
 
-.cache-qibkhh:focus-within {
+.cache-4own23:focus-within {
   border: 1px solid #4f0599;
-  box-shadow: 0 0 1px 2px rgba(79,5,153,0.25);
+  box-shadow: 0px 0px 0px 3px #4F059940;
 }
 
-.cache-qibkhh>* {
+.cache-4own23>* {
   margin: 6px;
 }
 
@@ -242,7 +242,7 @@ exports[`SwitchField should render correctly with default tags 1`] = `
     novalidate=""
   >
     <div
-      class="cache-qibkhh"
+      class="cache-4own23"
     >
       <div
         class="e1vt8sjg2 cache-11aaxx7-StyledContainer-base"
diff --git a/src/components/TextBoxField/__tests__/__snapshots__/index.spec.tsx.snap b/src/components/TextBoxField/__tests__/__snapshots__/index.spec.tsx.snap
index 32a7adb6..06c67d58 100644
--- a/src/components/TextBoxField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/components/TextBoxField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`TextBoxField should render correctly 1`] = `
   position: relative;
 }
 
-.cache-r05oyn-StyledInput {
+.cache-17ab1cr-StyledInput {
   -webkit-transition: border-color 0.2s ease,box-shadow 0.2s ease;
   transition: border-color 0.2s ease,box-shadow 0.2s ease;
   -webkit-appearance: none;
@@ -35,49 +35,49 @@ exports[`TextBoxField should render correctly 1`] = `
   padding: 8px;
 }
 
-.cache-r05oyn-StyledInput::-webkit-input-placeholder {
+.cache-17ab1cr-StyledInput::-webkit-input-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-r05oyn-StyledInput::-moz-placeholder {
+.cache-17ab1cr-StyledInput::-moz-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-r05oyn-StyledInput:-ms-input-placeholder {
+.cache-17ab1cr-StyledInput:-ms-input-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-r05oyn-StyledInput::placeholder {
+.cache-17ab1cr-StyledInput::placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-r05oyn-StyledInput:hover,
-.cache-r05oyn-StyledInput:focus {
+.cache-17ab1cr-StyledInput:hover,
+.cache-17ab1cr-StyledInput:focus {
   border-color: #4f0599;
 }
 
-.cache-r05oyn-StyledInput:focus {
-  box-shadow: 0 0 0 2px rgba(79,5,153,0.25);
+.cache-17ab1cr-StyledInput:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
   border-color: #4f0599;
 }
 
-.cache-r05oyn-StyledInput::-webkit-input-placeholder {
+.cache-17ab1cr-StyledInput::-webkit-input-placeholder {
   opacity: 1;
 }
 
-.cache-r05oyn-StyledInput::-moz-placeholder {
+.cache-17ab1cr-StyledInput::-moz-placeholder {
   opacity: 1;
 }
 
-.cache-r05oyn-StyledInput:-ms-input-placeholder {
+.cache-17ab1cr-StyledInput:-ms-input-placeholder {
   opacity: 1;
 }
 
-.cache-r05oyn-StyledInput::placeholder {
+.cache-17ab1cr-StyledInput::placeholder {
   opacity: 1;
 }
 
@@ -112,7 +112,7 @@ exports[`TextBoxField should render correctly 1`] = `
       >
         <input
           autocomplete="on"
-          class="cache-r05oyn-StyledInput e18bmnpq0"
+          class="cache-17ab1cr-StyledInput e18bmnpq0"
           name="test"
           type="text"
           value=""
@@ -136,7 +136,7 @@ exports[`TextBoxField should render correctly disabled 1`] = `
   position: relative;
 }
 
-.cache-fs23h7-StyledInput {
+.cache-3p6qfs-StyledInput {
   -webkit-transition: border-color 0.2s ease,box-shadow 0.2s ease;
   transition: border-color 0.2s ease,box-shadow 0.2s ease;
   -webkit-appearance: none;
@@ -170,49 +170,49 @@ exports[`TextBoxField should render correctly disabled 1`] = `
   padding: 8px;
 }
 
-.cache-fs23h7-StyledInput::-webkit-input-placeholder {
+.cache-3p6qfs-StyledInput::-webkit-input-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-fs23h7-StyledInput::-moz-placeholder {
+.cache-3p6qfs-StyledInput::-moz-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-fs23h7-StyledInput:-ms-input-placeholder {
+.cache-3p6qfs-StyledInput:-ms-input-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-fs23h7-StyledInput::placeholder {
+.cache-3p6qfs-StyledInput::placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-fs23h7-StyledInput:hover,
-.cache-fs23h7-StyledInput:focus {
+.cache-3p6qfs-StyledInput:hover,
+.cache-3p6qfs-StyledInput:focus {
   border-color: #4f0599;
 }
 
-.cache-fs23h7-StyledInput:focus {
-  box-shadow: 0 0 0 2px rgba(79,5,153,0.25);
+.cache-3p6qfs-StyledInput:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
   border-color: #4f0599;
 }
 
-.cache-fs23h7-StyledInput::-webkit-input-placeholder {
+.cache-3p6qfs-StyledInput::-webkit-input-placeholder {
   opacity: 1;
 }
 
-.cache-fs23h7-StyledInput::-moz-placeholder {
+.cache-3p6qfs-StyledInput::-moz-placeholder {
   opacity: 1;
 }
 
-.cache-fs23h7-StyledInput:-ms-input-placeholder {
+.cache-3p6qfs-StyledInput:-ms-input-placeholder {
   opacity: 1;
 }
 
-.cache-fs23h7-StyledInput::placeholder {
+.cache-3p6qfs-StyledInput::placeholder {
   opacity: 1;
 }
 
@@ -247,7 +247,7 @@ exports[`TextBoxField should render correctly disabled 1`] = `
       >
         <input
           autocomplete="on"
-          class="cache-fs23h7-StyledInput e18bmnpq0"
+          class="cache-3p6qfs-StyledInput e18bmnpq0"
           disabled=""
           name="test"
           type="text"
@@ -272,7 +272,7 @@ exports[`TextBoxField should render correctly with minLength 1`] = `
   position: relative;
 }
 
-.cache-be48p9-StyledInput {
+.cache-yi76o-StyledInput {
   -webkit-transition: border-color 0.2s ease,box-shadow 0.2s ease;
   transition: border-color 0.2s ease,box-shadow 0.2s ease;
   -webkit-appearance: none;
@@ -302,59 +302,59 @@ exports[`TextBoxField should render correctly with minLength 1`] = `
   border-color: #dd3252;
 }
 
-.cache-be48p9-StyledInput::-webkit-input-placeholder {
+.cache-yi76o-StyledInput::-webkit-input-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-be48p9-StyledInput::-moz-placeholder {
+.cache-yi76o-StyledInput::-moz-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-be48p9-StyledInput:-ms-input-placeholder {
+.cache-yi76o-StyledInput:-ms-input-placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-be48p9-StyledInput::placeholder {
+.cache-yi76o-StyledInput::placeholder {
   color: #b2b6c3;
   opacity: 0;
 }
 
-.cache-be48p9-StyledInput:hover,
-.cache-be48p9-StyledInput:focus {
+.cache-yi76o-StyledInput:hover,
+.cache-yi76o-StyledInput:focus {
   border-color: #4f0599;
 }
 
-.cache-be48p9-StyledInput:focus {
-  box-shadow: 0 0 0 2px rgba(79,5,153,0.25);
+.cache-yi76o-StyledInput:focus {
+  box-shadow: 0px 0px 0px 3px #4F059940;
   border-color: #4f0599;
 }
 
-.cache-be48p9-StyledInput::-webkit-input-placeholder {
+.cache-yi76o-StyledInput::-webkit-input-placeholder {
   opacity: 1;
 }
 
-.cache-be48p9-StyledInput::-moz-placeholder {
+.cache-yi76o-StyledInput::-moz-placeholder {
   opacity: 1;
 }
 
-.cache-be48p9-StyledInput:-ms-input-placeholder {
+.cache-yi76o-StyledInput:-ms-input-placeholder {
   opacity: 1;
 }
 
-.cache-be48p9-StyledInput::placeholder {
+.cache-yi76o-StyledInput::placeholder {
   opacity: 1;
 }
 
-.cache-be48p9-StyledInput:hover,
-.cache-be48p9-StyledInput:focus {
+.cache-yi76o-StyledInput:hover,
+.cache-yi76o-StyledInput:focus {
   border-color: #a6102d;
 }
 
-.cache-be48p9-StyledInput:focus {
-  box-shadow: 0 0 0 2px rgba(221,50,82,0.25);
+.cache-yi76o-StyledInput:focus {
+  box-shadow: 0px 0px 0px 3px #DD325240;
   border-color: #dd3252;
 }
 
@@ -395,7 +395,7 @@ exports[`TextBoxField should render correctly with minLength 1`] = `
       >
         <input
           autocomplete="on"
-          class="cache-be48p9-StyledInput e18bmnpq0"
+          class="cache-yi76o-StyledInput e18bmnpq0"
           name="test"
           type="text"
           value="test"