diff --git a/.changeset/dry-fans-sort.md b/.changeset/dry-fans-sort.md
new file mode 100644
index 00000000000..9e09682fb2a
--- /dev/null
+++ b/.changeset/dry-fans-sort.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Adds a prop, `srText`, to the Spinner component to convey a loading message to assistive technologies such as screen readers.
+
+<!-- Changed components: Spinner -->
diff --git a/packages/react/src/Spinner/Spinner.docs.json b/packages/react/src/Spinner/Spinner.docs.json
index 0137c6f4faa..7d7bd6d014a 100644
--- a/packages/react/src/Spinner/Spinner.docs.json
+++ b/packages/react/src/Spinner/Spinner.docs.json
@@ -10,6 +10,26 @@
       "name": "size",
       "type": "'small' | 'medium' | 'large'",
       "description": "Sets the width and height of the spinner."
+    },
+    {
+      "name": "srText",
+      "type": "string | null",
+      "defaultValue": "Loading",
+      "description": "Sets the text conveyed by assistive technologies such as screen readers. Set to `null` if the loading state is displayed in a text node somewhere else on the page."
+    },
+    {
+      "name": "aria-label",
+      "type": "string | null",
+      "description": "Sets the text conveyed by assistive technologies such as screen readers.",
+      "deprecated": true
+    },
+    {
+      "name": "data-*",
+      "type": "string"
+    },
+    {
+      "name": "sx",
+      "type": "SystemStyleObject"
     }
   ],
   "subcomponents": []
