From b54b9f7bbf10b6a68c0918c16da59d6b83cb3213 Mon Sep 17 00:00:00 2001
From: PolariTOON <36267812+PolariTOON@users.noreply.github.com>
Date: Tue, 14 Feb 2023 12:48:58 +0100
Subject: [PATCH] test: Update snapshots

---
 .../Figure/__snapshots__/index.spec.jsx.snap  | 100 +++---
 react/__snapshots__/examples.spec.jsx.snap    | 298 +++++++-----------
 2 files changed, 163 insertions(+), 235 deletions(-)

diff --git a/react/Figure/Figure/__snapshots__/index.spec.jsx.snap b/react/Figure/Figure/__snapshots__/index.spec.jsx.snap
index 8cfec93499..59ed8c7a67 100644
--- a/react/Figure/Figure/__snapshots__/index.spec.jsx.snap
+++ b/react/Figure/Figure/__snapshots__/index.spec.jsx.snap
@@ -5,7 +5,7 @@ exports[`Figure should render correctly -100 coloredPositive: false, coloredNega
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     -100,00
   </span>
@@ -14,10 +14,10 @@ exports[`Figure should render correctly -100 coloredPositive: false, coloredNega
 
 exports[`Figure should render correctly -100 coloredPositive: false, coloredNegative: false, coloredWarning: true 1`] = `
 <div
-  className="Figure__Figure-content--warning___1Pn6n"
+  className="styles__Figure-content--warning___1p7x3"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     -100,00
   </span>
@@ -26,10 +26,10 @@ exports[`Figure should render correctly -100 coloredPositive: false, coloredNega
 
 exports[`Figure should render correctly -100 coloredPositive: false, coloredNegative: true, coloredWarning: false 1`] = `
 <div
-  className="Figure__Figure-content--negative___3ACbA"
+  className="styles__Figure-content--negative___21p0c"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     -100,00
   </span>
@@ -38,10 +38,10 @@ exports[`Figure should render correctly -100 coloredPositive: false, coloredNega
 
 exports[`Figure should render correctly -100 coloredPositive: false, coloredNegative: true, coloredWarning: true 1`] = `
 <div
-  className="Figure__Figure-content--warning___1Pn6n"
+  className="styles__Figure-content--warning___1p7x3"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     -100,00
   </span>
@@ -53,7 +53,7 @@ exports[`Figure should render correctly -100 coloredPositive: true, coloredNegat
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     -100,00
   </span>
@@ -62,10 +62,10 @@ exports[`Figure should render correctly -100 coloredPositive: true, coloredNegat
 
 exports[`Figure should render correctly -100 coloredPositive: true, coloredNegative: false, coloredWarning: true 1`] = `
 <div
-  className="Figure__Figure-content--warning___1Pn6n"
+  className="styles__Figure-content--warning___1p7x3"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     -100,00
   </span>
@@ -74,10 +74,10 @@ exports[`Figure should render correctly -100 coloredPositive: true, coloredNegat
 
 exports[`Figure should render correctly -100 coloredPositive: true, coloredNegative: true, coloredWarning: false 1`] = `
 <div
-  className="Figure__Figure-content--negative___3ACbA"
+  className="styles__Figure-content--negative___21p0c"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     -100,00
   </span>
@@ -86,10 +86,10 @@ exports[`Figure should render correctly -100 coloredPositive: true, coloredNegat
 
 exports[`Figure should render correctly -100 coloredPositive: true, coloredNegative: true, coloredWarning: true 1`] = `
 <div
-  className="Figure__Figure-content--warning___1Pn6n"
+  className="styles__Figure-content--warning___1p7x3"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     -100,00
   </span>
@@ -101,7 +101,7 @@ exports[`Figure should render correctly 4 coloredPositive: false, coloredNegativ
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     4,00
   </span>
@@ -113,7 +113,7 @@ exports[`Figure should render correctly 4 coloredPositive: false, coloredNegativ
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     4,00
   </span>
@@ -125,7 +125,7 @@ exports[`Figure should render correctly 4 coloredPositive: false, coloredNegativ
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     4,00
   </span>
@@ -137,7 +137,7 @@ exports[`Figure should render correctly 4 coloredPositive: false, coloredNegativ
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     4,00
   </span>
@@ -146,10 +146,10 @@ exports[`Figure should render correctly 4 coloredPositive: false, coloredNegativ
 
 exports[`Figure should render correctly 4 coloredPositive: true, coloredNegative: false, coloredWarning: false 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     4,00
   </span>
@@ -158,10 +158,10 @@ exports[`Figure should render correctly 4 coloredPositive: true, coloredNegative
 
 exports[`Figure should render correctly 4 coloredPositive: true, coloredNegative: false, coloredWarning: true 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     4,00
   </span>
@@ -170,10 +170,10 @@ exports[`Figure should render correctly 4 coloredPositive: true, coloredNegative
 
 exports[`Figure should render correctly 4 coloredPositive: true, coloredNegative: true, coloredWarning: false 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     4,00
   </span>
@@ -182,10 +182,10 @@ exports[`Figure should render correctly 4 coloredPositive: true, coloredNegative
 
 exports[`Figure should render correctly 4 coloredPositive: true, coloredNegative: true, coloredWarning: true 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     4,00
   </span>
@@ -197,7 +197,7 @@ exports[`Figure should render correctly 100 coloredPositive: false, coloredNegat
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     100,00
   </span>
@@ -209,7 +209,7 @@ exports[`Figure should render correctly 100 coloredPositive: false, coloredNegat
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     100,00
   </span>
@@ -221,7 +221,7 @@ exports[`Figure should render correctly 100 coloredPositive: false, coloredNegat
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     100,00
   </span>
@@ -233,7 +233,7 @@ exports[`Figure should render correctly 100 coloredPositive: false, coloredNegat
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     100,00
   </span>
@@ -242,10 +242,10 @@ exports[`Figure should render correctly 100 coloredPositive: false, coloredNegat
 
 exports[`Figure should render correctly 100 coloredPositive: true, coloredNegative: false, coloredWarning: false 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     100,00
   </span>
@@ -254,10 +254,10 @@ exports[`Figure should render correctly 100 coloredPositive: true, coloredNegati
 
 exports[`Figure should render correctly 100 coloredPositive: true, coloredNegative: false, coloredWarning: true 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     100,00
   </span>
@@ -266,10 +266,10 @@ exports[`Figure should render correctly 100 coloredPositive: true, coloredNegati
 
 exports[`Figure should render correctly 100 coloredPositive: true, coloredNegative: true, coloredWarning: false 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     100,00
   </span>
@@ -278,10 +278,10 @@ exports[`Figure should render correctly 100 coloredPositive: true, coloredNegati
 
 exports[`Figure should render correctly 100 coloredPositive: true, coloredNegative: true, coloredWarning: true 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     100,00
   </span>
@@ -293,7 +293,7 @@ exports[`Figure should render correctly 500 coloredPositive: false, coloredNegat
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     500,00
   </span>
@@ -305,7 +305,7 @@ exports[`Figure should render correctly 500 coloredPositive: false, coloredNegat
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     500,00
   </span>
@@ -317,7 +317,7 @@ exports[`Figure should render correctly 500 coloredPositive: false, coloredNegat
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     500,00
   </span>
@@ -329,7 +329,7 @@ exports[`Figure should render correctly 500 coloredPositive: false, coloredNegat
   className=""
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     500,00
   </span>
@@ -338,10 +338,10 @@ exports[`Figure should render correctly 500 coloredPositive: false, coloredNegat
 
 exports[`Figure should render correctly 500 coloredPositive: true, coloredNegative: false, coloredWarning: false 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     500,00
   </span>
@@ -350,10 +350,10 @@ exports[`Figure should render correctly 500 coloredPositive: true, coloredNegati
 
 exports[`Figure should render correctly 500 coloredPositive: true, coloredNegative: false, coloredWarning: true 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     500,00
   </span>
@@ -362,10 +362,10 @@ exports[`Figure should render correctly 500 coloredPositive: true, coloredNegati
 
 exports[`Figure should render correctly 500 coloredPositive: true, coloredNegative: true, coloredWarning: false 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     500,00
   </span>
@@ -374,10 +374,10 @@ exports[`Figure should render correctly 500 coloredPositive: true, coloredNegati
 
 exports[`Figure should render correctly 500 coloredPositive: true, coloredNegative: true, coloredWarning: true 1`] = `
 <div
-  className="Figure__Figure-content--positive___1qyd8"
+  className="styles__Figure-content--positive___GlFUE"
 >
   <span
-    className="Figure__Figure-total___MZ7Xt"
+    className="styles__Figure-total___3Z9NO"
   >
     500,00
   </span>
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index a4fde90cc2..fb12f73a0b 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -2727,18 +2727,14 @@ exports[`Field should render examples: Field 7`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'am a SelectBox</label>
-      <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\" id=\\"\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-        <div class=\\" css-fg5tdu-control\\">
-          <div class=\\" css-11jzfys-ValueContainer\\">
-            <div class=\\" css-1wa3eu0-placeholder\\">Select ...</div>
-            <div class=\\"css-b8ldur-Input\\">
-              <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-2-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-                <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-              </div>
-            </div>
+      <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\" id=\\"\\"><span id=\\"react-select-2-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+        <div class=\\" css-t8mjff-control\\">
+          <div class=\\" css-173yox5-ValueContainer\\">
+            <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-2-placeholder\\">Select ...</div>
+            <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-2-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-2-placeholder\\" value=\\"\\"></div>
           </div>
           <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
                 <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
               </svg></div>
           </div>
@@ -2746,18 +2742,14 @@ exports[`Field should render examples: Field 7`] = `
       </div>
     </div>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'am a SelectBox with a value</label>
-      <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\" id=\\"\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-        <div class=\\" css-fg5tdu-control\\">
-          <div class=\\" css-11jzfys-ValueContainer\\">
-            <div class=\\" css-1uccc91-singleValue\\">Choice 2</div>
-            <div class=\\"css-b8ldur-Input\\">
-              <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-3-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-                <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-              </div>
-            </div>
+      <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\" id=\\"\\"><span id=\\"react-select-3-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+        <div class=\\" css-t8mjff-control\\">
+          <div class=\\" css-173yox5-ValueContainer\\">
+            <div class=\\" css-1dimb5e-singleValue\\">Choice 2</div>
+            <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-3-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" value=\\"\\"></div>
           </div>
           <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
                 <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
               </svg></div>
           </div>
@@ -8424,18 +8416,14 @@ exports[`InputGroup should render examples: InputGroup 4`] = `
       <div class=\\"styles__c-inputgroup___12OVJ\\">
         <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"URL\\" spellcheck=\\"false\\" value=\\"\\"></div>
         <div class=\\"styles__c-inputgroup-side___60v0v\\">
-          <div class=\\"styles__select--autowidth___16AEp u-w-4 css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-            <div class=\\" css-1x8e986-control\\">
-              <div class=\\" css-11jzfys-ValueContainer\\">
-                <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-                <div class=\\"css-b8ldur-Input\\">
-                  <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-4-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-                    <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-                  </div>
-                </div>
+          <div class=\\"styles__select--autowidth___16AEp u-w-4 css-b62m3t-container\\"><span id=\\"react-select-4-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+            <div class=\\" css-lpg7kz-control\\">
+              <div class=\\" css-173yox5-ValueContainer\\">
+                <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-4-placeholder\\">Select...</div>
+                <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-4-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-4-placeholder\\" value=\\"\\"></div>
               </div>
               <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-                <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+                <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
                     <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
                   </svg></div>
               </div>
@@ -8796,18 +8784,14 @@ exports[`Radios should render examples: Radios 2`] = `
 exports[`SelectBox should render examples: SelectBox 1`] = `
 "<div>
   <div style=\\"background: whitesmoke; padding: .5em;\\">
-    <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-      <div class=\\" css-fg5tdu-control\\">
-        <div class=\\" css-11jzfys-ValueContainer\\">
-          <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-          <div class=\\"css-b8ldur-Input\\">
-            <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-5-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-              <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-            </div>
-          </div>
+    <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-5-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+      <div class=\\" css-t8mjff-control\\">
+        <div class=\\" css-173yox5-ValueContainer\\">
+          <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-5-placeholder\\">Select...</div>
+          <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-5-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-5-placeholder\\" value=\\"\\"></div>
         </div>
         <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+          <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></div>
         </div>
@@ -8819,24 +8803,20 @@ exports[`SelectBox should render examples: SelectBox 1`] = `
 
 exports[`SelectBox should render examples: SelectBox 2`] = `
 "<div>
-  <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-        <div class=\\"css-b8ldur-Input\\">
-          <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-6-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-            <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-          </div>
-        </div>
+  <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-6-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+    <div class=\\" css-t8mjff-control\\">
+      <div class=\\" css-173yox5-ValueContainer\\">
+        <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-6-placeholder\\">Select...</div>
+        <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-6-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-controls=\\"react-select-6-listbox\\" aria-owns=\\"react-select-6-listbox\\" aria-describedby=\\"react-select-6-placeholder\\" value=\\"\\"></div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M20.603 17.825a1.571 1.571 0 002.222-2.222l-9.428-9.428a1.571 1.571 0 00-2.222 0l-9.429 9.428a1.571 1.571 0 002.222 2.222l8.318-8.317 8.317 8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
     </div>
-    <div class=\\" css-govwq4-menu\\">
-      <div class=\\" css-4ljt47-MenuList\\">
+    <div class=\\" css-7o8zbf-menu\\" id=\\"react-select-6-listbox\\">
+      <div class=\\" css-1n6sfyn-MenuList\\">
         <div id=\\"react-select-6-option-0\\" tabindex=\\"-1\\" class=\\"styles__select-option___ov_IT\\"><span class=\\"styles__select-option__label___1Xi5R\\"><span class=\\"u-ellipsis\\">Chocolate</span></span><span class=\\"styles__select-option__checkmark___ChXXs\\"></span></div>
       </div>
     </div>
@@ -8847,18 +8827,14 @@ exports[`SelectBox should render examples: SelectBox 2`] = `
 exports[`SelectBox should render examples: SelectBox 3`] = `
 "<div>
   <div style=\\"height: 12rem; padding: .5rem; overflow: auto;\\">Container height: 12rem. <button>Change container height</button>
-    <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-      <div class=\\" css-fg5tdu-control\\">
-        <div class=\\" css-11jzfys-ValueContainer\\">
-          <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-          <div class=\\"css-b8ldur-Input\\">
-            <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-7-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-              <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-            </div>
-          </div>
+    <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-7-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+      <div class=\\" css-t8mjff-control\\">
+        <div class=\\" css-173yox5-ValueContainer\\">
+          <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-7-placeholder\\">Select...</div>
+          <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-7-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-7-placeholder\\" value=\\"\\"></div>
         </div>
         <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+          <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></div>
         </div>
@@ -8870,18 +8846,14 @@ exports[`SelectBox should render examples: SelectBox 3`] = `
 
 exports[`SelectBox should render examples: SelectBox 4`] = `
 "<div>
-  <div class=\\"styles__select--autowidth___16AEp styles__select--disabled___1W3en css-14jk2my-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-ofrup8-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-        <div class=\\"css-1bwsx9e-Input\\">
-          <div class=\\"\\" style=\\"display: inline-block;\\"><input disabled=\\"\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-8-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-            <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-          </div>
-        </div>
+  <div class=\\"styles__select--autowidth___16AEp styles__select--disabled___1W3en css-3iigni-container\\"><span id=\\"react-select-8-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+    <div class=\\" css-14dbcek-control\\">
+      <div class=\\" css-173yox5-ValueContainer\\">
+        <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-8-placeholder\\">Select...</div>
+        <div class=\\" css-1h01tm3-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" disabled=\\"\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-8-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-8-placeholder\\" value=\\"\\"></div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
@@ -8892,18 +8864,14 @@ exports[`SelectBox should render examples: SelectBox 4`] = `
 
 exports[`SelectBox should render examples: SelectBox 5`] = `
 "<div>
-  <div class=\\"styles__select--fullwidth___2l_xM css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-        <div class=\\"css-b8ldur-Input\\">
-          <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-9-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-            <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-          </div>
-        </div>
+  <div class=\\"styles__select--fullwidth___2l_xM css-b62m3t-container\\"><span id=\\"react-select-9-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+    <div class=\\" css-t8mjff-control\\">
+      <div class=\\" css-173yox5-ValueContainer\\">
+        <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-9-placeholder\\">Select...</div>
+        <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-9-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-9-placeholder\\" value=\\"\\"></div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
@@ -8915,18 +8883,14 @@ exports[`SelectBox should render examples: SelectBox 5`] = `
 exports[`SelectBox should render examples: SelectBox 6`] = `
 "<div>
   <div>
-    <div class=\\"styles__select--autowidth___16AEp styles__select--disabled___1W3en css-14jk2my-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-      <div class=\\" css-ofrup8-control\\">
-        <div class=\\" css-11jzfys-ValueContainer\\">
-          <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-          <div class=\\"css-1bwsx9e-Input\\">
-            <div class=\\"\\" style=\\"display: inline-block;\\"><input disabled=\\"\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-10-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-              <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-            </div>
-          </div>
+    <div class=\\"styles__select--autowidth___16AEp styles__select--disabled___1W3en css-3iigni-container\\"><span id=\\"react-select-10-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+      <div class=\\" css-14dbcek-control\\">
+        <div class=\\" css-173yox5-ValueContainer\\">
+          <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-10-placeholder\\">Select...</div>
+          <div class=\\" css-1h01tm3-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" disabled=\\"\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-10-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-10-placeholder\\" value=\\"\\"></div>
         </div>
         <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+          <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></div>
         </div>
@@ -8940,18 +8904,14 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
 "<div>
   <div>
     <div class=\\"u-mb-1\\">
-      <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-        <div class=\\" css-1ac6j6n-control\\">
-          <div class=\\" css-11jzfys-ValueContainer\\">
-            <div class=\\" css-1uccc91-singleValue\\">I am a tiny SelectBox</div>
-            <div class=\\"css-b8ldur-Input\\">
-              <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-11-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-                <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-              </div>
-            </div>
+      <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-11-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+        <div class=\\" css-10174v8-control\\">
+          <div class=\\" css-173yox5-ValueContainer\\">
+            <div class=\\" css-1dimb5e-singleValue\\">I am a tiny SelectBox</div>
+            <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-11-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" value=\\"\\"></div>
           </div>
           <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
                 <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
               </svg></div>
           </div>
@@ -8959,18 +8919,14 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
       </div>
     </div>
     <div class=\\"u-mb-1\\">
-      <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-        <div class=\\" css-7stifj-control\\">
-          <div class=\\" css-11jzfys-ValueContainer\\">
-            <div class=\\" css-1uccc91-singleValue\\">I am a medium SelectBox</div>
-            <div class=\\"css-b8ldur-Input\\">
-              <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-12-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-                <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-              </div>
-            </div>
+      <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-12-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+        <div class=\\" css-ohh5x5-control\\">
+          <div class=\\" css-173yox5-ValueContainer\\">
+            <div class=\\" css-1dimb5e-singleValue\\">I am a medium SelectBox</div>
+            <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-12-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" value=\\"\\"></div>
           </div>
           <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
                 <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
               </svg></div>
           </div>
@@ -8978,18 +8934,14 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
       </div>
     </div>
     <div class=\\"u-mb-1\\">
-      <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-        <div class=\\" css-fg5tdu-control\\">
-          <div class=\\" css-11jzfys-ValueContainer\\">
-            <div class=\\" css-1uccc91-singleValue\\">I am a large SelectBox</div>
-            <div class=\\"css-b8ldur-Input\\">
-              <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-13-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-                <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-              </div>
-            </div>
+      <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-13-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+        <div class=\\" css-t8mjff-control\\">
+          <div class=\\" css-173yox5-ValueContainer\\">
+            <div class=\\" css-1dimb5e-singleValue\\">I am a large SelectBox</div>
+            <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-13-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" value=\\"\\"></div>
           </div>
           <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
                 <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
               </svg></div>
           </div>
@@ -9002,19 +8954,15 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
 
 exports[`SelectBox should render examples: SelectBox 8`] = `
 "<div>
-  <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+  <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-14-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
     <div><button>toggle options</button>
       <div class=\\"styles__select-control__input___1xDlj\\">
-        <div class=\\" css-11jzfys-ValueContainer\\">
-          <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-          <div class=\\"css-b8ldur-Input\\">
-            <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-14-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-              <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-            </div>
-          </div>
+        <div class=\\" css-173yox5-ValueContainer\\">
+          <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-14-placeholder\\">Select...</div>
+          <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-14-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-14-placeholder\\" value=\\"\\"></div>
         </div>
         <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+          <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></div>
         </div>
@@ -9026,18 +8974,14 @@ exports[`SelectBox should render examples: SelectBox 8`] = `
 
 exports[`SelectBox should render examples: SelectBox 9`] = `
 "<div>
-  <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-        <div class=\\"css-b8ldur-Input\\">
-          <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-15-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-            <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-          </div>
-        </div>
+  <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-15-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+    <div class=\\" css-t8mjff-control\\">
+      <div class=\\" css-173yox5-ValueContainer\\">
+        <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-15-placeholder\\">Select...</div>
+        <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-15-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-15-placeholder\\" value=\\"\\"></div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
@@ -9048,18 +8992,14 @@ exports[`SelectBox should render examples: SelectBox 9`] = `
 
 exports[`SelectBox should render examples: SelectBox 10`] = `
 "<div>
-  <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-        <div class=\\"css-b8ldur-Input\\">
-          <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-16-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-            <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-          </div>
-        </div>
+  <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-16-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+    <div class=\\" css-t8mjff-control\\">
+      <div class=\\" css-173yox5-ValueContainer\\">
+        <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-16-placeholder\\">Select...</div>
+        <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-16-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-16-placeholder\\" value=\\"\\"></div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
@@ -9070,24 +9010,20 @@ exports[`SelectBox should render examples: SelectBox 10`] = `
 
 exports[`SelectBox should render examples: SelectBox 11`] = `
 "<div>
-  <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-        <div class=\\"css-b8ldur-Input\\">
-          <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-17-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-            <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-          </div>
-        </div>
+  <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-17-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+    <div class=\\" css-t8mjff-control\\">
+      <div class=\\" css-173yox5-ValueContainer\\">
+        <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-17-placeholder\\">Select...</div>
+        <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-17-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-controls=\\"react-select-17-listbox\\" aria-owns=\\"react-select-17-listbox\\" aria-describedby=\\"react-select-17-placeholder\\" value=\\"\\"></div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M20.603 17.825a1.571 1.571 0 002.222-2.222l-9.428-9.428a1.571 1.571 0 00-2.222 0l-9.429 9.428a1.571 1.571 0 002.222 2.222l8.318-8.317 8.317 8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
     </div>
-    <div class=\\" css-govwq4-menu\\">
-      <div class=\\"styles__MenuList___1H_pH css-4ljt47-MenuList\\">
+    <div class=\\" css-7o8zbf-menu\\" id=\\"react-select-17-listbox\\">
+      <div class=\\"styles__MenuList___1H_pH css-1n6sfyn-MenuList\\">
         <div class=\\"styles__Group___J6s7k css-syji7d-Group\\">
           <div>
             <div id=\\"react-select-17-option-0-0\\" tabindex=\\"-1\\" class=\\"styles__select-option___ov_IT\\"><span class=\\"styles__select-option__label___1Xi5R\\"><span class=\\"u-ellipsis\\">B</span></span><span class=\\"styles__select-option__checkmark___ChXXs\\"></span></div>
@@ -9130,18 +9066,14 @@ exports[`SelectBox should render examples: SelectBox 11`] = `
 
 exports[`SelectBox should render examples: SelectBox 12`] = `
 "<div>
-  <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\"needsclick css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
-        <div class=\\"css-b8ldur-Input\\">
-          <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-18-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-            <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-          </div>
-        </div>
+  <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-18-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+    <div class=\\" css-t8mjff-control\\">
+      <div class=\\"needsclick css-173yox5-ValueContainer\\">
+        <div class=\\" css-1jqq78o-placeholder\\" id=\\"react-select-18-placeholder\\">Select...</div>
+        <div class=\\" css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-18-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-describedby=\\"react-select-18-placeholder\\" value=\\"\\"></div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
@@ -9152,24 +9084,20 @@ exports[`SelectBox should render examples: SelectBox 12`] = `
 
 exports[`SelectBox should render examples: SelectBox 13`] = `
 "<div>
-  <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\"needsclick cz__control needsclick cz__control--menu-is-open css-fg5tdu-control\\">
-      <div class=\\"needsclick cz__value-container css-11jzfys-ValueContainer\\">
-        <div class=\\"needsclick cz__placeholder css-1wa3eu0-placeholder\\">Select...</div>
-        <div class=\\"css-b8ldur-Input\\">
-          <div class=\\"needsclick cz__input\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-19-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
-            <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
-          </div>
-        </div>
+  <div class=\\"styles__select--autowidth___16AEp css-b62m3t-container\\"><span id=\\"react-select-19-live-region\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
+    <div class=\\"needsclick cz__control needsclick cz__control--menu-is-open css-t8mjff-control\\">
+      <div class=\\"needsclick cz__value-container css-173yox5-ValueContainer\\">
+        <div class=\\"needsclick cz__placeholder css-1jqq78o-placeholder\\" id=\\"react-select-19-placeholder\\">Select...</div>
+        <div class=\\"needsclick cz__input-container css-qbdosj-Input\\" data-value=\\"\\"><input class=\\"needsclick cz__input\\" style=\\"opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-19-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\" role=\\"combobox\\" aria-controls=\\"react-select-19-listbox\\" aria-owns=\\"react-select-19-listbox\\" aria-describedby=\\"react-select-19-placeholder\\" value=\\"\\"></div>
       </div>
       <div class=\\"needsclick cz__indicators css-1hb7zxy-IndicatorsContainer\\"><span class=\\"needsclick cz__indicator-separator css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\"needsclick cz__indicator needsclick cz__dropdown-indicator css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\"needsclick cz__indicator needsclick cz__dropdown-indicator css-14yvg18-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M20.603 17.825a1.571 1.571 0 002.222-2.222l-9.428-9.428a1.571 1.571 0 00-2.222 0l-9.429 9.428a1.571 1.571 0 002.222 2.222l8.318-8.317 8.317 8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
     </div>
-    <div class=\\"needsclick cz__menu css-govwq4-menu\\">
-      <div class=\\"needsclick cz__menu-list css-4ljt47-MenuList\\">
+    <div class=\\"needsclick cz__menu css-7o8zbf-menu\\" id=\\"react-select-19-listbox\\">
+      <div class=\\"needsclick cz__menu-list css-1n6sfyn-MenuList\\">
         <div id=\\"react-select-19-option-0\\" tabindex=\\"-1\\" class=\\"styles__select-option___ov_IT\\"><span class=\\"styles__select-option__label___1Xi5R\\"><span class=\\"u-ellipsis\\">Chocolate</span></span><span class=\\"styles__select-option__checkmark___ChXXs\\"></span></div>
       </div>
     </div>