From ecd4cbdc982ac30715d465a4cf867bc3a103cabc Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Tue, 29 Oct 2024 17:13:10 +0000
Subject: [PATCH 1/4] Convert spinner component to CSS modules

Co-authored-by: Hussam Ghazzi <hussam-i-am@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Jon Rohan <yes@jonrohan.codes>
---
 .../react/src/Spinner/Spinner.dev.stories.tsx | 10 +++++++
 packages/react/src/Spinner/Spinner.module.css | 13 ++++++++++
 packages/react/src/Spinner/Spinner.tsx        | 26 ++++++++++++++++---
 3 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 packages/react/src/Spinner/Spinner.dev.stories.tsx
 create mode 100644 packages/react/src/Spinner/Spinner.module.css

diff --git a/packages/react/src/Spinner/Spinner.dev.stories.tsx b/packages/react/src/Spinner/Spinner.dev.stories.tsx
new file mode 100644
index 00000000000..4faf30a1d02
--- /dev/null
+++ b/packages/react/src/Spinner/Spinner.dev.stories.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import Spinner from './Spinner'
+
+export default {
+  title: 'Components/Spinner/Dev',
+  component: Spinner,
+} as Meta<typeof Spinner>
+
+export const Default = () => <Spinner sx={{border: '1px solid red'}} />
diff --git a/packages/react/src/Spinner/Spinner.module.css b/packages/react/src/Spinner/Spinner.module.css
new file mode 100644
index 00000000000..0de12278040
--- /dev/null
+++ b/packages/react/src/Spinner/Spinner.module.css
@@ -0,0 +1,13 @@
+.Box {
+  display: inline-flex;
+}
+
+@keyframes rotate-keyframes {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.SpinnerAnimation {
+  animation: rotate-keyframes 1s linear infinite;
+}
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index 63cd0d33304..6292234b6fe 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -3,8 +3,10 @@ import styled from 'styled-components'
 import sx, {type SxProp} from '../sx'
 import {VisuallyHidden} from '../VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
-import Box from '../Box'
 import {useId} from '../hooks'
+import {useFeatureFlag} from '../FeatureFlags'
+import classes from './Spinner.module.css'
+import Box from '../Box'
 
 const sizeMap = {
   small: '16px',
@@ -20,6 +22,7 @@ export type SpinnerProps = {
   /** @deprecated Use `srText` instead. */
   'aria-label'?: string
   className?: string
+  style?: React.CSSProperties
 } & HTMLDataAttributes &
   SxProp
 
@@ -28,6 +31,7 @@ function Spinner({
   srText = 'Loading',
   'aria-label': ariaLabel,
   className,
+  style,
   ...props
 }: SpinnerProps) {
   const size = sizeMap[sizeKey]
@@ -36,7 +40,7 @@ function Spinner({
 
   return (
     /* inline-flex removes the extra line height */
-    <Box as="span" sx={{display: 'inline-flex'}}>
+    <span className={classes.Box}>
       <svg
         height={size}
         width={size}
@@ -46,6 +50,7 @@ function Spinner({
         aria-label={ariaLabel ?? undefined}
         aria-labelledby={hasHiddenLabel ? labelId : undefined}
         className={className}
+        style={style}
         {...props}
       >
         <circle
@@ -66,11 +71,11 @@ function Spinner({
         />
       </svg>
       {hasHiddenLabel ? <VisuallyHidden id={labelId}>{srText}</VisuallyHidden> : null}
-    </Box>
+    </span>
   )
 }
 
-const StyledSpinner = styled(Spinner)`
+const StyledComponentSpinner = styled(Spinner)`
   @keyframes rotate-keyframes {
     100% {
       transform: rotate(360deg);
@@ -82,6 +87,19 @@ const StyledSpinner = styled(Spinner)`
   ${sx}
 `
 
+function StyledSpinner({sx, ...props}: SpinnerProps) {
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  if (enabled) {
+    if (sx) {
+      return <Box sx={sx} as={Spinner} className={classes.SpinnerAnimation} {...props} />
+    }
+
+    return <Spinner className={classes.SpinnerAnimation} {...props} />
+  }
+
+  return <StyledComponentSpinner sx={sx} {...props} />
+}
+
 StyledSpinner.displayName = 'Spinner'
 
 export default StyledSpinner

From 8b2ad29f27e5b51d276dee286ed25c75799674a9 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Tue, 29 Oct 2024 17:53:25 +0000
Subject: [PATCH 2/4] add changeset

---
 .changeset/hungry-avocados-remember.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hungry-avocados-remember.md

diff --git a/.changeset/hungry-avocados-remember.md b/.changeset/hungry-avocados-remember.md
new file mode 100644
index 00000000000..2285125d3cb
--- /dev/null
+++ b/.changeset/hungry-avocados-remember.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Migrated `Spinner` component to use support CSS modules

From 2c2befd977c53719b8c732ab49998dcae2c42ab6 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Tue, 29 Oct 2024 18:17:23 +0000
Subject: [PATCH 3/4] update snapshots

---
 .../__snapshots__/Autocomplete.test.tsx.snap  |   17 +-
 .../__snapshots__/TextInput.test.tsx.snap     |  294 ++---
 .../TextInputWithTokens.test.tsx.snap         | 1014 ++++++++---------
 3 files changed, 575 insertions(+), 750 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 9637ecc100e..c3dd83b8058 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -327,14 +327,7 @@ exports[`snapshots renders a loading state 1`] = `
   justify-content: center;
 }
 
-.c2 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c4:not(:focus):not(:active):not(:focus-within) {
+.c3:not(:focus):not(:active):not(:focus-within) {
   -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
@@ -344,7 +337,7 @@ exports[`snapshots renders a loading state 1`] = `
   width: 1px;
 }
 
-.c3 {
+.c2 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
 }
@@ -374,12 +367,12 @@ exports[`snapshots renders a loading state 1`] = `
       display="flex"
     >
       <span
-        className="c2"
+        className="Box"
       >
         <svg
           aria-hidden={true}
           aria-labelledby=":r2h:"
-          className="c3"
+          className="c2"
           fill="none"
           height="32px"
           viewBox="0 0 16 16"
@@ -403,7 +396,7 @@ exports[`snapshots renders a loading state 1`] = `
           />
         </svg>
         <span
-          className="c4"
+          className="c3"
           id=":r2h:"
         >
           Loading
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 2c8c4fe8878..2c67fb764da 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -4038,13 +4038,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c5 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -4212,11 +4205,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r2n:"
       >
         <span
-          className="c5"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c6"
+            className="c5"
             fill="none"
             height="16px"
             sx={
@@ -4257,25 +4250,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c3 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c7 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c6 {
+.c5 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4381,7 +4367,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c5 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4391,7 +4377,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -4423,11 +4409,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r2q:"
       >
         <span
-          className="c3"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c4"
+            className="c3"
             fill="none"
             height="16px"
             sx={
@@ -4460,14 +4446,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <input
       aria-describedby=":r2s:"
-      className="c5"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
       type="text"
     />
     <span
-      className="c6"
+      className="c5"
       id=":r2s:"
     >
       Loading
@@ -4481,11 +4467,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r2r:"
       >
         <span
-          className="c3"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c7"
+            className="c6"
             fill="none"
             height="16px"
             sx={
@@ -4526,13 +4512,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c5 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -4700,11 +4679,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r30:"
       >
         <span
-          className="c5"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c6"
+            className="c5"
             fill="none"
             height="16px"
             sx={
@@ -4744,24 +4723,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c3 {
   visibility: hidden;
 }
 
-.c8 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -4772,7 +4744,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4878,7 +4850,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4888,7 +4860,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c6:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -4945,11 +4917,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -4987,14 +4959,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <input
       aria-describedby=":r33: :r35:"
-      className="c6"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
       type="text"
     />
     <span
-      className="c7"
+      className="c6"
       id=":r35:"
     >
       Loading
@@ -5008,11 +4980,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r34:"
       >
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c8"
+            className="c7"
             fill="none"
             height="16px"
             sx={
@@ -5052,24 +5024,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c3 {
   visibility: hidden;
 }
 
-.c8 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5080,7 +5045,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5186,7 +5151,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5196,7 +5161,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c6:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -5253,11 +5218,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -5295,14 +5260,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <input
       aria-describedby=":r38: :r3a:"
-      className="c6"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
       type="text"
     />
     <span
-      className="c7"
+      className="c6"
       id=":r3a:"
     >
       Loading
@@ -5316,11 +5281,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r39:"
       >
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c8"
+            className="c7"
             fill="none"
             height="16px"
             sx={
@@ -5360,24 +5325,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c3 {
   visibility: visible;
 }
 
-.c8 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5388,7 +5346,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5494,7 +5452,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c6 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5504,7 +5462,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c6:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -5561,11 +5519,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -5603,14 +5561,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <input
       aria-describedby=":r3d: :r3f:"
-      className="c6"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
       type="text"
     />
     <span
-      className="c7"
+      className="c6"
       id=":r3f:"
     >
       Loading
@@ -5624,11 +5582,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r3e:"
       >
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c8"
+            className="c7"
             fill="none"
             height="16px"
             sx={
@@ -5668,18 +5626,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c5 {
   visibility: hidden;
 }
 
-.c7 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5877,11 +5828,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c6"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c7"
+            className="c6"
             fill="none"
             height="32px"
             sx={
@@ -5926,24 +5877,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c7 {
+.c6 {
   visibility: visible;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c8 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5954,7 +5898,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c6 {
+.c5 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6060,7 +6004,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c5 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6070,7 +6014,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -6102,11 +6046,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r3m:"
       >
         <span
-          className="c3"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c4"
+            className="c3"
             fill="none"
             height="16px"
             sx={
@@ -6139,14 +6083,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <input
       aria-describedby=":r3n: :r3o:"
-      className="c5"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
       type="text"
     />
     <span
-      className="c6"
+      className="c5"
       id=":r3o:"
     >
       Loading
@@ -6160,7 +6104,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r3n:"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <svg
             aria-hidden="true"
@@ -6185,11 +6129,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c3"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c8"
+            className="c7"
             fill="none"
             height="32px"
             sx={
@@ -6234,18 +6178,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c5 {
   visibility: hidden;
 }
 
-.c7 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6443,11 +6380,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c6"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c7"
+            className="c6"
             fill="none"
             height="32px"
             sx={
@@ -6492,22 +6429,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c3 {
   visibility: hidden;
 }
 
-.c8 {
+.c7 {
   visibility: visible;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6518,7 +6448,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6529,7 +6459,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6643,7 +6573,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c6 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6653,7 +6583,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c6:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -6711,11 +6641,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -6753,14 +6683,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <input
       aria-describedby=":r3v: :r40: :r41:"
-      className="c6"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
       type="text"
     />
     <span
-      className="c7"
+      className="c6"
       id=":r41:"
     >
       Loading
@@ -6774,7 +6704,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r40:"
       >
         <div
-          className="c8"
+          className="c7"
         >
           <svg
             aria-hidden="true"
@@ -6799,11 +6729,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c9"
+            className="c8"
             fill="none"
             height="32px"
             sx={
@@ -6848,22 +6778,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c3 {
   visibility: hidden;
 }
 
-.c8 {
+.c7 {
   visibility: visible;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6874,7 +6797,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6885,7 +6808,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6991,7 +6914,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c6 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7001,7 +6924,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c6:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -7058,11 +6981,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -7100,14 +7023,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <input
       aria-describedby=":r44: :r45: :r46:"
-      className="c6"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
       type="text"
     />
     <span
-      className="c7"
+      className="c6"
       id=":r46:"
     >
       Loading
@@ -7121,7 +7044,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r45:"
       >
         <div
-          className="c8"
+          className="c7"
         >
           <svg
             aria-hidden="true"
@@ -7146,11 +7069,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c9"
+            className="c8"
             fill="none"
             height="32px"
             sx={
@@ -7195,14 +7118,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c8 {
+.c7 {
   visibility: hidden;
 }
 
@@ -7210,7 +7126,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -7221,7 +7137,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -7232,7 +7148,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -7344,7 +7260,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c6 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7354,7 +7270,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c6:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -7412,11 +7328,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -7454,14 +7370,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <input
       aria-describedby=":r49: :r4a: :r4b:"
-      className="c6"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
       type="text"
     />
     <span
-      className="c7"
+      className="c6"
       id=":r4b:"
     >
       Loading
@@ -7475,7 +7391,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r4a:"
       >
         <div
-          className="c8"
+          className="c7"
         >
           <svg
             aria-hidden="true"
@@ -7500,11 +7416,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c9"
+            className="c8"
             fill="none"
             height="32px"
             sx={
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 0cad504a1be..14af2deae2f 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -6304,13 +6304,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c10 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -7010,11 +7003,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <span
-          className="c10"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c11"
+            className="c10"
             fill="none"
             height="16px"
             sx={
@@ -7046,7 +7039,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c5 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7066,7 +7059,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c4 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7074,7 +7067,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c5 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -7093,25 +7086,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c3 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c12 {
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c10 {
+.c9 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -7224,7 +7210,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7235,11 +7221,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -7272,13 +7258,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c7:hover {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
   box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -7318,16 +7304,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c11:hover,
-.c11:focus {
+.c10:hover,
+.c10:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c11:active {
+.c10:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -7352,11 +7338,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c8:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c8:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -7388,11 +7374,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <span
-          className="c3"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c4"
+            className="c3"
             fill="none"
             height="16px"
             sx={
@@ -7424,15 +7410,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c5"
+      className="c4"
       display="flex"
     >
       <div
-        className="c6"
+        className="c5"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c6"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -7440,7 +7426,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7449,19 +7435,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           zero
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7490,7 +7476,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7499,19 +7485,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           one
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7540,7 +7526,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7549,19 +7535,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           two
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7590,7 +7576,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7599,19 +7585,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           three
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7640,7 +7626,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7649,19 +7635,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           four
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7690,7 +7676,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7699,19 +7685,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           five
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7740,7 +7726,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7749,19 +7735,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           six
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7790,7 +7776,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7799,19 +7785,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           seven
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7848,11 +7834,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <span
-          className="c3"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c12"
+            className="c11"
             fill="none"
             height="16px"
             sx={
@@ -7931,13 +7917,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c10 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -8637,11 +8616,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <span
-          className="c10"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c11"
+            className="c10"
             fill="none"
             height="16px"
             sx={
@@ -8673,7 +8652,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c6 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8693,7 +8672,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c6 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -8701,7 +8680,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -8719,24 +8698,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c3 {
   visibility: hidden;
 }
 
-.c13 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -8747,7 +8719,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -8860,7 +8832,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c8 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -8871,11 +8843,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c8:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -8908,13 +8880,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9:hover {
+.c8:hover {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
   box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -8954,16 +8926,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c12:hover,
-.c12:focus {
+.c11:hover,
+.c11:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c12:active {
+.c11:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -8988,11 +8960,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c10:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c10:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -9049,11 +9021,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -9090,15 +9062,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c6"
+      className="c5"
       display="flex"
     >
       <div
-        className="c7"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c8"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -9106,7 +9078,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9115,19 +9087,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           zero
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9156,7 +9128,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9165,19 +9137,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           one
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9206,7 +9178,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9215,19 +9187,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           two
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9256,7 +9228,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9265,19 +9237,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           three
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9306,7 +9278,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9315,19 +9287,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           four
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9356,7 +9328,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9365,19 +9337,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           five
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9406,7 +9378,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9415,19 +9387,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           six
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9456,7 +9428,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9465,19 +9437,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           seven
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9514,11 +9486,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c13"
+            className="c12"
             fill="none"
             height="16px"
             sx={
@@ -9550,7 +9522,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c6 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9570,7 +9542,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c6 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -9578,7 +9550,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -9596,24 +9568,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c3 {
   visibility: hidden;
 }
 
-.c13 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -9624,7 +9589,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -9737,7 +9702,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c8 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -9748,11 +9713,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c8:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -9785,13 +9750,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9:hover {
+.c8:hover {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
   box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -9831,16 +9796,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c12:hover,
-.c12:focus {
+.c11:hover,
+.c11:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c12:active {
+.c11:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -9865,11 +9830,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c10:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c10:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -9926,11 +9891,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -9967,15 +9932,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c6"
+      className="c5"
       display="flex"
     >
       <div
-        className="c7"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c8"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -9983,7 +9948,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9992,19 +9957,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           zero
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10033,7 +9998,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10042,19 +10007,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           one
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10083,7 +10048,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10092,19 +10057,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           two
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10133,7 +10098,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10142,19 +10107,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           three
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10183,7 +10148,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10192,19 +10157,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           four
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10233,7 +10198,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10242,19 +10207,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           five
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10283,7 +10248,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10292,19 +10257,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           six
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10333,7 +10298,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10342,19 +10307,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           seven
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10391,11 +10356,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c13"
+            className="c12"
             fill="none"
             height="16px"
             sx={
@@ -10427,7 +10392,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c6 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10447,7 +10412,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c6 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -10455,7 +10420,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -10473,24 +10438,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c3 {
   visibility: visible;
 }
 
-.c13 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -10501,7 +10459,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -10614,7 +10572,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -10625,11 +10583,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c8:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -10662,13 +10620,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9:hover {
+.c8:hover {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
   box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -10708,16 +10666,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c12:hover,
-.c12:focus {
+.c11:hover,
+.c11:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c12:active {
+.c11:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -10742,11 +10700,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c10:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c10:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -10803,11 +10761,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -10844,15 +10802,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c6"
+      className="c5"
       display="flex"
     >
       <div
-        className="c7"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c8"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -10860,7 +10818,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10869,19 +10827,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           zero
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10910,7 +10868,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10919,19 +10877,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           one
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10960,7 +10918,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10969,19 +10927,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           two
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11010,7 +10968,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11019,19 +10977,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           three
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11060,7 +11018,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11069,19 +11027,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           four
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11110,7 +11068,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11119,19 +11077,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           five
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11160,7 +11118,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11169,19 +11127,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           six
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11210,7 +11168,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11219,19 +11177,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           seven
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11268,11 +11226,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c13"
+            className="c12"
             fill="none"
             height="16px"
             sx={
@@ -11350,18 +11308,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c11 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c10 {
   visibility: hidden;
 }
 
-.c12 {
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -12091,11 +12042,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c11"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c12"
+            className="c11"
             fill="none"
             height="32px"
             sx={
@@ -12132,7 +12083,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c5 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12152,7 +12103,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c4 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -12160,7 +12111,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c5 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -12178,24 +12129,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c12 {
+.c11 {
   visibility: visible;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c13 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -12206,7 +12150,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c10 {
+.c9 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -12319,7 +12263,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -12330,11 +12274,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -12367,13 +12311,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c7:hover {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
   box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -12413,16 +12357,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c11:hover,
-.c11:focus {
+.c10:hover,
+.c10:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c11:active {
+.c10:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -12447,11 +12391,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c8:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c8:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -12483,11 +12427,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <span
-          className="c3"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c4"
+            className="c3"
             fill="none"
             height="16px"
             sx={
@@ -12519,15 +12463,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c5"
+      className="c4"
       display="flex"
     >
       <div
-        className="c6"
+        className="c5"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c6"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -12535,7 +12479,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12544,19 +12488,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           zero
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12585,7 +12529,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12594,19 +12538,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           one
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12635,7 +12579,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12644,19 +12588,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           two
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12685,7 +12629,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12694,19 +12638,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           three
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12735,7 +12679,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12744,19 +12688,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           four
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12785,7 +12729,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12794,19 +12738,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           five
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12835,7 +12779,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12844,19 +12788,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           six
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12885,7 +12829,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12894,19 +12838,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           seven
           <span
-            className="c10"
+            className="c9"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12943,7 +12887,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c12"
+          className="c11"
         >
           <svg
             aria-hidden="true"
@@ -12968,11 +12912,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c3"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c13"
+            className="c12"
             fill="none"
             height="32px"
             sx={
@@ -13055,18 +12999,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c11 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c10 {
   visibility: hidden;
 }
 
-.c12 {
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -13796,11 +13733,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c11"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c12"
+            className="c11"
             fill="none"
             height="32px"
             sx={
@@ -13837,7 +13774,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c6 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13857,7 +13794,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c6 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -13865,7 +13802,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -13883,22 +13820,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c3 {
   visibility: hidden;
 }
 
-.c13 {
+.c12 {
   visibility: visible;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -13909,7 +13839,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c14 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -13920,7 +13850,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -14040,7 +13970,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -14051,11 +13981,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c8:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -14086,13 +14016,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9:hover {
+.c8:hover {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
   box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -14132,16 +14062,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 16px;
 }
 
-.c12:hover,
-.c12:focus {
+.c11:hover,
+.c11:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c12:active {
+.c11:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -14166,11 +14096,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c10:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c10:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -14227,11 +14157,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -14268,15 +14198,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c6"
+      className="c5"
       display="flex"
     >
       <div
-        className="c7"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c8"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -14284,7 +14214,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14293,19 +14223,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           zero
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14334,7 +14264,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14343,19 +14273,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           one
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14384,7 +14314,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14393,19 +14323,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           two
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14434,7 +14364,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14443,19 +14373,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           three
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14484,7 +14414,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14493,19 +14423,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           four
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14534,7 +14464,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14543,19 +14473,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           five
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14584,7 +14514,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14593,19 +14523,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           six
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14634,7 +14564,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14643,19 +14573,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           seven
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14692,7 +14622,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c13"
+          className="c12"
         >
           <svg
             aria-hidden="true"
@@ -14717,11 +14647,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c14"
+            className="c13"
             fill="none"
             height="32px"
             sx={
@@ -14758,7 +14688,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c6 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14778,7 +14708,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c6 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -14786,7 +14716,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -14804,22 +14734,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
 .c3 {
   visibility: hidden;
 }
 
-.c13 {
+.c12 {
   visibility: visible;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -14830,7 +14753,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c14 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -14841,7 +14764,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -14954,7 +14877,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -14965,11 +14888,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c8:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -15002,13 +14925,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9:hover {
+.c8:hover {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
   box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -15048,16 +14971,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c12:hover,
-.c12:focus {
+.c11:hover,
+.c11:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c12:active {
+.c11:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -15082,11 +15005,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c10:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c10:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -15143,11 +15066,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -15184,15 +15107,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c6"
+      className="c5"
       display="flex"
     >
       <div
-        className="c7"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c8"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -15200,7 +15123,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15209,19 +15132,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           zero
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15250,7 +15173,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15259,19 +15182,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           one
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15300,7 +15223,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15309,19 +15232,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           two
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15350,7 +15273,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15359,19 +15282,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           three
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15400,7 +15323,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15409,19 +15332,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           four
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15450,7 +15373,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15459,19 +15382,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           five
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15500,7 +15423,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15509,19 +15432,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           six
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15550,7 +15473,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15559,19 +15482,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           seven
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15608,7 +15531,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c13"
+          className="c12"
         >
           <svg
             aria-hidden="true"
@@ -15633,11 +15556,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c14"
+            className="c13"
             fill="none"
             height="32px"
             sx={
@@ -15674,7 +15597,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c6 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15694,7 +15617,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c6 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -15702,7 +15625,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -15720,14 +15643,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c13 {
+.c12 {
   visibility: hidden;
 }
 
@@ -15735,7 +15651,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -15746,7 +15662,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c14 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -15757,7 +15673,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -15870,7 +15786,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -15881,11 +15797,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c8:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -15916,13 +15832,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9:hover {
+.c8:hover {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
   box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -15962,16 +15878,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 24px;
 }
 
-.c12:hover,
-.c12:focus {
+.c11:hover,
+.c11:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c12:active {
+.c11:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -15996,11 +15912,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c10:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c10:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -16057,11 +15973,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c4"
             fill="none"
             height="32px"
             sx={
@@ -16098,15 +16014,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c6"
+      className="c5"
       display="flex"
     >
       <div
-        className="c7"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c8"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -16114,7 +16030,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16123,19 +16039,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           zero
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16164,7 +16080,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16173,19 +16089,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           one
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16214,7 +16130,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16223,19 +16139,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           two
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16264,7 +16180,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16273,19 +16189,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           three
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16314,7 +16230,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16323,19 +16239,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           four
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16364,7 +16280,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16373,19 +16289,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           five
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16414,7 +16330,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16423,19 +16339,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           six
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16464,7 +16380,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16473,19 +16389,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           seven
           <span
-            className="c11"
+            className="c10"
           >
              (press backspace or delete to remove)
           </span>
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16522,7 +16438,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c13"
+          className="c12"
         >
           <svg
             aria-hidden="true"
@@ -16547,11 +16463,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c4"
+          className="Box"
         >
           <svg
             aria-hidden={true}
-            className="c14"
+            className="c13"
             fill="none"
             height="32px"
             sx={

From 2824783dfadee3bd9bd367ab93a9b12061c0431d Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Tue, 29 Oct 2024 13:28:48 -0500
Subject: [PATCH 4/4] patch -> minor

---
 .changeset/hungry-avocados-remember.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/hungry-avocados-remember.md b/.changeset/hungry-avocados-remember.md
index 2285125d3cb..ffe0993061d 100644
--- a/.changeset/hungry-avocados-remember.md
+++ b/.changeset/hungry-avocados-remember.md
@@ -1,5 +1,5 @@
 ---
-'@primer/react': patch
+'@primer/react': minor
 ---
 
 Migrated `Spinner` component to use support CSS modules