diff --git a/packages/react/src/Spinner/Spinner.examples.stories.tsx b/packages/react/src/Spinner/Spinner.examples.stories.tsx
new file mode 100644
index 00000000000..ed0c578942a
--- /dev/null
+++ b/packages/react/src/Spinner/Spinner.examples.stories.tsx
@@ -0,0 +1,96 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import Spinner from './Spinner'
+import {Box, Button} from '..'
+import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {Status} from '../internal/components/Status'
+
+export default {
+  title: 'Components/Spinner/Examples',
+  component: Spinner,
+} as Meta<typeof Spinner>
+
+type LoadingState = 'initial' | 'loading' | 'done'
+
+async function wait(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+// There should be an announcement when loading is completed or if there was an error loading
+export const FullLifecycle = () => {
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [loadedContent, setLoadedContent] = React.useState('')
+  let state: LoadingState = 'initial'
+
+  if (isLoading) {
+    state = 'loading'
+  } else if (loadedContent) {
+    state = 'done'
+  }
+
+  const initiateLoading = async () => {
+    if (state === 'done') {
+      return
+    }
+
+    setIsLoading(true)
+    await wait(1000)
+    setLoadedContent('Some content that had to be loaded.')
+    setIsLoading(false)
+  }
+
+  return (
+    <>
+      <Button onClick={initiateLoading} sx={{mb: '1em'}}>
+        Load content
+      </Button>
+      {state === 'loading' && <Spinner />}
+      <p>{loadedContent}</p>
+      <VisuallyHidden>
+        <Status>{state === 'done' && 'Content finished loading'}</Status>
+      </VisuallyHidden>
+    </>
+  )
+}
+
+// We should avoid duplicate loading announcements
+export const FullLifecycleVisibleLoadingText = () => {
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [loadedContent, setLoadedContent] = React.useState('')
+  let state: LoadingState = 'initial'
+
+  if (isLoading) {
+    state = 'loading'
+  } else if (loadedContent) {
+    state = 'done'
+  }
+
+  const initiateLoading = async () => {
+    if (state === 'done') {
+      return
+    }
+
+    setIsLoading(true)
+    await wait(1000)
+    setLoadedContent('Some content that had to be loaded.')
+    setIsLoading(false)
+  }
+
+  return (
+    <Box sx={{display: 'flex', alignItems: 'flex-start', flexDirection: 'column', gap: '0.5em'}}>
+      <Button onClick={initiateLoading} sx={{mb: '1em'}}>
+        Load content
+      </Button>
+      {state !== 'done' && (
+        <Box sx={{alignItems: 'center', display: 'flex', gap: '0.25rem'}}>
+          {state === 'loading' && <Spinner size="small" srText={null} />}
+          <Status>{state === 'loading' ? 'Content is loading...' : ''}</Status>
+        </Box>
+      )}
+      <p>{loadedContent}</p>
+      <VisuallyHidden>
+        <Status>{state === 'done' && 'Content finished loading'}</Status>
+      </VisuallyHidden>
+    </Box>
+  )
+}
diff --git a/packages/react/src/Spinner/Spinner.features.stories.tsx b/packages/react/src/Spinner/Spinner.features.stories.tsx
index 50f722a4035..9e4ffa46a57 100644
--- a/packages/react/src/Spinner/Spinner.features.stories.tsx
+++ b/packages/react/src/Spinner/Spinner.features.stories.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import type {Meta} from '@storybook/react'
 import Spinner from './Spinner'
+import {Box} from '..'
+import {Status} from '../internal/components/Status'
 
 export default {
   title: 'Components/Spinner/Features',
@@ -10,3 +12,10 @@ export default {
 export const Small = () => <Spinner size="small" />
 
 export const Large = () => <Spinner size="large" />
+
+export const SuppressScreenReaderText = () => (
+  <Box sx={{alignItems: 'center', display: 'flex', gap: '0.25rem'}}>
+    <Spinner size="small" srText={null} />
+    <Status>Loading...</Status>
+  </Box>
+)
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index 52fe378508f..5cb003acebc 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -1,8 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
-import type {SxProp} from '../sx'
-import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
+import sx, {type SxProp} from '../sx'
+import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import type {HTMLDataAttributes} from '../internal/internal-types'
+import Box from '../Box'
+import {useId} from '../hooks'
 
 const sizeMap = {
   small: '16px',
@@ -10,37 +12,56 @@ const sizeMap = {
   large: '64px',
 }
 
-export interface SpinnerInternalProps {
+export type SpinnerProps = {
   /** Sets the width and height of the spinner. */
   size?: keyof typeof sizeMap
-}
+  /** Sets the text conveyed by assistive technologies such as screen readers. Set to `null` if the loading state is displayed in a text node somewhere else on the page. */
+  srText?: string | null
+  /** @deprecated Use `srText` instead. */
+  'aria-label'?: string | null
+} & HTMLDataAttributes &
+  SxProp
 
-function Spinner({size: sizeKey = 'medium', ...props}: SpinnerInternalProps) {
+function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ariaLabel, ...props}: SpinnerProps) {
   const size = sizeMap[sizeKey]
+  const hasSrAnnouncement = Boolean(srText || ariaLabel)
+  const ariaLabelId = useId()
 
   return (
-    <svg height={size} width={size} viewBox="0 0 16 16" fill="none" {...props}>
-      <circle
-        cx="8"
-        cy="8"
-        r="7"
-        stroke="currentColor"
-        strokeOpacity="0.25"
-        strokeWidth="2"
-        vectorEffect="non-scaling-stroke"
-      />
-      <path
-        d="M15 8a7.002 7.002 0 00-7-7"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        vectorEffect="non-scaling-stroke"
-      />
-    </svg>
+    /* inline-flex removes the extra line height */
+    <Box sx={{display: 'inline-flex'}}>
+      <svg
+        height={size}
+        width={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        aria-hidden
+        aria-labelledby={ariaLabelId}
+        {...props}
+      >
+        <circle
+          cx="8"
+          cy="8"
+          r="7"
+          stroke="currentColor"
+          strokeOpacity="0.25"
+          strokeWidth="2"
+          vectorEffect="non-scaling-stroke"
+        />
+        <path
+          d="M15 8a7.002 7.002 0 00-7-7"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+      {hasSrAnnouncement ? <VisuallyHidden id={ariaLabelId}>{srText || ariaLabel}</VisuallyHidden> : null}
+    </Box>
   )
 }
 
-const StyledSpinner = styled(Spinner)<SxProp>`
+const StyledSpinner = styled(Spinner)`
   @keyframes rotate-keyframes {
     100% {
       transform: rotate(360deg);
@@ -54,5 +75,4 @@ const StyledSpinner = styled(Spinner)<SxProp>`
 
 StyledSpinner.displayName = 'Spinner'
 
-export type SpinnerProps = ComponentProps<typeof StyledSpinner>
 export default StyledSpinner
diff --git a/packages/react/src/__tests__/Spinner.test.tsx b/packages/react/src/__tests__/Spinner.test.tsx
index 8284b670ee1..47151e13b4d 100644
--- a/packages/react/src/__tests__/Spinner.test.tsx
+++ b/packages/react/src/__tests__/Spinner.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
+import axe from 'axe-core'
 import type {SpinnerProps} from '..'
 import {Spinner} from '..'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
 
 describe('Spinner', () => {
   behavesAsComponent({
@@ -14,6 +14,24 @@ describe('Spinner', () => {
     default: Spinner,
   })
 
+  it('should label the spinner with default loading text', async () => {
+    const {getByLabelText} = HTMLRender(<Spinner />)
+
+    expect(getByLabelText('Loading')).toBeInTheDocument()
+  })
+
+  it('should label the spinner with with custom loading text', async () => {
+    const {getByLabelText} = HTMLRender(<Spinner srText="Custom loading text" />)
+
+    expect(getByLabelText('Custom loading text')).toBeInTheDocument()
+  })
+
+  it('should not label the spinner with with loading text when `srText` is set to `null`', async () => {
+    const {getByLabelText} = HTMLRender(<Spinner srText={null} />)
+
+    expect(() => getByLabelText('Loading')).toThrow()
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Spinner />)
     const results = await axe.run(container)
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 0a6cc2ab235..be8b5ad1be1 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -327,6 +327,13 @@ 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;
+}
+
 .c0 {
   position: absolute;
   width: 1px;
@@ -340,7 +347,17 @@ exports[`snapshots renders a loading state 1`] = `
   border-width: 0;
 }
 
-.c2 {
+.c4:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
 }
@@ -356,30 +373,42 @@ exports[`snapshots renders a loading state 1`] = `
       className="c1"
       display="flex"
     >
-      <svg
+      <div
         className="c2"
-        fill="none"
-        height="32px"
-        viewBox="0 0 16 16"
-        width="32px"
       >
-        <circle
-          cx="8"
-          cy="8"
-          r="7"
-          stroke="currentColor"
-          strokeOpacity="0.25"
-          strokeWidth="2"
-          vectorEffect="non-scaling-stroke"
-        />
-        <path
-          d="M15 8a7.002 7.002 0 00-7-7"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeWidth="2"
-          vectorEffect="non-scaling-stroke"
-        />
-      </svg>
+        <svg
+          aria-hidden={true}
+          aria-labelledby=":r1v:"
+          className="c3"
+          fill="none"
+          height="32px"
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+        <div
+          className="c4"
+          id=":r1v:"
+        >
+          Loading
+        </div>
+      </div>
     </div>
   </span>,
 ]
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index f3e4be334ce..950abfd0af7 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -3932,6 +3932,23 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -4077,35 +4094,47 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c3"
         display="flex"
       >
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rn:"
+            className="c5"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rn:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -4118,12 +4147,29 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c5:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c5 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -4222,7 +4268,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c4 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4232,7 +4278,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c6:focus {
   outline: 0;
 }
 
@@ -4262,39 +4308,51 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
+        <div
           className="c3"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":ro:"
+            className="c4"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c5"
+            id=":ro:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <input
-      className="c4"
+      className="c6"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4307,35 +4365,47 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
-          className="c5"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "hidden",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
+        <div
+          className="c3"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rp:"
+            className="c7"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "hidden",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c5"
+            id=":rp:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -4348,6 +4418,23 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -4493,35 +4580,47 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c3"
         display="flex"
       >
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rq:"
+            className="c5"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rq:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -4533,17 +4632,34 @@ 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;
 }
 
-.c6 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c4 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -4647,7 +4763,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c5 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4657,7 +4773,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c7:focus {
   outline: 0;
 }
 
@@ -4712,44 +4828,56 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rr:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rr:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <input
-      className="c5"
+      className="c7"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4762,35 +4890,47 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
-          className="c6"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "hidden",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
+        <div
+          className="c4"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rs:"
+            className="c8"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "hidden",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rs:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -4802,17 +4942,34 @@ 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;
 }
 
-.c6 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c4 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -4916,7 +5073,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c5 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4926,7 +5083,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c7:focus {
   outline: 0;
 }
 
@@ -4981,44 +5138,56 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rt:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rt:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <input
-      className="c5"
+      className="c7"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5031,35 +5200,47 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
-          className="c6"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "hidden",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
+        <div
+          className="c4"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":ru:"
+            className="c8"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "hidden",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":ru:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -5071,17 +5252,34 @@ 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;
 }
 
-.c6 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c4 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5185,7 +5383,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c5 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5195,7 +5393,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c7:focus {
   outline: 0;
 }
 
@@ -5250,44 +5448,56 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "hidden",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rv:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "hidden",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rv:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <input
-      className="c5"
+      className="c7"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5300,35 +5510,47 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
-          className="c6"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
+        <div
+          className="c4"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r10:"
+            className="c8"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":r10:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -5340,11 +5562,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
+.c5 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c4 {
   visibility: hidden;
 }
 
-.c5 {
+.c7:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5520,40 +5759,52 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c5"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r11:"
+            className="c6"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c7"
+            id=":r11:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -5565,17 +5816,34 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c5 {
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
   visibility: visible;
 }
 
-.c3 {
+.c5:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c6 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5679,7 +5947,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c4 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5689,7 +5957,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c6:focus {
   outline: 0;
 }
 
@@ -5719,39 +5987,51 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
+        <div
           className="c3"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r12:"
+            className="c4"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c5"
+            id=":r12:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <input
-      className="c4"
+      className="c6"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5765,7 +6045,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c5"
+          className="c7"
         >
           <svg
             aria-hidden="true"
@@ -5789,40 +6069,52 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
-          className="c6"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "hidden",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
+        <div
+          className="c3"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r13:"
+            className="c8"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "hidden",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c5"
+            id=":r13:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -5834,11 +6126,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
+.c5 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c4 {
   visibility: hidden;
 }
 
-.c5 {
+.c7:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6014,40 +6323,52 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c5"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r14:"
+            className="c6"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c7"
+            id=":r14:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -6059,15 +6380,32 @@ 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;
 }
 
-.c6 {
+.c8 {
   visibility: visible;
 }
 
-.c4 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6078,7 +6416,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c7 {
+.c9 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6190,7 +6528,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c5 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6200,7 +6538,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c7:focus {
   outline: 0;
 }
 
@@ -6256,44 +6594,56 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r15:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":r15:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <input
-      className="c5"
+      className="c7"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6307,7 +6657,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c6"
+          className="c8"
         >
           <svg
             aria-hidden="true"
@@ -6331,40 +6681,52 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
-          className="c7"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "hidden",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
+        <div
+          className="c4"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r16:"
+            className="c9"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "hidden",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":r16:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -6376,15 +6738,32 @@ 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;
 }
 
-.c6 {
+.c8 {
   visibility: visible;
 }
 
-.c4 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6395,7 +6774,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c7 {
+.c9 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6499,7 +6878,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c5 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6509,7 +6888,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c7:focus {
   outline: 0;
 }
 
@@ -6564,44 +6943,56 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r17:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":r17:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <input
-      className="c5"
+      className="c7"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6615,7 +7006,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c6"
+          className="c8"
         >
           <svg
             aria-hidden="true"
@@ -6639,40 +7030,52 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
-          className="c7"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "hidden",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
+        <div
+          className="c4"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r18:"
+            className="c9"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "hidden",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":r18:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -6684,7 +7087,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c6 {
+.c4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c8 {
   visibility: hidden;
 }
 
@@ -6692,7 +7102,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.c4 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6703,7 +7123,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c7 {
+.c9 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6813,7 +7233,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c5 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6823,7 +7243,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c7:focus {
   outline: 0;
 }
 
@@ -6879,44 +7299,56 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "hidden",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r19:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "hidden",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":r19:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <input
-      className="c5"
+      className="c7"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6930,7 +7362,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c6"
+          className="c8"
         >
           <svg
             aria-hidden="true"
@@ -6954,40 +7386,52 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
-          className="c7"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "visible",
-            }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
+        <div
+          className="c4"
         >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r1a:"
+            className="c9"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "visible",
+              }
+            }
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":r1a:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index ff996c61206..21b8a0695d4 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -6270,6 +6270,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
+.c10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c7 {
   position: absolute;
   width: 1px;
@@ -6283,7 +6290,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c10 {
+.c12:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -6969,39 +6986,51 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c9"
         display="flex"
       >
-        <svg
+        <div
           className="c10"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "visible",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":re:"
+            className="c11"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c12"
+            id=":re:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
-  .c4 {
+  .c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7021,7 +7050,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c4 > * {
+.c6 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7029,7 +7058,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c5 {
+.c7 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -7047,7 +7076,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c9 {
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c11 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -7060,13 +7096,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c3 {
+.c5:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c11 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -7172,7 +7218,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c8 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7183,11 +7229,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c6:focus {
+.c8:focus {
   outline: 0;
 }
 
-.c7 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -7220,13 +7266,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7:hover {
+.c9: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));
 }
 
-.c10 {
+.c12 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -7266,16 +7312,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c10:hover,
-.c10:focus {
+.c12:hover,
+.c12:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c10:active {
+.c12:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c8 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -7300,11 +7346,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c8:is(a,button,[tabIndex='0']) {
+.c10:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c8:is(a,button,[tabIndex='0']):after {
+.c10:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -7335,47 +7381,59 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
+        <div
           className="c3"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "visible",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rf:"
+            className="c4"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c5"
+            id=":rf:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <div
-      className="c4"
+      className="c6"
       display="flex"
     >
       <div
-        className="c5"
+        className="c7"
       >
         <input
           aria-invalid="false"
-          className="c6"
+          className="c8"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -7383,7 +7441,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7392,19 +7450,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7433,7 +7491,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7442,19 +7500,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7483,7 +7541,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7492,19 +7550,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7533,7 +7591,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7542,19 +7600,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7583,7 +7641,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7592,19 +7650,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7633,7 +7691,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7642,19 +7700,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7683,7 +7741,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7692,19 +7750,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7733,7 +7791,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7742,19 +7800,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7790,35 +7848,47 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
-          className="c11"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "hidden",
+        <div
+          className="c3"
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rg:"
+            className="c13"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "hidden",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c5"
+            id=":rg:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -7868,6 +7938,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
+.c10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c7 {
   position: absolute;
   width: 1px;
@@ -7881,7 +7958,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c10 {
+.c12:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -8567,39 +8654,51 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c9"
         display="flex"
       >
-        <svg
+        <div
           className="c10"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "visible",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rh:"
+            className="c11"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c12"
+            id=":rh:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
-  .c5 {
+  .c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8619,7 +8718,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c7 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -8627,7 +8726,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c8 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -8645,11 +8744,18 @@ 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;
 }
 
-.c10 {
+.c12 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -8662,13 +8768,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c12 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c14 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c4 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -8779,7 +8895,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c7 {
+.c9 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -8790,11 +8906,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c9:focus {
   outline: 0;
 }
 
-.c8 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -8827,13 +8943,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c10: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 {
+.c13 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -8873,16 +8989,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c11:hover,
-.c11:focus {
+.c13:hover,
+.c13:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c11:active {
+.c13:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c9 {
+.c11 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -8907,11 +9023,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c11:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c11:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -8967,52 +9083,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "visible",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":ri:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":ri:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <div
-      className="c5"
+      className="c7"
       display="flex"
     >
       <div
-        className="c6"
+        className="c8"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c9"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -9020,7 +9148,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9029,19 +9157,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9070,7 +9198,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9079,19 +9207,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9120,7 +9248,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9129,19 +9257,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9170,7 +9298,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9179,19 +9307,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9220,7 +9348,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9229,19 +9357,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9270,7 +9398,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9279,19 +9407,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9320,7 +9448,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9329,19 +9457,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9370,7 +9498,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9379,19 +9507,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9427,39 +9555,51 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
-          className="c12"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "hidden",
+        <div
+          className="c4"
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rj:"
+            className="c14"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "hidden",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rj:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
-  .c5 {
+  .c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9479,7 +9619,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c7 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -9487,7 +9627,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c8 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -9505,11 +9645,18 @@ 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;
 }
 
-.c10 {
+.c12 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -9522,13 +9669,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c12 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c14 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c4 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -9639,7 +9796,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c7 {
+.c9 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -9650,11 +9807,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c9:focus {
   outline: 0;
 }
 
-.c8 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -9687,13 +9844,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c10: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 {
+.c13 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -9733,16 +9890,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c11:hover,
-.c11:focus {
+.c13:hover,
+.c13:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c11:active {
+.c13:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c9 {
+.c11 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -9767,11 +9924,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c11:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c11:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -9827,52 +9984,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "visible",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rk:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rk:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <div
-      className="c5"
+      className="c7"
       display="flex"
     >
       <div
-        className="c6"
+        className="c8"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c9"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -9880,7 +10049,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9889,19 +10058,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9930,7 +10099,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9939,19 +10108,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9980,7 +10149,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9989,19 +10158,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10030,7 +10199,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10039,19 +10208,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10080,7 +10249,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10089,19 +10258,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10130,7 +10299,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10139,19 +10308,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10180,7 +10349,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10189,19 +10358,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10230,7 +10399,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10239,19 +10408,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10287,39 +10456,51 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
-          className="c12"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "hidden",
+        <div
+          className="c4"
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rl:"
+            className="c14"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "hidden",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rl:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
-  .c5 {
+  .c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10339,7 +10520,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c7 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -10347,7 +10528,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c8 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -10365,11 +10546,18 @@ 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;
 }
 
-.c10 {
+.c12 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -10382,13 +10570,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c12 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c14 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c4 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -10499,7 +10697,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7 {
+.c9 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -10510,11 +10708,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c9:focus {
   outline: 0;
 }
 
-.c8 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -10547,13 +10745,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c10: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 {
+.c13 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -10593,16 +10791,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c11:hover,
-.c11:focus {
+.c13:hover,
+.c13:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c11:active {
+.c13:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c9 {
+.c11 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -10627,11 +10825,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c11:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c11:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -10687,52 +10885,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "hidden",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rm:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "hidden",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rm:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <div
-      className="c5"
+      className="c7"
       display="flex"
     >
       <div
-        className="c6"
+        className="c8"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c9"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -10740,7 +10950,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10749,19 +10959,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10790,7 +11000,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10799,19 +11009,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10840,7 +11050,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10849,19 +11059,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10890,7 +11100,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10899,19 +11109,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10940,7 +11150,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10949,19 +11159,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10990,7 +11200,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10999,19 +11209,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11040,7 +11250,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11049,19 +11259,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11090,7 +11300,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11099,19 +11309,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11147,35 +11357,47 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
-          className="c12"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "visible",
+        <div
+          className="c4"
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rn:"
+            className="c14"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rn:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -11225,6 +11447,13 @@ 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;
 }
@@ -11242,7 +11471,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c11 {
+.c13:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -11958,44 +12197,56 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c11"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "visible",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":ro:"
+            className="c12"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c13"
+            id=":ro:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
-  .c4 {
+  .c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12015,7 +12266,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c4 > * {
+.c6 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -12023,7 +12274,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c5 {
+.c7 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -12041,11 +12292,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c11 {
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c13 {
   visibility: visible;
 }
 
-.c9 {
+.c11 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -12058,13 +12316,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c3 {
+.c5:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c12 {
+.c14 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -12175,7 +12443,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c6 {
+.c8 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -12186,11 +12454,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c6:focus {
+.c8:focus {
   outline: 0;
 }
 
-.c7 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -12223,13 +12491,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7:hover {
+.c9: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));
 }
 
-.c10 {
+.c12 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -12269,16 +12537,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c10:hover,
-.c10:focus {
+.c12:hover,
+.c12:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c10:active {
+.c12:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c8 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -12303,11 +12571,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c8:is(a,button,[tabIndex='0']) {
+.c10:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c8:is(a,button,[tabIndex='0']):after {
+.c10:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -12338,47 +12606,59 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <svg
+        <div
           className="c3"
-          fill="none"
-          height="16px"
-          sx={
-            {
-              "visibility": "visible",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rp:"
+            className="c4"
+            fill="none"
+            height="16px"
+            sx={
+              {
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="16px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="16px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c5"
+            id=":rp:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <div
-      className="c4"
+      className="c6"
       display="flex"
     >
       <div
-        className="c5"
+        className="c7"
       >
         <input
           aria-invalid="false"
-          className="c6"
+          className="c8"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -12386,7 +12666,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12395,19 +12675,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12436,7 +12716,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12445,19 +12725,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12486,7 +12766,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12495,19 +12775,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12536,7 +12816,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12545,19 +12825,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12586,7 +12866,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12595,19 +12875,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12636,7 +12916,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12645,19 +12925,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12686,7 +12966,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12695,19 +12975,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12736,7 +13016,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12745,19 +13025,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c10"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c9"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12794,7 +13074,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c11"
+          className="c13"
         >
           <svg
             aria-hidden="true"
@@ -12818,40 +13098,52 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
-          className="c12"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "hidden",
+        <div
+          className="c3"
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rq:"
+            className="c14"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "hidden",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c5"
+            id=":rq:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
@@ -12901,6 +13193,13 @@ 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;
 }
@@ -12918,7 +13217,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c11 {
+.c13:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -13634,44 +13943,56 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c11"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "visible",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rr:"
+            className="c12"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c13"
+            id=":rr:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
-  .c5 {
+  .c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13691,7 +14012,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c7 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -13699,7 +14020,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c8 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -13717,15 +14038,22 @@ 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;
 }
 
-.c12 {
+.c14 {
   visibility: visible;
 }
 
-.c10 {
+.c12 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -13738,7 +14066,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c4 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -13749,7 +14087,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c13 {
+.c15 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -13867,7 +14205,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7 {
+.c9 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -13878,11 +14216,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c9:focus {
   outline: 0;
 }
 
-.c8 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -13913,13 +14251,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c10: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 {
+.c13 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -13959,16 +14297,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 16px;
 }
 
-.c11:hover,
-.c11:focus {
+.c13:hover,
+.c13:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c11:active {
+.c13:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c9 {
+.c11 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -13993,11 +14331,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c11:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c11:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -14053,52 +14391,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "visible",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rs:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rs:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <div
-      className="c5"
+      className="c7"
       display="flex"
     >
       <div
-        className="c6"
+        className="c8"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c9"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -14106,7 +14456,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14115,19 +14465,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14156,7 +14506,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14165,19 +14515,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14206,7 +14556,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14215,19 +14565,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14256,7 +14606,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14265,19 +14615,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14306,7 +14656,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14315,19 +14665,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14356,7 +14706,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14365,19 +14715,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14406,7 +14756,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14415,19 +14765,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14456,7 +14806,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14465,19 +14815,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14514,7 +14864,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c12"
+          className="c14"
         >
           <svg
             aria-hidden="true"
@@ -14538,44 +14888,56 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
-          className="c13"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "hidden",
+        <div
+          className="c4"
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rt:"
+            className="c15"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "hidden",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rt:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
-  .c5 {
+  .c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14595,7 +14957,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c7 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -14603,7 +14965,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c8 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -14621,15 +14983,22 @@ 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;
 }
 
-.c12 {
+.c14 {
   visibility: visible;
 }
 
-.c10 {
+.c12 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -14642,7 +15011,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c4 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -14653,7 +15032,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c13 {
+.c15 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -14764,7 +15143,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7 {
+.c9 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -14775,11 +15154,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c9:focus {
   outline: 0;
 }
 
-.c8 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -14812,13 +15191,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c10: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 {
+.c13 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -14858,16 +15237,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c11:hover,
-.c11:focus {
+.c13:hover,
+.c13:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c11:active {
+.c13:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c9 {
+.c11 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -14892,11 +15271,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c11:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c11:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -14952,52 +15331,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "visible",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":ru:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":ru:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <div
-      className="c5"
+      className="c7"
       display="flex"
     >
       <div
-        className="c6"
+        className="c8"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c9"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -15005,7 +15396,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15014,19 +15405,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15055,7 +15446,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15064,19 +15455,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15105,7 +15496,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15114,19 +15505,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15155,7 +15546,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15164,19 +15555,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15205,7 +15596,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15214,19 +15605,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15255,7 +15646,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15264,19 +15655,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15305,7 +15696,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15314,19 +15705,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15355,7 +15746,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15364,19 +15755,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15413,7 +15804,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c12"
+          className="c14"
         >
           <svg
             aria-hidden="true"
@@ -15437,44 +15828,56 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
-          className="c13"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "hidden",
+        <div
+          className="c4"
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":rv:"
+            className="c15"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "hidden",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":rv:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
-  .c5 {
+  .c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15494,7 +15897,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c7 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -15502,7 +15905,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c8 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -15520,7 +15923,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c12 {
+.c4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c14 {
   visibility: hidden;
 }
 
@@ -15528,7 +15938,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.c10 {
+.c12 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -15541,7 +15951,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c4 {
+.c6:not(:focus):not(:active):not(:focus-within) {
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -15552,7 +15972,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c13 {
+.c15 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -15663,7 +16083,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7 {
+.c9 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -15674,11 +16094,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c9:focus {
   outline: 0;
 }
 
-.c8 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -15709,13 +16129,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c10: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 {
+.c13 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -15755,16 +16175,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 24px;
 }
 
-.c11:hover,
-.c11:focus {
+.c13:hover,
+.c13:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c11:active {
+.c13:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c9 {
+.c11 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -15789,11 +16209,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c11:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c11:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -15849,52 +16269,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
+        <div
           className="c4"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "left": 0,
-              "maxWidth": "100%",
-              "position": "absolute",
-              "top": 0,
-              "visibility": "hidden",
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r10:"
+            className="c5"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "left": 0,
+                "maxWidth": "100%",
+                "position": "absolute",
+                "top": 0,
+                "visibility": "hidden",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":r10:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
     <div
-      className="c5"
+      className="c7"
       display="flex"
     >
       <div
-        className="c6"
+        className="c8"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c9"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -15902,7 +16334,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15911,19 +16343,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -15952,7 +16384,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15961,19 +16393,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16002,7 +16434,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16011,19 +16443,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16052,7 +16484,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16061,19 +16493,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16102,7 +16534,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16111,19 +16543,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16152,7 +16584,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16161,19 +16593,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16202,7 +16634,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16211,19 +16643,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16252,7 +16684,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c10"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16261,19 +16693,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c11"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c12"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c13"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16310,7 +16742,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c12"
+          className="c14"
         >
           <svg
             aria-hidden="true"
@@ -16334,40 +16766,52 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <svg
-          className="c13"
-          fill="none"
-          height="32px"
-          sx={
-            {
-              "height": "100%",
-              "maxWidth": "100%",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "visibility": "visible",
+        <div
+          className="c4"
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby=":r11:"
+            className="c15"
+            fill="none"
+            height="32px"
+            sx={
+              {
+                "height": "100%",
+                "maxWidth": "100%",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "visibility": "visible",
+              }
             }
-          }
-          viewBox="0 0 16 16"
-          width="32px"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="7"
-            stroke="currentColor"
-            strokeOpacity="0.25"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d="M15 8a7.002 7.002 0 00-7-7"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="2"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+            viewBox="0 0 16 16"
+            width="32px"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              strokeOpacity="0.25"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M15 8a7.002 7.002 0 00-7-7"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          <div
+            className="c6"
+            id=":r11:"
+          >
+            Loading
+          </div>
+        </div>
       </div>
     </span>
   </span>,
diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
index ab99dbbe433..48853b46e09 100644
--- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -616,7 +616,7 @@ const SelectPanelLoading = ({children = 'Fetching items...'}: React.PropsWithChi
         //                 maxHeight of dialog - (header & footer)
       }}
     >
-      <Spinner size="medium" />
+      <Spinner size="medium" srText={null} />
       <Text sx={{fontSize: 1, color: 'fg.muted'}}>{children}</Text>
     </Status>
   )
diff --git a/packages/react/src/internal/internal-types.ts b/packages/react/src/internal/internal-types.ts
new file mode 100644
index 00000000000..5a58a90e110
--- /dev/null
+++ b/packages/react/src/internal/internal-types.ts
@@ -0,0 +1,3 @@
+export type HTMLDataAttributes = {
+  [key: `data-${string}`]: unknown
+}