From 3fc2f59300edca97732a2bca769aa0f4303625b5 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 20 May 2025 18:14:01 +0000
Subject: [PATCH 01/11] Convert to CSS modules

---
 .../__snapshots__/Autocomplete.test.tsx.snap  | 1102 ++++++++---------
 .../__snapshots__/TextInput.test.tsx.snap     |  204 +--
 .../__snapshots__/Token.test.tsx.snap         |  150 +--
 packages/react/src/_VisuallyHidden.module.css |   12 +
 packages/react/src/_VisuallyHidden.tsx        |   31 +-
 5 files changed, 554 insertions(+), 945 deletions(-)
 create mode 100644 packages/react/src/_VisuallyHidden.module.css

diff --git a/packages/react/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
index 233e8e7d2a1..bae1a218613 100644
--- a/packages/react/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
@@ -27,21 +27,8 @@ exports[`snapshots renders a custom empty state message 1`] = `
       type="text"
     />
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
-    className="c0"
+  <span
+    className="InternalVisuallyHidden"
   >
     <div>
       <div
@@ -81,21 +68,8 @@ exports[`snapshots renders a loading state 1`] = `
       type="text"
     />
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
-    className="c0"
+  <span
+    className="InternalVisuallyHidden"
   >
     <div
       className="SpinnerWrapper"
@@ -192,7 +166,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
       type="text"
     />
   </span>,
-  .c4 {
+  .c3 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -215,7 +189,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   min-width: 16px;
 }
 
-.c5 {
+.c4 {
   border-color: var(--control-borderColor-emphasis);
   border-style: solid;
   border-width: 1px;
@@ -231,7 +205,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
 }
 
-.c5::before {
+.c4::before {
   width: var(--base-size-16,16px);
   height: var(--base-size-16,16px);
   visibility: hidden;
@@ -253,7 +227,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
 }
 
-.c6 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -268,7 +242,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   min-width: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -278,13 +252,13 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   line-height: 20px;
 }
 
-.c8 {
+.c7 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c9 {
+.c8 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -306,29 +280,16 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
-.c9 svg {
+.c8 svg {
   font-size: 12px;
 }
 
-[data-variant="danger"]:not([aria-disabled]):not([data-inactive]):hover .c3,
-[data-variant="danger"]:active .c9 {
+[data-variant="danger"]:not([aria-disabled]):not([data-inactive]):hover .c2,
+[data-variant="danger"]:active .c8 {
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c2 {
+.c1 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -360,32 +321,32 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   margin-bottom: unset;
 }
 
-.c2[data-loading] {
+.c1[data-loading] {
   cursor: default;
 }
 
-.c2[aria-disabled],
-.c2[data-inactive] {
+.c1[aria-disabled],
+.c1[data-inactive] {
   cursor: not-allowed;
 }
 
-.c2[aria-disabled] [data-component="ActionList.Checkbox"],
-.c2[data-inactive] [data-component="ActionList.Checkbox"] {
+.c1[aria-disabled] [data-component="ActionList.Checkbox"],
+.c1[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c2[aria-disabled] [data-component="ActionList.Selection"],
-.c2[data-inactive] [data-component="ActionList.Selection"] {
+.c1[aria-disabled] [data-component="ActionList.Selection"],
+.c1[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"] {
+.c1 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"]::before {
+.c1 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -396,30 +357,30 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   border-color: var(--divider-color,transparent);
 }
 
-.c2:not(:first-of-type) {
+.c1:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c0 {
   --divider-color: transparent !important;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c1[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
-.c2[data-focus-visible-added] + li {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c0,
+.c1[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c2[data-is-active-descendant] {
+.c1[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c2[data-is-active-descendant]::after {
+.c1[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -430,17 +391,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   border-radius: 6px;
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c0 {
   --divider-color: transparent !important;
 }
 
-.c10:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
-.c10[data-focus-visible-added] + li {
+.c9:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c0,
+.c9[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 @media (forced-colors:active) {
-  .c5 {
+  .c4 {
     border-width: 1px;
   }
 }
@@ -450,30 +411,30 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 @media (forced-colors:active) {
-  .c2:focus,
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2[data-is-active-descendant] {
+  .c1:focus,
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2:hover:not([aria-disabled]):not([data-inactive]) {
+  .c1:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2:focus.focus-visible {
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c2:active:not([aria-disabled]):not([data-inactive]) {
+  .c1:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -488,7 +449,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 <span
-    className="c0"
+    className="InternalVisuallyHidden"
   >
     <div>
       <ul
@@ -502,7 +463,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
         <li
           aria-labelledby="0--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="0"
           id="0"
           onClick={[Function]}
@@ -511,33 +472,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="0--label"
             >
               zero
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="1--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="1"
           id="1"
           onClick={[Function]}
@@ -546,33 +507,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="1--label"
             >
               one
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="2--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="2"
           id="2"
           onClick={[Function]}
@@ -581,33 +542,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="2--label"
             >
               two
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -616,33 +577,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="3--label"
             >
               three
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -651,33 +612,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="4--label"
             >
               four
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -686,33 +647,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="5--label"
             >
               five
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -721,33 +682,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="6--label"
             >
               six
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -756,33 +717,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="7--label"
             >
               seven
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -791,33 +752,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="20--label"
             >
               twenty
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -826,33 +787,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="21--label"
             >
               twentyone
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="add-new-item--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="add-new-item"
           id="add-new-item"
           onClick={[Function]}
@@ -861,16 +822,16 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c3 c4"
+            className="c2 c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c3 c5"
+              className="c2 c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <span
-            className="c3 c9"
+            className="c2 c8"
           >
             <svg
               aria-hidden="true"
@@ -894,17 +855,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             </svg>
           </span>
           <div
-            className="c3 c6"
+            className="c2 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c3 c7"
+              className="c2 c6"
               id="add-new-item--label"
             >
               Add new item
             </span>
             <span
-              className="c3 c8"
+              className="c2 c7"
             />
           </div>
         </li>
@@ -953,7 +914,7 @@ exports[`snapshots renders a multiselect input 1`] = `
       type="text"
     />
   </span>,
-  .c3 {
+  .c2 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -976,7 +937,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   min-width: 16px;
 }
 
-.c4 {
+.c3 {
   border-color: var(--control-borderColor-emphasis);
   border-style: solid;
   border-width: 1px;
@@ -992,7 +953,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
 }
 
-.c4::before {
+.c3::before {
   width: var(--base-size-16,16px);
   height: var(--base-size-16,16px);
   visibility: hidden;
@@ -1014,7 +975,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
 }
 
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1029,7 +990,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   min-width: 0;
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1039,26 +1000,13 @@ exports[`snapshots renders a multiselect input 1`] = `
   line-height: 20px;
 }
 
-.c7 {
+.c6 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c2 {
+.c1 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1090,32 +1038,32 @@ exports[`snapshots renders a multiselect input 1`] = `
   margin-bottom: unset;
 }
 
-.c2[data-loading] {
+.c1[data-loading] {
   cursor: default;
 }
 
-.c2[aria-disabled],
-.c2[data-inactive] {
+.c1[aria-disabled],
+.c1[data-inactive] {
   cursor: not-allowed;
 }
 
-.c2[aria-disabled] [data-component="ActionList.Checkbox"],
-.c2[data-inactive] [data-component="ActionList.Checkbox"] {
+.c1[aria-disabled] [data-component="ActionList.Checkbox"],
+.c1[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c2[aria-disabled] [data-component="ActionList.Selection"],
-.c2[data-inactive] [data-component="ActionList.Selection"] {
+.c1[aria-disabled] [data-component="ActionList.Selection"],
+.c1[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"] {
+.c1 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"]::before {
+.c1 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1126,30 +1074,30 @@ exports[`snapshots renders a multiselect input 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c2:not(:first-of-type) {
+.c1:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c0 {
   --divider-color: transparent !important;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c1[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
-.c2[data-focus-visible-added] + li {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c0,
+.c1[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c2[data-is-active-descendant] {
+.c1[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c2[data-is-active-descendant]::after {
+.c1[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1161,43 +1109,43 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c4 {
+  .c3 {
     border-width: 1px;
   }
 }
 
 @media (forced-colors:active) {
-  .c2:focus,
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2[data-is-active-descendant] {
+  .c1:focus,
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2:hover:not([aria-disabled]):not([data-inactive]) {
+  .c1:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2:focus.focus-visible {
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c2:active:not([aria-disabled]):not([data-inactive]) {
+  .c1:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
 <span
-    className="c0"
+    className="InternalVisuallyHidden"
   >
     <div>
       <ul
@@ -1211,7 +1159,7 @@ exports[`snapshots renders a multiselect input 1`] = `
         <li
           aria-labelledby="0--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="0"
           id="0"
           onClick={[Function]}
@@ -1220,33 +1168,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="0--label"
             >
               zero
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="1--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="1"
           id="1"
           onClick={[Function]}
@@ -1255,33 +1203,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="1--label"
             >
               one
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="2--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="2"
           id="2"
           onClick={[Function]}
@@ -1290,33 +1238,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="2--label"
             >
               two
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -1325,33 +1273,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="3--label"
             >
               three
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -1360,33 +1308,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="4--label"
             >
               four
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -1395,33 +1343,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="5--label"
             >
               five
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -1430,33 +1378,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="6--label"
             >
               six
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -1465,33 +1413,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="7--label"
             >
               seven
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -1500,33 +1448,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="20--label"
             >
               twenty
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
           aria-selected={false}
-          className="c1 c2"
+          className="c0 c1"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -1535,26 +1483,26 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="21--label"
             >
               twentyone
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
@@ -1615,7 +1563,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
       type="text"
     />
   </span>,
-  .c3 {
+  .c2 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -1638,7 +1586,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   min-width: 16px;
 }
 
-.c4 {
+.c3 {
   border-color: var(--control-checked-borderColor-rest);
   border-style: solid;
   border-width: 1px;
@@ -1654,7 +1602,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1);
 }
 
-.c4::before {
+.c3::before {
   width: var(--base-size-16,16px);
   height: var(--base-size-16,16px);
   visibility: visible;
@@ -1676,7 +1624,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
 }
 
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1691,7 +1639,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   min-width: 0;
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1701,13 +1649,13 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   line-height: 20px;
 }
 
-.c7 {
+.c6 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c9 {
+.c8 {
   border-color: var(--control-borderColor-emphasis);
   border-style: solid;
   border-width: 1px;
@@ -1723,7 +1671,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
 }
 
-.c9::before {
+.c8::before {
   width: var(--base-size-16,16px);
   height: var(--base-size-16,16px);
   visibility: hidden;
@@ -1745,20 +1693,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
 }
 
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c2 {
+.c1 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1790,32 +1725,32 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   margin-bottom: unset;
 }
 
-.c2[data-loading] {
+.c1[data-loading] {
   cursor: default;
 }
 
-.c2[aria-disabled],
-.c2[data-inactive] {
+.c1[aria-disabled],
+.c1[data-inactive] {
   cursor: not-allowed;
 }
 
-.c2[aria-disabled] [data-component="ActionList.Checkbox"],
-.c2[data-inactive] [data-component="ActionList.Checkbox"] {
+.c1[aria-disabled] [data-component="ActionList.Checkbox"],
+.c1[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   border-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
-.c2[aria-disabled] [data-component="ActionList.Selection"],
-.c2[data-inactive] [data-component="ActionList.Selection"] {
+.c1[aria-disabled] [data-component="ActionList.Selection"],
+.c1[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"] {
+.c1 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"]::before {
+.c1 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1826,30 +1761,30 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c2:not(:first-of-type) {
+.c1:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c0 {
   --divider-color: transparent !important;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c1[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
-.c2[data-focus-visible-added] + li {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c0,
+.c1[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c2[data-is-active-descendant] {
+.c1[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c2[data-is-active-descendant]::after {
+.c1[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1860,7 +1795,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-radius: 6px;
 }
 
-.c8 {
+.c7 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1892,32 +1827,32 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   margin-bottom: unset;
 }
 
-.c8[data-loading] {
+.c7[data-loading] {
   cursor: default;
 }
 
-.c8[aria-disabled],
-.c8[data-inactive] {
+.c7[aria-disabled],
+.c7[data-inactive] {
   cursor: not-allowed;
 }
 
-.c8[aria-disabled] [data-component="ActionList.Checkbox"],
-.c8[data-inactive] [data-component="ActionList.Checkbox"] {
+.c7[aria-disabled] [data-component="ActionList.Checkbox"],
+.c7[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c8[aria-disabled] [data-component="ActionList.Selection"],
-.c8[data-inactive] [data-component="ActionList.Selection"] {
+.c7[aria-disabled] [data-component="ActionList.Selection"],
+.c7[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c8 [data-component="ActionList.Item--DividerContainer"] {
+.c7 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c8 [data-component="ActionList.Item--DividerContainer"]::before {
+.c7 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1928,30 +1863,30 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c8:not(:first-of-type) {
+.c7:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c0 {
   --divider-color: transparent !important;
 }
 
-.c8:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c8[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c7[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c8:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
-.c8[data-focus-visible-added] + li {
+.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c0,
+.c7[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c8[data-is-active-descendant] {
+.c7[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c8[data-is-active-descendant]::after {
+.c7[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1963,79 +1898,79 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c4 {
+  .c3 {
     border-width: 8px;
   }
 }
 
 @media (forced-colors:active) {
-  .c9 {
+  .c8 {
     border-width: 1px;
   }
 }
 
 @media (forced-colors:active) {
-  .c2:focus,
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2[data-is-active-descendant] {
+  .c1:focus,
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2:hover:not([aria-disabled]):not([data-inactive]) {
+  .c1:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2:focus.focus-visible {
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c2:active:not([aria-disabled]):not([data-inactive]) {
+  .c1:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
 @media (forced-colors:active) {
-  .c8:focus,
-  .c8:focus-visible,
-  .c8 > a.focus-visible,
-  .c8[data-is-active-descendant] {
+  .c7:focus,
+  .c7:focus-visible,
+  .c7 > a.focus-visible,
+  .c7[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8:hover:not([aria-disabled]):not([data-inactive]) {
+  .c7:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c8:focus-visible,
-  .c8 > a.focus-visible,
-  .c8:focus.focus-visible {
+  .c7:focus-visible,
+  .c7 > a.focus-visible,
+  .c7:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c8:active:not([aria-disabled]):not([data-inactive]) {
+  .c7:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
 <span
-    className="c0"
+    className="InternalVisuallyHidden"
   >
     <div>
       <ul
@@ -2049,7 +1984,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
         <li
           aria-labelledby="0--label  "
           aria-selected={true}
-          className="c1 c2"
+          className="c0 c1"
           data-id="0"
           id="0"
           onClick={[Function]}
@@ -2058,33 +1993,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="0--label"
             >
               zero
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="1--label  "
           aria-selected={true}
-          className="c1 c2"
+          className="c0 c1"
           data-id="1"
           id="1"
           onClick={[Function]}
@@ -2093,33 +2028,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="1--label"
             >
               one
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="2--label  "
           aria-selected={true}
-          className="c1 c2"
+          className="c0 c1"
           data-id="2"
           id="2"
           onClick={[Function]}
@@ -2128,33 +2063,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4"
+              className="c3"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="2--label"
             >
               two
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
           aria-selected={false}
-          className="c1 c8"
+          className="c0 c7"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -2163,33 +2098,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c8"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="3--label"
             >
               three
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
           aria-selected={false}
-          className="c1 c8"
+          className="c0 c7"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -2198,33 +2133,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c8"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="4--label"
             >
               four
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
           aria-selected={false}
-          className="c1 c8"
+          className="c0 c7"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -2233,33 +2168,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c8"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="5--label"
             >
               five
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
           aria-selected={false}
-          className="c1 c8"
+          className="c0 c7"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -2268,33 +2203,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c8"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="6--label"
             >
               six
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
           aria-selected={false}
-          className="c1 c8"
+          className="c0 c7"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -2303,33 +2238,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c8"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="7--label"
             >
               seven
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
           aria-selected={false}
-          className="c1 c8"
+          className="c0 c7"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -2338,33 +2273,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c8"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="20--label"
             >
               twenty
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
           aria-selected={false}
-          className="c1 c8"
+          className="c0 c7"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -2373,26 +2308,26 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c8"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="21--label"
             >
               twentyone
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
@@ -2437,7 +2372,7 @@ exports[`snapshots renders a single select input 1`] = `
       type="text"
     />
   </span>,
-  .c3 {
+  .c2 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -2460,7 +2395,7 @@ exports[`snapshots renders a single select input 1`] = `
   min-width: 16px;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2475,7 +2410,7 @@ exports[`snapshots renders a single select input 1`] = `
   min-width: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -2485,26 +2420,13 @@ exports[`snapshots renders a single select input 1`] = `
   line-height: 20px;
 }
 
-.c6 {
+.c5 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c2 {
+.c1 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2536,32 +2458,32 @@ exports[`snapshots renders a single select input 1`] = `
   margin-bottom: unset;
 }
 
-.c2[data-loading] {
+.c1[data-loading] {
   cursor: default;
 }
 
-.c2[aria-disabled],
-.c2[data-inactive] {
+.c1[aria-disabled],
+.c1[data-inactive] {
   cursor: not-allowed;
 }
 
-.c2[aria-disabled] [data-component="ActionList.Checkbox"],
-.c2[data-inactive] [data-component="ActionList.Checkbox"] {
+.c1[aria-disabled] [data-component="ActionList.Checkbox"],
+.c1[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c2[aria-disabled] [data-component="ActionList.Selection"],
-.c2[data-inactive] [data-component="ActionList.Selection"] {
+.c1[aria-disabled] [data-component="ActionList.Selection"],
+.c1[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"] {
+.c1 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"]::before {
+.c1 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -2572,30 +2494,30 @@ exports[`snapshots renders a single select input 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c2:not(:first-of-type) {
+.c1:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c0 {
   --divider-color: transparent !important;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c1[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
-.c2[data-focus-visible-added] + li {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c0,
+.c1[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c2[data-is-active-descendant] {
+.c1[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c2[data-is-active-descendant]::after {
+.c1[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -2607,37 +2529,37 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c2:focus,
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2[data-is-active-descendant] {
+  .c1:focus,
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2:hover:not([aria-disabled]):not([data-inactive]) {
+  .c1:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2:focus.focus-visible {
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c2:active:not([aria-disabled]):not([data-inactive]) {
+  .c1:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
 <span
-    className="c0"
+    className="InternalVisuallyHidden"
   >
     <div>
       <ul
@@ -2650,7 +2572,7 @@ exports[`snapshots renders a single select input 1`] = `
       >
         <li
           aria-labelledby="0--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="0"
           id="0"
           onClick={[Function]}
@@ -2659,27 +2581,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="0--label"
             >
               zero
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="1--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="1"
           id="1"
           onClick={[Function]}
@@ -2688,27 +2610,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="1--label"
             >
               one
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="2--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="2"
           id="2"
           onClick={[Function]}
@@ -2717,27 +2639,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="2--label"
             >
               two
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -2746,27 +2668,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="3--label"
             >
               three
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -2775,27 +2697,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="4--label"
             >
               four
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -2804,27 +2726,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="5--label"
             >
               five
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -2833,27 +2755,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="6--label"
             >
               six
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -2862,27 +2784,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="7--label"
             >
               seven
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -2891,27 +2813,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="20--label"
             >
               twenty
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -2920,21 +2842,21 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="21--label"
             >
               twentyone
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
@@ -2958,7 +2880,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
     id="customInput"
     type="text"
   />,
-  .c3 {
+  .c2 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -2981,7 +2903,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   min-width: 16px;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2996,7 +2918,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   min-width: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3006,26 +2928,13 @@ exports[`snapshots renders with a custom text input component 1`] = `
   line-height: 20px;
 }
 
-.c6 {
+.c5 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c2 {
+.c1 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3057,32 +2966,32 @@ exports[`snapshots renders with a custom text input component 1`] = `
   margin-bottom: unset;
 }
 
-.c2[data-loading] {
+.c1[data-loading] {
   cursor: default;
 }
 
-.c2[aria-disabled],
-.c2[data-inactive] {
+.c1[aria-disabled],
+.c1[data-inactive] {
   cursor: not-allowed;
 }
 
-.c2[aria-disabled] [data-component="ActionList.Checkbox"],
-.c2[data-inactive] [data-component="ActionList.Checkbox"] {
+.c1[aria-disabled] [data-component="ActionList.Checkbox"],
+.c1[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c2[aria-disabled] [data-component="ActionList.Selection"],
-.c2[data-inactive] [data-component="ActionList.Selection"] {
+.c1[aria-disabled] [data-component="ActionList.Selection"],
+.c1[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"] {
+.c1 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"]::before {
+.c1 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -3093,30 +3002,30 @@ exports[`snapshots renders with a custom text input component 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c2:not(:first-of-type) {
+.c1:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c0 {
   --divider-color: transparent !important;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c1[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
-.c2[data-focus-visible-added] + li {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c0,
+.c1[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c2[data-is-active-descendant] {
+.c1[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c2[data-is-active-descendant]::after {
+.c1[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -3128,37 +3037,37 @@ exports[`snapshots renders with a custom text input component 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c2:focus,
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2[data-is-active-descendant] {
+  .c1:focus,
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2:hover:not([aria-disabled]):not([data-inactive]) {
+  .c1:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2:focus.focus-visible {
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c2:active:not([aria-disabled]):not([data-inactive]) {
+  .c1:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
 <span
-    className="c0"
+    className="InternalVisuallyHidden"
   >
     <div>
       <ul
@@ -3171,7 +3080,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
       >
         <li
           aria-labelledby="0--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="0"
           id="0"
           onClick={[Function]}
@@ -3180,27 +3089,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="0--label"
             >
               zero
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="1--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="1"
           id="1"
           onClick={[Function]}
@@ -3209,27 +3118,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="1--label"
             >
               one
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="2--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="2"
           id="2"
           onClick={[Function]}
@@ -3238,27 +3147,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="2--label"
             >
               two
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -3267,27 +3176,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="3--label"
             >
               three
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -3296,27 +3205,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="4--label"
             >
               four
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -3325,27 +3234,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="5--label"
             >
               five
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -3354,27 +3263,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="6--label"
             >
               six
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -3383,27 +3292,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="7--label"
             >
               seven
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -3412,27 +3321,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="20--label"
             >
               twenty
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
-          className="c1 c2"
+          className="c0 c1"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -3441,21 +3350,21 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c3"
+            className="c2"
             data-component="ActionList.Selection"
           />
           <div
-            className="c4"
+            className="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c5"
+              className="c4"
               id="21--label"
             >
               twentyone
             </span>
             <span
-              className="c6"
+              className="c5"
             />
           </div>
         </li>
@@ -3500,20 +3409,7 @@ exports[`snapshots renders with an input value 1`] = `
       type="text"
     />
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-@media (forced-colors:active) {
+  @media (forced-colors:active) {
 
 }
 
@@ -3522,7 +3418,7 @@ exports[`snapshots renders with an input value 1`] = `
 }
 
 <span
-    className="c0"
+    className="InternalVisuallyHidden"
   >
     <div>
       <div
diff --git a/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap
index e3b775872b2..d94a8790436 100644
--- a/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -642,20 +642,7 @@ exports[`TextInput renders trailingVisual 4`] = `
 
 exports[`TextInput renders with a loading indicator 1`] = `
 [
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-trailing-visual={true}
@@ -670,7 +657,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r2o:"
     >
       Loading
@@ -714,20 +701,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-leading-visual={true}
@@ -780,7 +754,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r2s:"
     >
       Loading
@@ -824,20 +798,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-trailing-visual={true}
@@ -852,7 +813,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r31:"
     >
       Loading
@@ -896,20 +857,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-leading-visual={true}
@@ -986,7 +934,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r35:"
     >
       Loading
@@ -1030,20 +978,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-leading-visual={true}
@@ -1120,7 +1055,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r3a:"
     >
       Loading
@@ -1164,20 +1099,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-leading-visual={true}
@@ -1255,7 +1177,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r3f:"
     >
       Loading
@@ -1299,20 +1221,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-trailing-visual={true}
@@ -1327,7 +1236,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r3k:"
     >
       Loading
@@ -1395,20 +1304,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-leading-visual={true}
@@ -1462,7 +1358,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r3o:"
     >
       Loading
@@ -1530,20 +1426,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-trailing-visual={true}
@@ -1558,7 +1441,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r3t:"
     >
       Loading
@@ -1626,20 +1509,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-leading-visual={true}
@@ -1718,7 +1588,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r41:"
     >
       Loading
@@ -1786,20 +1656,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-leading-visual={true}
@@ -1877,7 +1734,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r46:"
     >
       Loading
@@ -1945,20 +1802,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
+  <span
     aria-busy={true}
     className="TextInput-wrapper TextInputWrapper TextInputBaseWrapper"
     data-leading-visual={true}
@@ -2037,7 +1881,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
       id=":r4b:"
     >
       Loading
diff --git a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
index c3f81d992d7..aa29734e142 100644
--- a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
@@ -1,19 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Token components AvatarToken renders all sizes 1`] = `
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 <span
   className="TokenBase Token Token"
   data-cursor-is-interactive={false}
@@ -54,7 +41,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   >
     token
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
     >
        (press backspace or delete to remove)
     </span>
@@ -96,19 +83,6 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
 `;
 
 exports[`Token components AvatarToken renders all sizes 2`] = `
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 <span
   className="TokenBase Token Token"
   data-cursor-is-interactive={false}
@@ -149,7 +123,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   >
     token
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
     >
        (press backspace or delete to remove)
     </span>
@@ -191,19 +165,6 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
 `;
 
 exports[`Token components AvatarToken renders all sizes 3`] = `
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 <span
   className="TokenBase Token Token"
   data-cursor-is-interactive={false}
@@ -244,7 +205,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   >
     token
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
     >
        (press backspace or delete to remove)
     </span>
@@ -286,19 +247,6 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
 `;
 
 exports[`Token components AvatarToken renders all sizes 4`] = `
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 <span
   className="TokenBase Token Token"
   data-cursor-is-interactive={false}
@@ -339,7 +287,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   >
     token
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
     >
        (press backspace or delete to remove)
     </span>
@@ -426,19 +374,6 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
 `;
 
 exports[`Token components AvatarToken renders with a remove button 1`] = `
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 <span
   className="TokenBase Token Token"
   data-cursor-is-interactive={false}
@@ -479,7 +414,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   >
     token
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
     >
        (press backspace or delete to remove)
     </span>
@@ -1087,19 +1022,6 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
 `;
 
 exports[`Token components Token renders all sizes 1`] = `
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 <span
   className="TokenBase Token"
   data-cursor-is-interactive={false}
@@ -1118,7 +1040,7 @@ exports[`Token components Token renders all sizes 1`] = `
   >
     token
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
     >
        (press backspace or delete to remove)
     </span>
@@ -1160,19 +1082,6 @@ exports[`Token components Token renders all sizes 1`] = `
 `;
 
 exports[`Token components Token renders all sizes 2`] = `
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 <span
   className="TokenBase Token"
   data-cursor-is-interactive={false}
@@ -1191,7 +1100,7 @@ exports[`Token components Token renders all sizes 2`] = `
   >
     token
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
     >
        (press backspace or delete to remove)
     </span>
@@ -1233,19 +1142,6 @@ exports[`Token components Token renders all sizes 2`] = `
 `;
 
 exports[`Token components Token renders all sizes 3`] = `
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 <span
   className="TokenBase Token"
   data-cursor-is-interactive={false}
@@ -1264,7 +1160,7 @@ exports[`Token components Token renders all sizes 3`] = `
   >
     token
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
     >
        (press backspace or delete to remove)
     </span>
@@ -1306,19 +1202,6 @@ exports[`Token components Token renders all sizes 3`] = `
 `;
 
 exports[`Token components Token renders all sizes 4`] = `
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 <span
   className="TokenBase Token"
   data-cursor-is-interactive={false}
@@ -1337,7 +1220,7 @@ exports[`Token components Token renders all sizes 4`] = `
   >
     token
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
     >
        (press backspace or delete to remove)
     </span>
@@ -1435,19 +1318,6 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
 `;
 
 exports[`Token components Token renders with a remove button 1`] = `
-.c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 <span
   className="TokenBase Token"
   data-cursor-is-interactive={false}
@@ -1466,7 +1336,7 @@ exports[`Token components Token renders with a remove button 1`] = `
   >
     token
     <span
-      className="c0"
+      className="InternalVisuallyHidden"
     >
        (press backspace or delete to remove)
     </span>
diff --git a/packages/react/src/_VisuallyHidden.module.css b/packages/react/src/_VisuallyHidden.module.css
new file mode 100644
index 00000000000..c020435a2f0
--- /dev/null
+++ b/packages/react/src/_VisuallyHidden.module.css
@@ -0,0 +1,12 @@
+.InternalVisuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  /* stylelint-disable-next-line primer/spacing */
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index 641fd146f57..b5520b5db21 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -1,29 +1,16 @@
-import styled from 'styled-components'
-import type {SxProp} from './sx'
-import sx from './sx'
+import classes from './_VisuallyHidden.module.css'
+import {clsx} from 'clsx'
 
 interface Props {
   isVisible?: boolean
 }
 
-const VisuallyHidden = styled.span<Props & SxProp>`
-  ${({isVisible = false}) => {
-    if (isVisible) {
-      return sx
-    }
-
-    return `
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border-width: 0;
-    `
-  }}
-`
+function VisuallyHidden({isVisible, children, ...rest}: Props & React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span className={clsx({[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
+      {children}
+    </span>
+  )
+}
 
 export default VisuallyHidden

From e645c172bec0e7badb8d2798899a0a8ae0f15358 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 20 May 2025 18:14:42 +0000
Subject: [PATCH 02/11] Add changeset

---
 .changeset/smooth-steaks-hug.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/smooth-steaks-hug.md

diff --git a/.changeset/smooth-steaks-hug.md b/.changeset/smooth-steaks-hug.md
new file mode 100644
index 00000000000..e6b22a508ab
--- /dev/null
+++ b/.changeset/smooth-steaks-hug.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Convert `_VisuallyHidden` internal component to CSS modules

From 764b996e1c7ddf7b38b4b04605bf46e85cf0b78e Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 20 May 2025 18:25:48 +0000
Subject: [PATCH 03/11] Handle as prop

---
 packages/react/src/_VisuallyHidden.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index b5520b5db21..62d185e969c 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -1,15 +1,17 @@
 import classes from './_VisuallyHidden.module.css'
 import {clsx} from 'clsx'
+import {BoxWithFallback} from './internal/components/BoxWithFallback'
 
 interface Props {
   isVisible?: boolean
+  as?: React.ElementType
 }
 
-function VisuallyHidden({isVisible, children, ...rest}: Props & React.HTMLAttributes<HTMLSpanElement>) {
+function VisuallyHidden({isVisible, children, as = 'span', ...rest}: Props & React.HTMLAttributes<HTMLSpanElement>) {
   return (
-    <span className={clsx({[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
+    <BoxWithFallback as={as} className={clsx({[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
       {children}
-    </span>
+    </BoxWithFallback>
   )
 }
 

From 670f040154695c006fcc1fca18fc977a7cd39344 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 20 May 2025 18:26:23 +0000
Subject: [PATCH 04/11] Add sx prop

---
 packages/react/src/_VisuallyHidden.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index 62d185e969c..5236657f6f4 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -1,11 +1,12 @@
 import classes from './_VisuallyHidden.module.css'
 import {clsx} from 'clsx'
 import {BoxWithFallback} from './internal/components/BoxWithFallback'
+import type { SxProp } from './sx'
 
 interface Props {
   isVisible?: boolean
   as?: React.ElementType
-}
+} & SxProp
 
 function VisuallyHidden({isVisible, children, as = 'span', ...rest}: Props & React.HTMLAttributes<HTMLSpanElement>) {
   return (

From 815d3d52c8da97c84030088654e1e790f52c49d2 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 20 May 2025 18:28:29 +0000
Subject: [PATCH 05/11] Type fix

---
 packages/react/src/_VisuallyHidden.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index 5236657f6f4..cd4c4a59d9b 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -1,14 +1,19 @@
 import classes from './_VisuallyHidden.module.css'
 import {clsx} from 'clsx'
 import {BoxWithFallback} from './internal/components/BoxWithFallback'
-import type { SxProp } from './sx'
+import type {SxProp} from './sx'
 
 interface Props {
   isVisible?: boolean
   as?: React.ElementType
-} & SxProp
+}
 
-function VisuallyHidden({isVisible, children, as = 'span', ...rest}: Props & React.HTMLAttributes<HTMLSpanElement>) {
+function VisuallyHidden({
+  isVisible,
+  children,
+  as = 'span',
+  ...rest
+}: Props & React.HTMLAttributes<HTMLSpanElement> & SxProp) {
   return (
     <BoxWithFallback as={as} className={clsx({[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
       {children}

From 41cd5184d3bf0ec5a851bd829805fa274955c4ed Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 20 May 2025 18:34:59 +0000
Subject: [PATCH 06/11] Pass along className in case needed

---
 packages/react/src/_VisuallyHidden.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index cd4c4a59d9b..88171170716 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -12,10 +12,11 @@ function VisuallyHidden({
   isVisible,
   children,
   as = 'span',
+  className,
   ...rest
 }: Props & React.HTMLAttributes<HTMLSpanElement> & SxProp) {
   return (
-    <BoxWithFallback as={as} className={clsx({[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
+    <BoxWithFallback as={as} className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
       {children}
     </BoxWithFallback>
   )

From 8b3957e1a8c264370e71f29d9a4fb2231d9d6379 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 20 May 2025 18:55:04 +0000
Subject: [PATCH 07/11] Updating snapshots

---
 .../__snapshots__/CircleBadge.test.tsx.snap   |   6 +-
 .../TextInputWithTokens.test.tsx.snap         | 776 +++++++++---------
 2 files changed, 391 insertions(+), 391 deletions(-)

diff --git a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap
index 6bfc74067f5..031fc6ea49b 100644
--- a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap
+++ b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`CircleBadge > respects the inline prop 1`] = `
 <div
-  class="sc-hzhJZQ bXgcAI"
+  class="sc-fUnMCh kvrJCk"
 />
 `;
 
 exports[`CircleBadge > respects the variant prop 1`] = `
 <div
-  class="sc-hzhJZQ fDGwQg"
+  class="sc-fUnMCh fzXxSU"
 />
 `;
 
 exports[`CircleBadge > uses the size prop to override the variant prop 1`] = `
 <div
-  class="sc-hzhJZQ jIuIWo"
+  class="sc-fUnMCh gxuYTk"
   size="20"
 />
 `;
diff --git a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
index c665a90994d..27a4e4864bd 100644
--- a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -65,7 +65,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -110,7 +110,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -155,7 +155,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -200,7 +200,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -245,7 +245,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -290,7 +290,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -335,7 +335,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -380,7 +380,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -492,7 +492,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -537,7 +537,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -582,7 +582,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -627,7 +627,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -672,7 +672,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -717,7 +717,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -762,7 +762,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -807,7 +807,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -957,7 +957,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1002,7 +1002,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1078,7 +1078,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -1123,7 +1123,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -1371,7 +1371,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1416,7 +1416,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1461,7 +1461,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1506,7 +1506,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1551,7 +1551,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1596,7 +1596,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1641,7 +1641,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1686,7 +1686,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1756,7 +1756,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -1801,7 +1801,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -1846,7 +1846,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -1891,7 +1891,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -1936,7 +1936,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -1981,7 +1981,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -2026,7 +2026,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -2071,7 +2071,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -2200,7 +2200,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2245,7 +2245,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2290,7 +2290,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2335,7 +2335,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2380,7 +2380,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2425,7 +2425,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2470,7 +2470,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2515,7 +2515,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2583,7 +2583,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -2628,7 +2628,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -2673,7 +2673,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -2718,7 +2718,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -2763,7 +2763,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -2808,7 +2808,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -2853,7 +2853,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -2898,7 +2898,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -3027,7 +3027,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3072,7 +3072,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3117,7 +3117,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3162,7 +3162,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3207,7 +3207,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3252,7 +3252,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3297,7 +3297,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3342,7 +3342,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3409,7 +3409,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3454,7 +3454,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3499,7 +3499,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3544,7 +3544,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3589,7 +3589,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3634,7 +3634,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3679,7 +3679,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3724,7 +3724,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3792,7 +3792,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -3837,7 +3837,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -3882,7 +3882,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -3927,7 +3927,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -3972,7 +3972,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -4017,7 +4017,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -4062,7 +4062,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -4107,7 +4107,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -4236,7 +4236,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4281,7 +4281,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4326,7 +4326,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4371,7 +4371,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4416,7 +4416,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4461,7 +4461,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4506,7 +4506,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4551,7 +4551,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4618,7 +4618,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4663,7 +4663,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4708,7 +4708,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4753,7 +4753,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4798,7 +4798,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4843,7 +4843,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4888,7 +4888,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4933,7 +4933,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5000,7 +5000,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5045,7 +5045,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5090,7 +5090,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5135,7 +5135,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5180,7 +5180,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5225,7 +5225,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5270,7 +5270,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5315,7 +5315,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5383,7 +5383,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -5428,7 +5428,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -5473,7 +5473,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -5518,7 +5518,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -5563,7 +5563,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -5608,7 +5608,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -5653,7 +5653,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -5698,7 +5698,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -5827,7 +5827,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5872,7 +5872,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5917,7 +5917,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5962,7 +5962,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6007,7 +6007,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6052,7 +6052,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6097,7 +6097,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6142,7 +6142,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6209,7 +6209,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6254,7 +6254,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6299,7 +6299,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6344,7 +6344,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6389,7 +6389,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6434,7 +6434,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6479,7 +6479,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6524,7 +6524,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6591,7 +6591,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6636,7 +6636,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6681,7 +6681,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6726,7 +6726,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6771,7 +6771,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6816,7 +6816,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6861,7 +6861,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6906,7 +6906,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6973,7 +6973,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7018,7 +7018,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7063,7 +7063,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7108,7 +7108,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7153,7 +7153,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7198,7 +7198,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7243,7 +7243,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7288,7 +7288,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7356,7 +7356,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -7401,7 +7401,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -7446,7 +7446,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -7491,7 +7491,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -7536,7 +7536,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -7581,7 +7581,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -7626,7 +7626,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -7671,7 +7671,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -7801,7 +7801,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7846,7 +7846,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7891,7 +7891,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7936,7 +7936,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7981,7 +7981,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8026,7 +8026,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8071,7 +8071,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8116,7 +8116,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8185,7 +8185,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8230,7 +8230,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8275,7 +8275,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8320,7 +8320,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8365,7 +8365,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8410,7 +8410,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8455,7 +8455,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8500,7 +8500,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8629,7 +8629,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8650,7 +8650,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8671,7 +8671,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8692,7 +8692,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8713,7 +8713,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8734,7 +8734,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8755,7 +8755,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8776,7 +8776,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8820,7 +8820,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8841,7 +8841,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8862,7 +8862,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8883,7 +8883,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8904,7 +8904,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8925,7 +8925,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8946,7 +8946,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -8967,7 +8967,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -9073,7 +9073,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9118,7 +9118,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9163,7 +9163,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9208,7 +9208,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9253,7 +9253,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9298,7 +9298,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9343,7 +9343,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9388,7 +9388,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9528,7 +9528,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9573,7 +9573,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9618,7 +9618,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9663,7 +9663,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9708,7 +9708,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9753,7 +9753,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9798,7 +9798,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9843,7 +9843,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9946,7 +9946,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9991,7 +9991,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10036,7 +10036,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10081,7 +10081,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10126,7 +10126,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10171,7 +10171,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10216,7 +10216,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10261,7 +10261,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10421,7 +10421,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10466,7 +10466,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10511,7 +10511,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10556,7 +10556,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10601,7 +10601,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10646,7 +10646,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10691,7 +10691,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10736,7 +10736,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10896,7 +10896,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10941,7 +10941,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10986,7 +10986,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11031,7 +11031,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11076,7 +11076,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11121,7 +11121,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11166,7 +11166,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11211,7 +11211,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11372,7 +11372,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11417,7 +11417,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11462,7 +11462,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11507,7 +11507,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11552,7 +11552,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11597,7 +11597,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11642,7 +11642,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11687,7 +11687,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11790,7 +11790,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11835,7 +11835,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11880,7 +11880,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11925,7 +11925,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11970,7 +11970,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12015,7 +12015,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12060,7 +12060,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12105,7 +12105,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12266,7 +12266,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12311,7 +12311,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12356,7 +12356,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12401,7 +12401,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12446,7 +12446,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12491,7 +12491,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12536,7 +12536,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12581,7 +12581,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12704,7 +12704,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12749,7 +12749,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12794,7 +12794,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12839,7 +12839,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12884,7 +12884,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12929,7 +12929,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12974,7 +12974,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13019,7 +13019,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13200,7 +13200,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13245,7 +13245,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13290,7 +13290,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13335,7 +13335,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13380,7 +13380,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13425,7 +13425,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13470,7 +13470,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13515,7 +13515,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13696,7 +13696,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13741,7 +13741,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13786,7 +13786,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13831,7 +13831,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13876,7 +13876,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13921,7 +13921,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13966,7 +13966,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14011,7 +14011,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14192,7 +14192,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14237,7 +14237,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14282,7 +14282,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14327,7 +14327,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14372,7 +14372,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14417,7 +14417,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14462,7 +14462,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14507,7 +14507,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14633,7 +14633,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -14678,7 +14678,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -14723,7 +14723,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -14768,7 +14768,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -14813,7 +14813,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -14858,7 +14858,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -14903,7 +14903,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -14948,7 +14948,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15088,7 +15088,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15133,7 +15133,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15178,7 +15178,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15223,7 +15223,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15268,7 +15268,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15313,7 +15313,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15358,7 +15358,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15403,7 +15403,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15506,7 +15506,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15551,7 +15551,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15596,7 +15596,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15641,7 +15641,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15686,7 +15686,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15731,7 +15731,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15776,7 +15776,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15821,7 +15821,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -15981,7 +15981,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16026,7 +16026,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16071,7 +16071,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16116,7 +16116,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16161,7 +16161,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16206,7 +16206,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16251,7 +16251,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16296,7 +16296,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16456,7 +16456,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16501,7 +16501,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16546,7 +16546,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16591,7 +16591,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16636,7 +16636,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16681,7 +16681,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16726,7 +16726,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16771,7 +16771,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16932,7 +16932,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -16977,7 +16977,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17022,7 +17022,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17067,7 +17067,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17112,7 +17112,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17157,7 +17157,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17202,7 +17202,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17247,7 +17247,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17350,7 +17350,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17395,7 +17395,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17440,7 +17440,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17485,7 +17485,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17530,7 +17530,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17575,7 +17575,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17620,7 +17620,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17665,7 +17665,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17826,7 +17826,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17871,7 +17871,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17916,7 +17916,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -17961,7 +17961,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18006,7 +18006,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18051,7 +18051,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18096,7 +18096,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18141,7 +18141,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18264,7 +18264,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18309,7 +18309,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18354,7 +18354,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18399,7 +18399,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18444,7 +18444,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18489,7 +18489,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18534,7 +18534,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18579,7 +18579,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18760,7 +18760,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18805,7 +18805,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18850,7 +18850,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18895,7 +18895,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18940,7 +18940,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -18985,7 +18985,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19030,7 +19030,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19075,7 +19075,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19256,7 +19256,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19301,7 +19301,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19346,7 +19346,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19391,7 +19391,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19436,7 +19436,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19481,7 +19481,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19526,7 +19526,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19571,7 +19571,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19752,7 +19752,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19797,7 +19797,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19842,7 +19842,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19887,7 +19887,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19932,7 +19932,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -19977,7 +19977,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -20022,7 +20022,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -20067,7 +20067,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -20253,7 +20253,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               zero
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20298,7 +20298,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               one
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20343,7 +20343,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               two
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20388,7 +20388,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               three
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20433,7 +20433,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               four
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20478,7 +20478,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               five
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20523,7 +20523,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               six
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20568,7 +20568,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               seven
               <span
-                class="sc-gEvEer jFikVR"
+                class="_InternalVisuallyHidden_bkpn2_1"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20636,7 +20636,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             zero
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -20681,7 +20681,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             one
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -20726,7 +20726,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             two
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -20771,7 +20771,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             three
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -20816,7 +20816,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             four
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -20861,7 +20861,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             five
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -20906,7 +20906,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             six
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>
@@ -20951,7 +20951,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             seven
             <span
-              class="sc-gEvEer jFikVR"
+              class="_InternalVisuallyHidden_bkpn2_1"
             >
                (press backspace or delete to remove)
             </span>

From b5cf78a60b855525bdc9fd6b958a87d6ef7ffd85 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 21 May 2025 09:26:13 -0700
Subject: [PATCH 08/11] Update packages/react/src/_VisuallyHidden.tsx

Co-authored-by: Josh Black <joshblack@github.com>
---
 packages/react/src/_VisuallyHidden.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index 88171170716..956f369aa97 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -8,13 +8,13 @@ interface Props {
   as?: React.ElementType
 }
 
-function VisuallyHidden({
+function VisuallyHidden<As extends React.ElementType>({
   isVisible,
   children,
   as = 'span',
   className,
   ...rest
-}: Props & React.HTMLAttributes<HTMLSpanElement> & SxProp) {
+}: Props & { as?: As } & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'span'> & SxProp) {
   return (
     <BoxWithFallback as={as} className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
       {children}

From 9e02a8132e6cb6aca49f2e6d14ddaeaef46b46f3 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 21 May 2025 09:47:00 -0700
Subject: [PATCH 09/11] Update packages/react/src/_VisuallyHidden.tsx

Co-authored-by: Josh Black <joshblack@github.com>
---
 packages/react/src/_VisuallyHidden.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index 956f369aa97..c8e6a2e4a05 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -3,9 +3,9 @@ import {clsx} from 'clsx'
 import {BoxWithFallback} from './internal/components/BoxWithFallback'
 import type {SxProp} from './sx'
 
-interface Props {
+interface Props<As extends React.ElementType> {
   isVisible?: boolean
-  as?: React.ElementType
+  as?: As
 }
 
 function VisuallyHidden<As extends React.ElementType>({

From 24a982344e494fb1ed9169addea24409c737ce26 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Mon, 7 Jul 2025 21:21:43 +0000
Subject: [PATCH 10/11] Generate new snapshot

---
 .../TextInputWithTokens.test.tsx.snap         | 776 +++++++++---------
 1 file changed, 388 insertions(+), 388 deletions(-)

diff --git a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
index 3ff93db0191..d2c334bfc1b 100644
--- a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -65,7 +65,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -110,7 +110,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -155,7 +155,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -200,7 +200,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -245,7 +245,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -290,7 +290,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -335,7 +335,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -380,7 +380,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -492,7 +492,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -537,7 +537,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -582,7 +582,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -627,7 +627,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -672,7 +672,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -717,7 +717,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -762,7 +762,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -807,7 +807,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -957,7 +957,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1002,7 +1002,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1078,7 +1078,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -1123,7 +1123,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -1371,7 +1371,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1416,7 +1416,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1461,7 +1461,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1506,7 +1506,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1551,7 +1551,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1596,7 +1596,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1641,7 +1641,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1686,7 +1686,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -1756,7 +1756,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -1801,7 +1801,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -1846,7 +1846,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -1891,7 +1891,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -1936,7 +1936,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -1981,7 +1981,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -2026,7 +2026,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -2071,7 +2071,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -2200,7 +2200,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2245,7 +2245,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2290,7 +2290,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2335,7 +2335,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2380,7 +2380,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2425,7 +2425,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2470,7 +2470,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2515,7 +2515,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -2583,7 +2583,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -2628,7 +2628,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -2673,7 +2673,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -2718,7 +2718,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -2763,7 +2763,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -2808,7 +2808,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -2853,7 +2853,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -2898,7 +2898,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -3027,7 +3027,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3072,7 +3072,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3117,7 +3117,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3162,7 +3162,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3207,7 +3207,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3252,7 +3252,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3297,7 +3297,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3342,7 +3342,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3409,7 +3409,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3454,7 +3454,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3499,7 +3499,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3544,7 +3544,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3589,7 +3589,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3634,7 +3634,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3679,7 +3679,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3724,7 +3724,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -3792,7 +3792,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -3837,7 +3837,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -3882,7 +3882,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -3927,7 +3927,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -3972,7 +3972,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -4017,7 +4017,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -4062,7 +4062,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -4107,7 +4107,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -4236,7 +4236,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4281,7 +4281,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4326,7 +4326,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4371,7 +4371,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4416,7 +4416,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4461,7 +4461,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4506,7 +4506,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4551,7 +4551,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4618,7 +4618,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4663,7 +4663,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4708,7 +4708,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4753,7 +4753,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4798,7 +4798,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4843,7 +4843,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4888,7 +4888,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -4933,7 +4933,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5000,7 +5000,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5045,7 +5045,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5090,7 +5090,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5135,7 +5135,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5180,7 +5180,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5225,7 +5225,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5270,7 +5270,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5315,7 +5315,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5383,7 +5383,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -5428,7 +5428,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -5473,7 +5473,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -5518,7 +5518,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -5563,7 +5563,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -5608,7 +5608,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -5653,7 +5653,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -5698,7 +5698,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -5827,7 +5827,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5872,7 +5872,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5917,7 +5917,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -5962,7 +5962,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6007,7 +6007,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6052,7 +6052,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6097,7 +6097,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6142,7 +6142,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6209,7 +6209,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6254,7 +6254,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6299,7 +6299,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6344,7 +6344,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6389,7 +6389,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6434,7 +6434,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6479,7 +6479,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6524,7 +6524,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6591,7 +6591,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6636,7 +6636,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6681,7 +6681,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6726,7 +6726,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6771,7 +6771,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6816,7 +6816,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6861,7 +6861,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6906,7 +6906,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -6973,7 +6973,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7018,7 +7018,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7063,7 +7063,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7108,7 +7108,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7153,7 +7153,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7198,7 +7198,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7243,7 +7243,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7288,7 +7288,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7356,7 +7356,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -7401,7 +7401,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -7446,7 +7446,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -7491,7 +7491,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -7536,7 +7536,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -7581,7 +7581,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -7626,7 +7626,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -7671,7 +7671,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -7801,7 +7801,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7846,7 +7846,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7891,7 +7891,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7936,7 +7936,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -7981,7 +7981,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8026,7 +8026,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8071,7 +8071,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8116,7 +8116,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8185,7 +8185,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8230,7 +8230,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8275,7 +8275,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8320,7 +8320,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8365,7 +8365,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8410,7 +8410,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8455,7 +8455,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8500,7 +8500,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8629,7 +8629,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8650,7 +8650,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8671,7 +8671,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8692,7 +8692,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8713,7 +8713,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8734,7 +8734,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8755,7 +8755,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8776,7 +8776,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -8820,7 +8820,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8841,7 +8841,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8862,7 +8862,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8883,7 +8883,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8904,7 +8904,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8925,7 +8925,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8946,7 +8946,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -8967,7 +8967,7 @@ exports[`TextInputWithTokens > renders tokens without a remove button when speci
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -9073,7 +9073,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9118,7 +9118,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9163,7 +9163,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9208,7 +9208,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9253,7 +9253,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9298,7 +9298,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9343,7 +9343,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9388,7 +9388,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9528,7 +9528,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9573,7 +9573,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9618,7 +9618,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9663,7 +9663,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9708,7 +9708,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9753,7 +9753,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9798,7 +9798,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9843,7 +9843,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9946,7 +9946,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -9991,7 +9991,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10036,7 +10036,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10081,7 +10081,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10126,7 +10126,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10171,7 +10171,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10216,7 +10216,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10261,7 +10261,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10421,7 +10421,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10466,7 +10466,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10511,7 +10511,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10556,7 +10556,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10601,7 +10601,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10646,7 +10646,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10691,7 +10691,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10736,7 +10736,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10896,7 +10896,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10941,7 +10941,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -10986,7 +10986,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11031,7 +11031,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11076,7 +11076,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11121,7 +11121,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11166,7 +11166,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11211,7 +11211,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11372,7 +11372,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11417,7 +11417,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11462,7 +11462,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11507,7 +11507,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11552,7 +11552,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11597,7 +11597,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11642,7 +11642,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11687,7 +11687,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11790,7 +11790,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11835,7 +11835,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11880,7 +11880,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11925,7 +11925,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -11970,7 +11970,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12015,7 +12015,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12060,7 +12060,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12105,7 +12105,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12266,7 +12266,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12311,7 +12311,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12356,7 +12356,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12401,7 +12401,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12446,7 +12446,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12491,7 +12491,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12536,7 +12536,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12581,7 +12581,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12704,7 +12704,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12749,7 +12749,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12794,7 +12794,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12839,7 +12839,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12884,7 +12884,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12929,7 +12929,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -12974,7 +12974,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13019,7 +13019,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13200,7 +13200,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13245,7 +13245,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13290,7 +13290,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13335,7 +13335,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13380,7 +13380,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13425,7 +13425,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13470,7 +13470,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13515,7 +13515,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13696,7 +13696,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13741,7 +13741,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13786,7 +13786,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13831,7 +13831,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13876,7 +13876,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13921,7 +13921,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -13966,7 +13966,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14011,7 +14011,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14192,7 +14192,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14237,7 +14237,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14282,7 +14282,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14327,7 +14327,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14372,7 +14372,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14417,7 +14417,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14462,7 +14462,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14507,7 +14507,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -14633,7 +14633,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -14678,7 +14678,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -14723,7 +14723,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -14768,7 +14768,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -14813,7 +14813,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -14858,7 +14858,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -14903,7 +14903,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -14948,7 +14948,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15088,7 +15088,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15133,7 +15133,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15178,7 +15178,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15223,7 +15223,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15268,7 +15268,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15313,7 +15313,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15358,7 +15358,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15403,7 +15403,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15506,7 +15506,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15551,7 +15551,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15596,7 +15596,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15641,7 +15641,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15686,7 +15686,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15731,7 +15731,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15776,7 +15776,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15821,7 +15821,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -15981,7 +15981,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16026,7 +16026,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16071,7 +16071,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16116,7 +16116,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16161,7 +16161,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16206,7 +16206,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16251,7 +16251,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16296,7 +16296,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16456,7 +16456,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16501,7 +16501,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16546,7 +16546,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16591,7 +16591,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16636,7 +16636,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16681,7 +16681,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16726,7 +16726,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16771,7 +16771,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16932,7 +16932,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -16977,7 +16977,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17022,7 +17022,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17067,7 +17067,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17112,7 +17112,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17157,7 +17157,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17202,7 +17202,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17247,7 +17247,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17350,7 +17350,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17395,7 +17395,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17440,7 +17440,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17485,7 +17485,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17530,7 +17530,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17575,7 +17575,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17620,7 +17620,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17665,7 +17665,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17826,7 +17826,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17871,7 +17871,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17916,7 +17916,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -17961,7 +17961,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18006,7 +18006,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18051,7 +18051,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18096,7 +18096,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18141,7 +18141,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18264,7 +18264,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18309,7 +18309,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18354,7 +18354,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18399,7 +18399,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18444,7 +18444,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18489,7 +18489,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18534,7 +18534,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18579,7 +18579,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18760,7 +18760,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18805,7 +18805,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18850,7 +18850,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18895,7 +18895,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18940,7 +18940,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -18985,7 +18985,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19030,7 +19030,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19075,7 +19075,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19256,7 +19256,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19301,7 +19301,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19346,7 +19346,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19391,7 +19391,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19436,7 +19436,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19481,7 +19481,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19526,7 +19526,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19571,7 +19571,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19752,7 +19752,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19797,7 +19797,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19842,7 +19842,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19887,7 +19887,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19932,7 +19932,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -19977,7 +19977,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -20022,7 +20022,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -20067,7 +20067,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -20253,7 +20253,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               zero
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20298,7 +20298,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               one
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20343,7 +20343,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               two
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20388,7 +20388,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               three
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20433,7 +20433,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               four
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20478,7 +20478,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               five
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20523,7 +20523,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               six
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20568,7 +20568,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
             >
               seven
               <span
-                class="_InternalVisuallyHidden_bkpn2_1"
+                class="prc-src-InternalVisuallyHidden-4enpf"
               >
                  (press backspace or delete to remove)
               </span>
@@ -20636,7 +20636,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             zero
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -20681,7 +20681,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             one
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -20726,7 +20726,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             two
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -20771,7 +20771,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             three
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -20816,7 +20816,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             four
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -20861,7 +20861,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             five
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -20906,7 +20906,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             six
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>
@@ -20951,7 +20951,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
           >
             seven
             <span
-              class="_InternalVisuallyHidden_bkpn2_1"
+              class="prc-src-InternalVisuallyHidden-4enpf"
             >
                (press backspace or delete to remove)
             </span>

From 671f04799978adcc5988389814bc66142c76fc55 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Mon, 7 Jul 2025 21:28:38 +0000
Subject: [PATCH 11/11] chore(VisuallyHidden): simplify Props interface and
 remove generic type

---
 packages/react/src/_VisuallyHidden.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index c8e6a2e4a05..1736a9f2221 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -3,18 +3,12 @@ import {clsx} from 'clsx'
 import {BoxWithFallback} from './internal/components/BoxWithFallback'
 import type {SxProp} from './sx'
 
-interface Props<As extends React.ElementType> {
+interface Props extends React.ComponentPropsWithoutRef<'span'> {
   isVisible?: boolean
-  as?: As
+  as?: React.ElementType
 }
 
-function VisuallyHidden<As extends React.ElementType>({
-  isVisible,
-  children,
-  as = 'span',
-  className,
-  ...rest
-}: Props & { as?: As } & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'span'> & SxProp) {
+function VisuallyHidden({isVisible, children, as = 'span', className, ...rest}: Props & SxProp) {
   return (
     <BoxWithFallback as={as} className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
       {children}