From 91dd518f245c6ac505657c6c30387d6a9aae1783 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 9 Sep 2024 15:17:14 -0400
Subject: [PATCH 01/17] Add `aria-describedby` to `TextInput` when
 `LeadingVisual` === `string`

---
 packages/react/src/TextInput/TextInput.tsx             |  9 ++++++++-
 .../internal/components/TextInputInnerVisualSlot.tsx   | 10 ++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index e2d2acd0736..c077dda66e8 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -1,5 +1,5 @@
 import type {MouseEventHandler} from 'react'
-import React, {useCallback, useState} from 'react'
+import React, {useCallback, useState, useId} from 'react'
 import {isValidElementType} from 'react-is'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {clsx} from 'clsx'
@@ -96,6 +96,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     const focusInput: MouseEventHandler = () => {
       inputRef.current?.focus()
     }
+    const leadingVisualId = useId()
     const handleInputFocus = useCallback(
       (e: React.FocusEvent<HTMLInputElement>) => {
         setIsInputFocused(true)
@@ -137,6 +138,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           visualPosition="leading"
           showLoadingIndicator={showLeadingLoadingIndicator}
           hasLoadingIndicator={typeof loading === 'boolean'}
+          id={typeof LeadingVisual === 'string' ? leadingVisualId : undefined}
         >
           {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
         </TextInputInnerVisualSlot>
@@ -149,6 +151,11 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           aria-required={required}
           aria-invalid={validationStatus === 'error' ? 'true' : undefined}
           {...inputProps}
+          aria-describedby={
+            typeof LeadingVisual === 'string'
+              ? `${leadingVisualId} ${inputProps['aria-describedby']}`
+              : inputProps['aria-describedby']
+          }
           data-component="input"
         />
         <TextInputInnerVisualSlot
diff --git a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx
index b8370ac12fe..ebda2227617 100644
--- a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx
+++ b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx
@@ -11,14 +11,20 @@ const TextInputInnerVisualSlot: React.FC<
     showLoadingIndicator: TextInputNonPassthroughProps['loading']
     /** Which side of this visual is being rendered */
     visualPosition: 'leading' | 'trailing'
+    /** Used to provide a reference for usage with `aria-describedby` */
+    id?: string
   }>
-> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition}) => {
+> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition, id}) => {
   if ((!children && !hasLoadingIndicator) || (visualPosition === 'leading' && !children && !showLoadingIndicator)) {
     return null
   }
 
   if (!hasLoadingIndicator) {
-    return <span className="TextInput-icon">{children}</span>
+    return (
+      <span className="TextInput-icon" id={id}>
+        {children}
+      </span>
+    )
   }
 
   return (

From 2725c7d628a0ee279b36ac35c7731dd48f9b94b2 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 9 Sep 2024 16:00:10 -0400
Subject: [PATCH 02/17] Update to include `TrailingVisual`, icons

---
 .../TextInput/TextInput.features.stories.tsx  | 56 +++++++++++--------
 packages/react/src/TextInput/TextInput.tsx    | 19 +++++--
 2 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
index 672be82b4e7..253daaafc10 100644
--- a/packages/react/src/TextInput/TextInput.features.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -94,31 +94,39 @@ export const Required = () => (
   </Box>
 )
 
-export const WithLeadingVisual = () => (
-  <Box as="form">
-    <FormControl>
-      <FormControl.Label>Default label</FormControl.Label>
-      <TextInput leadingVisual={CheckIcon} />
-    </FormControl>
-    <FormControl>
-      <FormControl.Label>Enter monies</FormControl.Label>
-      <TextInput leadingVisual="$" />
-    </FormControl>
-  </Box>
-)
+export const WithLeadingVisual = () => {
+  const Checkmark = () => <CheckIcon aria-label="Checkmark" />
 
-export const WithTrailingIcon = () => (
-  <Box>
-    <FormControl>
-      <FormControl.Label>Default label</FormControl.Label>
-      <TextInput trailingVisual={CheckIcon} />
-    </FormControl>
-    <FormControl>
-      <FormControl.Label>Enter monies</FormControl.Label>
-      <TextInput trailingVisual="minutes" placeholder="200" />
-    </FormControl>
-  </Box>
-)
+  return (
+    <Box as="form">
+      <FormControl>
+        <FormControl.Label>Default label</FormControl.Label>
+        <TextInput leadingVisual={Checkmark} />
+      </FormControl>
+      <FormControl>
+        <FormControl.Label>Enter monies</FormControl.Label>
+        <TextInput leadingVisual="$" />
+      </FormControl>
+    </Box>
+  )
+}
+
+export const WithTrailingIcon = () => {
+  const Checkmark = () => <CheckIcon />
+
+  return (
+    <Box>
+      <FormControl>
+        <FormControl.Label>Default label</FormControl.Label>
+        <TextInput trailingVisual={Checkmark} />
+      </FormControl>
+      <FormControl>
+        <FormControl.Label>Enter monies</FormControl.Label>
+        <TextInput trailingVisual="minutes" placeholder="200" />
+      </FormControl>
+    </Box>
+  )
+}
 
 export const WithTrailingAction = () => {
   const [value, setValue] = useState('sample text')
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index c077dda66e8..7a93f751a21 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -97,6 +97,16 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       inputRef.current?.focus()
     }
     const leadingVisualId = useId()
+    const trailingVisualId = useId()
+
+    const inputDescribedBy = [
+      inputProps['aria-describedby'],
+      LeadingVisual && leadingVisualId,
+      TrailingVisual && trailingVisualId,
+    ]
+      .filter(String)
+      .join('')
+
     const handleInputFocus = useCallback(
       (e: React.FocusEvent<HTMLInputElement>) => {
         setIsInputFocused(true)
@@ -138,7 +148,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           visualPosition="leading"
           showLoadingIndicator={showLeadingLoadingIndicator}
           hasLoadingIndicator={typeof loading === 'boolean'}
-          id={typeof LeadingVisual === 'string' ? leadingVisualId : undefined}
+          id={leadingVisualId}
         >
           {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
         </TextInputInnerVisualSlot>
@@ -151,17 +161,14 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           aria-required={required}
           aria-invalid={validationStatus === 'error' ? 'true' : undefined}
           {...inputProps}
-          aria-describedby={
-            typeof LeadingVisual === 'string'
-              ? `${leadingVisualId} ${inputProps['aria-describedby']}`
-              : inputProps['aria-describedby']
-          }
+          aria-describedby={inputDescribedBy}
           data-component="input"
         />
         <TextInputInnerVisualSlot
           visualPosition="trailing"
           showLoadingIndicator={showTrailingLoadingIndicator}
           hasLoadingIndicator={typeof loading === 'boolean'}
+          id={trailingVisualId}
         >
           {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? (
             <TrailingVisual />

From f754eda7508d23bd5e93c7b5f99f7c2bb98625b3 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 9 Sep 2024 16:28:21 -0400
Subject: [PATCH 03/17] Add tests, update snapshots

---
 .../TextInput/TextInput.features.stories.tsx  |   2 +-
 packages/react/src/TextInput/TextInput.tsx    |  12 +-
 .../react/src/__tests__/TextInput.test.tsx    |  46 +++++++
 .../__snapshots__/Autocomplete.test.tsx.snap  |   4 +-
 .../__snapshots__/TextInput.test.tsx.snap     | 117 +++++++++++-------
 5 files changed, 125 insertions(+), 56 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
index 253daaafc10..474515242a2 100644
--- a/packages/react/src/TextInput/TextInput.features.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -112,7 +112,7 @@ export const WithLeadingVisual = () => {
 }
 
 export const WithTrailingIcon = () => {
-  const Checkmark = () => <CheckIcon />
+  const Checkmark = () => <CheckIcon aria-label="Checkmark" />
 
   return (
     <Box>
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 7a93f751a21..bdd78ada214 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -99,13 +99,11 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     const leadingVisualId = useId()
     const trailingVisualId = useId()
 
-    const inputDescribedBy = [
-      inputProps['aria-describedby'],
-      LeadingVisual && leadingVisualId,
-      TrailingVisual && trailingVisualId,
-    ]
-      .filter(String)
-      .join('')
+    const inputDescribedBy =
+      [inputProps['aria-describedby'], LeadingVisual && leadingVisualId, TrailingVisual && trailingVisualId]
+        .filter(String)
+        .join(' ')
+        .trim() || undefined
 
     const handleInputFocus = useCallback(
       (e: React.FocusEvent<HTMLInputElement>) => {
diff --git a/packages/react/src/__tests__/TextInput.test.tsx b/packages/react/src/__tests__/TextInput.test.tsx
index 866e00cb09f..d21613d7be8 100644
--- a/packages/react/src/__tests__/TextInput.test.tsx
+++ b/packages/react/src/__tests__/TextInput.test.tsx
@@ -236,4 +236,50 @@ describe('TextInput', () => {
     const {getByRole} = HTMLRender(<TextInput onChange={onChange} aria-invalid="true" value="" />)
     expect(getByRole('textbox')).toHaveAttribute('aria-invalid', 'true')
   })
+
+  it('should include the leadingVisual as part of the input accessible description', () => {
+    const {getByRole} = HTMLRender(<TextInput leadingVisual="Search" />)
+    expect(getByRole('textbox')).toHaveAccessibleDescription('Search')
+  })
+
+  it('should include the leadingVisual icon as part of the input accessible description', () => {
+    const Icon = () => <SearchIcon aria-label="Search" />
+
+    const {getByRole} = HTMLRender(<TextInput leadingVisual={Icon} />)
+    const icon = getByRole('img')
+
+    expect(getByRole('textbox')).toHaveAttribute('aria-describedby', icon.parentElement?.id)
+    expect(icon).toHaveAccessibleName('Search')
+  })
+
+  it('should include the trailingVisual as part of the input accessible description', () => {
+    const {getByRole} = HTMLRender(<TextInput trailingVisual="Search" />)
+    expect(getByRole('textbox')).toHaveAccessibleDescription('Search')
+  })
+
+  it('should include the trailingVisual icon as part of the input accessible description', () => {
+    const Icon = () => <SearchIcon aria-label="Search" />
+
+    const {getByRole} = HTMLRender(<TextInput trailingVisual={Icon} />)
+    const icon = getByRole('img')
+
+    expect(getByRole('textbox')).toHaveAttribute('aria-describedby', icon.parentElement?.id)
+    expect(icon).toHaveAccessibleName('Search')
+  })
+
+  it('should include both the leadingVisual and trailingVisual as part of the input accessible description', () => {
+    const {getByRole} = HTMLRender(<TextInput leadingVisual="$" trailingVisual="Currency" />)
+    expect(getByRole('textbox')).toHaveAccessibleDescription('$ Currency')
+  })
+
+  it('should keep the passed aria-describedby value', () => {
+    const {getByRole} = HTMLRender(
+      <>
+        <span id="passedValue">value</span>
+        <TextInput leadingVisual="leading" trailingVisual="trailing" aria-describedby="passedValue" />
+      </>,
+    )
+    expect(getByRole('textbox').getAttribute('aria-describedby')).toContain('passedValue')
+    expect(getByRole('textbox')).toHaveAccessibleDescription('value leading trailing')
+  })
 })
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 9f40a07fbc8..da52e114226 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -378,7 +378,7 @@ exports[`snapshots renders a loading state 1`] = `
       >
         <svg
           aria-hidden={true}
-          aria-labelledby=":r1v:"
+          aria-labelledby=":r2b:"
           className="c3"
           fill="none"
           height="32px"
@@ -404,7 +404,7 @@ exports[`snapshots renders a loading state 1`] = `
         </svg>
         <span
           className="c4"
-          id=":r1v:"
+          id=":r2b:"
         >
           Loading
         </span>
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index abf6f01ebad..a1d3bd001d8 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -795,6 +795,7 @@ exports[`TextInput renders leadingVisual 1`] = `
 >
   <span
     className="TextInput-icon"
+    id=":rs:"
   >
     <svg
       aria-hidden="true"
@@ -819,6 +820,7 @@ exports[`TextInput renders leadingVisual 1`] = `
     </svg>
   </span>
   <input
+    aria-describedby=":rs:"
     className="c2"
     data-component="input"
     name="search"
@@ -951,6 +953,7 @@ exports[`TextInput renders leadingVisual 2`] = `
 >
   <span
     className="TextInput-icon"
+    id=":rv:"
   >
     <svg
       aria-hidden="true"
@@ -975,6 +978,7 @@ exports[`TextInput renders leadingVisual 2`] = `
     </svg>
   </span>
   <input
+    aria-describedby=":rv:"
     className="c2"
     data-component="input"
     name="search"
@@ -1107,12 +1111,14 @@ exports[`TextInput renders leadingVisual 3`] = `
 >
   <span
     className="TextInput-icon"
+    id=":r12:"
   >
     <div>
       Trailing
     </div>
   </span>
   <input
+    aria-describedby=":r12:"
     className="c2"
     data-component="input"
     name="search"
@@ -1245,12 +1251,14 @@ exports[`TextInput renders leadingVisual 4`] = `
 >
   <span
     className="TextInput-icon"
+    id=":r15:"
   >
     <div>
       Trailing
     </div>
   </span>
   <input
+    aria-describedby=":r15:"
     className="c2"
     data-component="input"
     name="search"
@@ -2235,8 +2243,8 @@ exports[`TextInput renders trailingAction icon button 1`] = `
     className="c3 TextInput-action"
   >
     <button
-      aria-describedby=":ro:-loading-announcement"
-      aria-labelledby=":rn:"
+      aria-describedby=":r20:-loading-announcement"
+      aria-labelledby=":r1v:"
       className="c4"
       data-block={null}
       data-component="IconButton"
@@ -2276,7 +2284,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
       aria-hidden={true}
       className="c5"
       data-direction="s"
-      id=":rn:"
+      id=":r1v:"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2749,7 +2757,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
     className="c3 TextInput-action"
   >
     <button
-      aria-describedby=":ri:-loading-announcement"
+      aria-describedby=":r1m:-loading-announcement"
       className="c4"
       data-block={null}
       data-loading={false}
@@ -3353,7 +3361,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
     className="c3 TextInput-action"
   >
     <button
-      aria-describedby=":rl:-loading-announcement :rk:"
+      aria-describedby=":r1r:-loading-announcement :r1q:"
       className="c4"
       data-block={null}
       data-loading={false}
@@ -3384,7 +3392,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
     <span
       className="c6"
       data-direction="s"
-      id=":rk:"
+      id=":r1q:"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
       role="tooltip"
@@ -3515,6 +3523,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=":r19:"
     className="c2"
     data-component="input"
     name="search"
@@ -3525,6 +3534,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   />
   <span
     className="TextInput-icon"
+    id=":r19:"
   >
     <svg
       aria-hidden="true"
@@ -3671,6 +3681,7 @@ exports[`TextInput renders trailingVisual 2`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=":r1c:"
     className="c2"
     data-component="input"
     name="search"
@@ -3681,6 +3692,7 @@ exports[`TextInput renders trailingVisual 2`] = `
   />
   <span
     className="TextInput-icon"
+    id=":r1c:"
   >
     <svg
       aria-hidden="true"
@@ -3827,6 +3839,7 @@ exports[`TextInput renders trailingVisual 3`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=":r1f:"
     className="c2"
     data-component="input"
     name="search"
@@ -3837,6 +3850,7 @@ exports[`TextInput renders trailingVisual 3`] = `
   />
   <span
     className="TextInput-icon"
+    id=":r1f:"
   >
     <div>
       Trailing
@@ -3965,6 +3979,7 @@ exports[`TextInput renders trailingVisual 4`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=":r1i:"
     className="c2"
     data-component="input"
     name="search"
@@ -3975,6 +3990,7 @@ exports[`TextInput renders trailingVisual 4`] = `
   />
   <span
     className="TextInput-icon"
+    id=":r1i:"
   >
     <div>
       Trailing
@@ -4161,7 +4177,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rq:"
+            aria-labelledby=":r24:"
             className="c5"
             fill="none"
             height="16px"
@@ -4192,7 +4208,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":rq:"
+            id=":r24:"
           >
             Loading
           </span>
@@ -4375,7 +4391,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rr:"
+            aria-labelledby=":r27:"
             className="c4"
             fill="none"
             height="16px"
@@ -4406,7 +4422,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c5"
-            id=":rr:"
+            id=":r27:"
           >
             Loading
           </span>
@@ -4432,7 +4448,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rs:"
+            aria-labelledby=":r28:"
             className="c7"
             fill="none"
             height="16px"
@@ -4463,7 +4479,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c5"
-            id=":rs:"
+            id=":r28:"
           >
             Loading
           </span>
@@ -4647,7 +4663,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rt:"
+            aria-labelledby=":r2b:"
             className="c5"
             fill="none"
             height="16px"
@@ -4678,7 +4694,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":rt:"
+            id=":r2b:"
           >
             Loading
           </span>
@@ -4895,7 +4911,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":ru:"
+            aria-labelledby=":r2e:"
             className="c5"
             fill="none"
             height="32px"
@@ -4931,7 +4947,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":ru:"
+            id=":r2e:"
           >
             Loading
           </span>
@@ -4939,6 +4955,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
+      aria-describedby=":r2c:"
       className="c7"
       data-component="input"
       onBlur={[Function]}
@@ -4957,7 +4974,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rv:"
+            aria-labelledby=":r2f:"
             className="c8"
             fill="none"
             height="16px"
@@ -4988,7 +5005,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":rv:"
+            id=":r2f:"
           >
             Loading
           </span>
@@ -5205,7 +5222,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r10:"
+            aria-labelledby=":r2i:"
             className="c5"
             fill="none"
             height="32px"
@@ -5241,7 +5258,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":r10:"
+            id=":r2i:"
           >
             Loading
           </span>
@@ -5249,6 +5266,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
+      aria-describedby=":r2g:"
       className="c7"
       data-component="input"
       onBlur={[Function]}
@@ -5267,7 +5285,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r11:"
+            aria-labelledby=":r2j:"
             className="c8"
             fill="none"
             height="16px"
@@ -5298,7 +5316,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":r11:"
+            id=":r2j:"
           >
             Loading
           </span>
@@ -5515,7 +5533,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r12:"
+            aria-labelledby=":r2m:"
             className="c5"
             fill="none"
             height="32px"
@@ -5551,7 +5569,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":r12:"
+            id=":r2m:"
           >
             Loading
           </span>
@@ -5559,6 +5577,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
+      aria-describedby=":r2k:"
       className="c7"
       data-component="input"
       onBlur={[Function]}
@@ -5577,7 +5596,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r13:"
+            aria-labelledby=":r2n:"
             className="c8"
             fill="none"
             height="16px"
@@ -5608,7 +5627,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":r13:"
+            id=":r2n:"
           >
             Loading
           </span>
@@ -5783,6 +5802,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <input
+      aria-describedby=":r2p:"
       className="c2"
       data-component="input"
       onBlur={[Function]}
@@ -5826,7 +5846,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r14:"
+            aria-labelledby=":r2q:"
             className="c6"
             fill="none"
             height="32px"
@@ -5862,7 +5882,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c7"
-            id=":r14:"
+            id=":r2q:"
           >
             Loading
           </span>
@@ -6054,7 +6074,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r15:"
+            aria-labelledby=":r2t:"
             className="c4"
             fill="none"
             height="16px"
@@ -6085,7 +6105,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c5"
-            id=":r15:"
+            id=":r2t:"
           >
             Loading
           </span>
@@ -6093,6 +6113,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
+      aria-describedby=":r2s:"
       className="c6"
       data-component="input"
       onBlur={[Function]}
@@ -6136,7 +6157,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r16:"
+            aria-labelledby=":r2u:"
             className="c8"
             fill="none"
             height="32px"
@@ -6172,7 +6193,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c5"
-            id=":r16:"
+            id=":r2u:"
           >
             Loading
           </span>
@@ -6347,6 +6368,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <input
+      aria-describedby=":r30:"
       className="c2"
       data-component="input"
       onBlur={[Function]}
@@ -6390,7 +6412,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r17:"
+            aria-labelledby=":r31:"
             className="c6"
             fill="none"
             height="32px"
@@ -6426,7 +6448,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c7"
-            id=":r17:"
+            id=":r31:"
           >
             Loading
           </span>
@@ -6661,7 +6683,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r18:"
+            aria-labelledby=":r34:"
             className="c5"
             fill="none"
             height="32px"
@@ -6697,7 +6719,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":r18:"
+            id=":r34:"
           >
             Loading
           </span>
@@ -6705,6 +6727,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
+      aria-describedby=":r32: :r33:"
       className="c7"
       data-component="input"
       onBlur={[Function]}
@@ -6748,7 +6771,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r19:"
+            aria-labelledby=":r35:"
             className="c9"
             fill="none"
             height="32px"
@@ -6784,7 +6807,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":r19:"
+            id=":r35:"
           >
             Loading
           </span>
@@ -7010,7 +7033,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r1a:"
+            aria-labelledby=":r38:"
             className="c5"
             fill="none"
             height="32px"
@@ -7046,7 +7069,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":r1a:"
+            id=":r38:"
           >
             Loading
           </span>
@@ -7054,6 +7077,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
+      aria-describedby=":r36: :r37:"
       className="c7"
       data-component="input"
       onBlur={[Function]}
@@ -7097,7 +7121,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r1b:"
+            aria-labelledby=":r39:"
             className="c9"
             fill="none"
             height="32px"
@@ -7133,7 +7157,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":r1b:"
+            id=":r39:"
           >
             Loading
           </span>
@@ -7366,7 +7390,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r1c:"
+            aria-labelledby=":r3c:"
             className="c5"
             fill="none"
             height="32px"
@@ -7402,7 +7426,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":r1c:"
+            id=":r3c:"
           >
             Loading
           </span>
@@ -7410,6 +7434,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
+      aria-describedby=":r3a: :r3b:"
       className="c7"
       data-component="input"
       onBlur={[Function]}
@@ -7453,7 +7478,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r1d:"
+            aria-labelledby=":r3d:"
             className="c9"
             fill="none"
             height="32px"
@@ -7489,7 +7514,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
           <span
             className="c6"
-            id=":r1d:"
+            id=":r3d:"
           >
             Loading
           </span>

From a21ec0deac258b9c0406946273b77c00f3236369 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 9 Sep 2024 16:49:56 -0400
Subject: [PATCH 04/17] Axe fix: Add `aria-label` to story

---
 packages/react/src/drafts/SelectPanel2/SelectPanel.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.stories.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.stories.tsx
index 42730cb106f..ff7762dc476 100644
--- a/packages/react/src/drafts/SelectPanel2/SelectPanel.stories.tsx
+++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.stories.tsx
@@ -69,7 +69,7 @@ export const Default = () => {
         <SelectPanel.Button>Assign label</SelectPanel.Button>
 
         <SelectPanel.Header>
-          <SelectPanel.SearchInput onChange={onSearchInputChange} />
+          <SelectPanel.SearchInput aria-label="Search" onChange={onSearchInputChange} />
         </SelectPanel.Header>
 
         {itemsToShow.length === 0 ? (

From d33a2879515f53b2bcd2adc199f656fbee87350c Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 9 Sep 2024 17:09:29 -0400
Subject: [PATCH 05/17] Add changeset

---
 .changeset/five-windows-invent.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/five-windows-invent.md

diff --git a/.changeset/five-windows-invent.md b/.changeset/five-windows-invent.md
new file mode 100644
index 00000000000..657f3a4ea0f
--- /dev/null
+++ b/.changeset/five-windows-invent.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Adds `aria-describedby` for `LeadingVisual` and `TrailingVisual` in `TextInput`

From dcecdeef07150a0f4aac918c5a436290c4d94a76 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 10 Sep 2024 11:38:50 -0400
Subject: [PATCH 06/17] Add loading to description

---
 packages/react/src/TextInput/TextInput.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index bdd78ada214..3300e646c18 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -11,6 +11,7 @@ import type {StyledWrapperProps} from '../internal/components/TextInputWrapper'
 import TextInputWrapper from '../internal/components/TextInputWrapper'
 import TextInputAction from '../internal/components/TextInputInnerAction'
 import UnstyledTextInput from '../internal/components/UnstyledTextInput'
+import VisuallyHidden from '../_VisuallyHidden'
 
 export type TextInputNonPassthroughProps = {
   /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
@@ -24,6 +25,8 @@ export type TextInputNonPassthroughProps = {
    * 'trailing': at the end of the input
    **/
   loaderPosition?: 'auto' | 'leading' | 'trailing'
+  /** Text for screen readers to convey the loading state */
+  loaderText?: string
   /**
    * A visual that renders inside the input before the typing area
    */
@@ -67,6 +70,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       disabled,
       loading,
       loaderPosition = 'auto',
+      loaderText = 'Loading',
       monospace,
       validationStatus,
       sx: sxProp,
@@ -98,9 +102,10 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     }
     const leadingVisualId = useId()
     const trailingVisualId = useId()
+    const loadingId = useId()
 
     const inputDescribedBy =
-      [inputProps['aria-describedby'], LeadingVisual && leadingVisualId, TrailingVisual && trailingVisualId]
+      [inputProps['aria-describedby'], LeadingVisual && leadingVisualId, TrailingVisual && trailingVisualId, loadingId]
         .filter(String)
         .join(' ')
         .trim() || undefined
@@ -175,6 +180,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           )}
         </TextInputInnerVisualSlot>
         {trailingAction}
+        {loading && <VisuallyHidden id={loadingId}>{loaderText}</VisuallyHidden>}
       </TextInputWrapper>
     )
   },

From e31e6959ebb46e75996571874079cf68a3b9d1a3 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 10 Sep 2024 12:40:22 -0400
Subject: [PATCH 07/17] Add new prop `loaderText`, reference loading with text
 input

---
 .../react/src/TextInput/TextInput.docs.json   |    6 +
 packages/react/src/TextInput/TextInput.tsx    |    7 +-
 .../react/src/__tests__/TextInput.test.tsx    |   22 +
 .../__snapshots__/Autocomplete.test.tsx.snap  |    4 +-
 .../__snapshots__/TextInput.test.tsx.snap     |  669 +++++-----
 .../TextInputWithTokens.test.tsx.snap         | 1108 +++++++----------
 .../components/TextInputInnerVisualSlot.tsx   |    3 +-
 7 files changed, 792 insertions(+), 1027 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.docs.json b/packages/react/src/TextInput/TextInput.docs.json
index 69d9f71bfd9..e8c65a0e369 100644
--- a/packages/react/src/TextInput/TextInput.docs.json
+++ b/packages/react/src/TextInput/TextInput.docs.json
@@ -42,6 +42,12 @@
       "defaultValue": "",
       "description": "<div>Which position to render the loading indicator</div> <ul> <li> 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the beginning </li> <li>'leading': at the beginning of the input</li> <li>'trailing': at the end of the input</li> </ul>"
     },
+    {
+      "name": "loaderText",
+      "type": "string",
+      "defaultValue": "Loading",
+      "description": "Text for screen readers to convey the loading state, should be descriptive and explain what is loading"
+    },
     {
       "name": "leadingVisual",
       "type": "string | React.ComponentType",
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 3300e646c18..97995df43b3 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -105,7 +105,12 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     const loadingId = useId()
 
     const inputDescribedBy =
-      [inputProps['aria-describedby'], LeadingVisual && leadingVisualId, TrailingVisual && trailingVisualId, loadingId]
+      [
+        inputProps['aria-describedby'],
+        LeadingVisual && leadingVisualId,
+        TrailingVisual && trailingVisualId,
+        loading && loadingId,
+      ]
         .filter(String)
         .join(' ')
         .trim() || undefined
diff --git a/packages/react/src/__tests__/TextInput.test.tsx b/packages/react/src/__tests__/TextInput.test.tsx
index d21613d7be8..0e0608ef5dd 100644
--- a/packages/react/src/__tests__/TextInput.test.tsx
+++ b/packages/react/src/__tests__/TextInput.test.tsx
@@ -282,4 +282,26 @@ describe('TextInput', () => {
     expect(getByRole('textbox').getAttribute('aria-describedby')).toContain('passedValue')
     expect(getByRole('textbox')).toHaveAccessibleDescription('value leading trailing')
   })
+
+  it('should include the loading indicator as part of the input accessible description', () => {
+    const {getByRole} = HTMLRender(<TextInput loading />)
+    expect(getByRole('textbox')).toHaveAccessibleDescription('Loading')
+  })
+
+  it('should include the leadingVisual and loading indicator as part of the input accessible description', () => {
+    const {getByRole} = HTMLRender(
+      <TextInput loading loaderText="Loading search items" loaderPosition="trailing" leadingVisual="Search" />,
+    )
+    expect(getByRole('textbox')).toHaveAccessibleDescription('Search Loading search items')
+  })
+
+  it('should include the trailingVisual and loading indicator as part of the input accessible description', () => {
+    const {getByRole} = HTMLRender(<TextInput loading loaderPosition="leading" trailingVisual="Search" />)
+    expect(getByRole('textbox')).toHaveAccessibleDescription('Search Loading')
+  })
+
+  it('should not have an aria-describedby if there is no leadingVisual, trailingVisual, or loading indicator', () => {
+    const {getByRole} = HTMLRender(<TextInput />)
+    expect(getByRole('textbox')).not.toHaveAttribute('aria-describedby')
+  })
 })
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index da52e114226..3deb5832833 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -378,7 +378,7 @@ exports[`snapshots renders a loading state 1`] = `
       >
         <svg
           aria-hidden={true}
-          aria-labelledby=":r2b:"
+          aria-labelledby=":r2h:"
           className="c3"
           fill="none"
           height="32px"
@@ -404,7 +404,7 @@ exports[`snapshots renders a loading state 1`] = `
         </svg>
         <span
           className="c4"
-          id=":r2b:"
+          id=":r2h:"
         >
           Loading
         </span>
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index a1d3bd001d8..cd7b8e05dfa 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -795,7 +795,7 @@ exports[`TextInput renders leadingVisual 1`] = `
 >
   <span
     className="TextInput-icon"
-    id=":rs:"
+    id=":r15:"
   >
     <svg
       aria-hidden="true"
@@ -820,7 +820,7 @@ exports[`TextInput renders leadingVisual 1`] = `
     </svg>
   </span>
   <input
-    aria-describedby=":rs:"
+    aria-describedby=":r15:"
     className="c2"
     data-component="input"
     name="search"
@@ -953,7 +953,7 @@ exports[`TextInput renders leadingVisual 2`] = `
 >
   <span
     className="TextInput-icon"
-    id=":rv:"
+    id=":r19:"
   >
     <svg
       aria-hidden="true"
@@ -978,7 +978,7 @@ exports[`TextInput renders leadingVisual 2`] = `
     </svg>
   </span>
   <input
-    aria-describedby=":rv:"
+    aria-describedby=":r19:"
     className="c2"
     data-component="input"
     name="search"
@@ -1111,14 +1111,14 @@ exports[`TextInput renders leadingVisual 3`] = `
 >
   <span
     className="TextInput-icon"
-    id=":r12:"
+    id=":r1d:"
   >
     <div>
       Trailing
     </div>
   </span>
   <input
-    aria-describedby=":r12:"
+    aria-describedby=":r1d:"
     className="c2"
     data-component="input"
     name="search"
@@ -1251,14 +1251,14 @@ exports[`TextInput renders leadingVisual 4`] = `
 >
   <span
     className="TextInput-icon"
-    id=":r15:"
+    id=":r1h:"
   >
     <div>
       Trailing
     </div>
   </span>
   <input
-    aria-describedby=":r15:"
+    aria-describedby=":r1h:"
     className="c2"
     data-component="input"
     name="search"
@@ -2243,8 +2243,8 @@ exports[`TextInput renders trailingAction icon button 1`] = `
     className="c3 TextInput-action"
   >
     <button
-      aria-describedby=":r20:-loading-announcement"
-      aria-labelledby=":r1v:"
+      aria-describedby=":r2k:-loading-announcement"
+      aria-labelledby=":r2j:"
       className="c4"
       data-block={null}
       data-component="IconButton"
@@ -2284,7 +2284,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
       aria-hidden={true}
       className="c5"
       data-direction="s"
-      id=":r1v:"
+      id=":r2j:"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2757,7 +2757,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
     className="c3 TextInput-action"
   >
     <button
-      aria-describedby=":r1m:-loading-announcement"
+      aria-describedby=":r28:-loading-announcement"
       className="c4"
       data-block={null}
       data-loading={false}
@@ -3361,7 +3361,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
     className="c3 TextInput-action"
   >
     <button
-      aria-describedby=":r1r:-loading-announcement :r1q:"
+      aria-describedby=":r2e:-loading-announcement :r2d:"
       className="c4"
       data-block={null}
       data-loading={false}
@@ -3392,7 +3392,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
     <span
       className="c6"
       data-direction="s"
-      id=":r1q:"
+      id=":r2d:"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
       role="tooltip"
@@ -3523,7 +3523,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=":r19:"
+    aria-describedby=":r1m:"
     className="c2"
     data-component="input"
     name="search"
@@ -3534,7 +3534,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   />
   <span
     className="TextInput-icon"
-    id=":r19:"
+    id=":r1m:"
   >
     <svg
       aria-hidden="true"
@@ -3681,7 +3681,7 @@ exports[`TextInput renders trailingVisual 2`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=":r1c:"
+    aria-describedby=":r1q:"
     className="c2"
     data-component="input"
     name="search"
@@ -3692,7 +3692,7 @@ exports[`TextInput renders trailingVisual 2`] = `
   />
   <span
     className="TextInput-icon"
-    id=":r1c:"
+    id=":r1q:"
   >
     <svg
       aria-hidden="true"
@@ -3839,7 +3839,7 @@ exports[`TextInput renders trailingVisual 3`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=":r1f:"
+    aria-describedby=":r1u:"
     className="c2"
     data-component="input"
     name="search"
@@ -3850,7 +3850,7 @@ exports[`TextInput renders trailingVisual 3`] = `
   />
   <span
     className="TextInput-icon"
-    id=":r1f:"
+    id=":r1u:"
   >
     <div>
       Trailing
@@ -3979,7 +3979,7 @@ exports[`TextInput renders trailingVisual 4`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=":r1i:"
+    aria-describedby=":r22:"
     className="c2"
     data-component="input"
     name="search"
@@ -3990,7 +3990,7 @@ exports[`TextInput renders trailingVisual 4`] = `
   />
   <span
     className="TextInput-icon"
-    id=":r1i:"
+    id=":r22:"
   >
     <div>
       Trailing
@@ -4016,22 +4016,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
   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;
 }
 
+.c6 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -4159,6 +4162,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <input
+      aria-describedby=":r2o:"
       className="c2"
       data-component="input"
       onBlur={[Function]}
@@ -4171,13 +4175,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c3"
         display="flex"
+        id=":r2n:"
       >
         <span
           className="c4"
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r24:"
             className="c5"
             fill="none"
             height="16px"
@@ -4206,15 +4210,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r24:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c6"
+      id=":r2o:"
+    >
+      Loading
+    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -4231,28 +4235,31 @@ exports[`TextInput renders with a loading indicator 1`] = `
   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;
 }
 
-.c7 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
+.c7 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -4346,7 +4353,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4356,7 +4363,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c6:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -4385,13 +4392,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r2q:"
       >
         <span
           className="c3"
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r27:"
             className="c4"
             fill="none"
             height="16px"
@@ -4420,17 +4427,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c5"
-            id=":r27:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <input
-      className="c6"
+      aria-describedby=":r2s:"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4442,14 +4444,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r2r:"
       >
         <span
           className="c3"
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r28:"
-            className="c7"
+            className="c6"
             fill="none"
             height="16px"
             sx={
@@ -4477,15 +4479,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c5"
-            id=":r28:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c7"
+      id=":r2s:"
+    >
+      Loading
+    </span>
   </span>,
   .c3 {
   display: -webkit-box;
@@ -4502,22 +4504,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
   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;
 }
 
+.c6 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -4645,6 +4650,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <input
+      aria-describedby=":r31:"
       className="c2"
       data-component="input"
       onBlur={[Function]}
@@ -4657,13 +4663,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c3"
         display="flex"
+        id=":r30:"
       >
         <span
           className="c4"
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r2b:"
             className="c5"
             fill="none"
             height="16px"
@@ -4692,15 +4698,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r2b:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c6"
+      id=":r31:"
+    >
+      Loading
+    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -4721,17 +4727,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.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 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -4748,6 +4744,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
+.c8 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -4841,7 +4850,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4851,7 +4860,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
@@ -4880,6 +4889,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r33:"
       >
         <div
           className="c3"
@@ -4911,7 +4921,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r2e:"
             className="c5"
             fill="none"
             height="32px"
@@ -4945,18 +4954,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r2e:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <input
-      aria-describedby=":r2c:"
-      className="c7"
+      aria-describedby=":r33:  :r35:"
+      className="c6"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4968,14 +4971,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r34:"
       >
         <span
           className="c4"
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r2f:"
-            className="c8"
+            className="c7"
             fill="none"
             height="16px"
             sx={
@@ -5003,15 +5006,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r2f:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c8"
+      id=":r35:"
+    >
+      Loading
+    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -5032,17 +5035,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.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 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -5059,6 +5052,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
+.c8 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -5152,7 +5158,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5162,7 +5168,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
@@ -5191,6 +5197,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r38:"
       >
         <div
           className="c3"
@@ -5222,7 +5229,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r2i:"
             className="c5"
             fill="none"
             height="32px"
@@ -5256,18 +5262,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r2i:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <input
-      aria-describedby=":r2g:"
-      className="c7"
+      aria-describedby=":r38:  :r3a:"
+      className="c6"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5279,14 +5279,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r39:"
       >
         <span
           className="c4"
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r2j:"
-            className="c8"
+            className="c7"
             fill="none"
             height="16px"
             sx={
@@ -5314,15 +5314,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r2j:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c8"
+      id=":r3a:"
+    >
+      Loading
+    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -5343,17 +5343,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.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 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -5370,6 +5360,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
+.c8 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -5463,7 +5466,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5473,7 +5476,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
@@ -5502,6 +5505,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r3d:"
       >
         <div
           className="c3"
@@ -5533,7 +5537,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r2m:"
             className="c5"
             fill="none"
             height="32px"
@@ -5567,18 +5570,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r2m:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <input
-      aria-describedby=":r2k:"
-      className="c7"
+      aria-describedby=":r3d:  :r3f:"
+      className="c6"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5590,14 +5587,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r3e:"
       >
         <span
           className="c4"
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r2n:"
-            className="c8"
+            className="c7"
             fill="none"
             height="16px"
             sx={
@@ -5625,15 +5622,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r2n:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c8"
+      id=":r3f:"
+    >
+      Loading
+    </span>
   </span>,
   .c3 {
   display: -webkit-box;
@@ -5654,16 +5651,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.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;
@@ -5675,6 +5662,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
+.c7 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -5802,7 +5802,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <input
-      aria-describedby=":r2p:"
+      aria-describedby=":r3j: :r3k:"
       className="c2"
       data-component="input"
       onBlur={[Function]}
@@ -5815,6 +5815,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c3"
         display="flex"
+        id=":r3j:"
       >
         <div
           className="c4"
@@ -5846,7 +5847,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r2q:"
             className="c6"
             fill="none"
             height="32px"
@@ -5880,15 +5880,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c7"
-            id=":r2q:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c7"
+      id=":r3k:"
+    >
+      Loading
+    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -5905,27 +5905,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: inline-flex;
 }
 
-.c7 {
+.c6 {
   visibility: visible;
 }
 
-.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;
 }
 
-.c8 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5936,6 +5926,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
+.c8 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -6029,7 +6032,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c6 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6039,7 +6042,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c6:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -6068,13 +6071,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r3m:"
       >
         <span
           className="c3"
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r2t:"
             className="c4"
             fill="none"
             height="16px"
@@ -6103,18 +6106,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c5"
-            id=":r2t:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <input
-      aria-describedby=":r2s:"
-      className="c6"
+      aria-describedby=":r3n: :r3o:"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6126,9 +6123,10 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r3n:"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <svg
             aria-hidden="true"
@@ -6157,8 +6155,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r2u:"
-            className="c8"
+            className="c7"
             fill="none"
             height="32px"
             sx={
@@ -6191,15 +6188,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c5"
-            id=":r2u:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c8"
+      id=":r3o:"
+    >
+      Loading
+    </span>
   </span>,
   .c3 {
   display: -webkit-box;
@@ -6220,16 +6217,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.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;
@@ -6241,6 +6228,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
+.c7 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -6368,7 +6368,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <input
-      aria-describedby=":r30:"
+      aria-describedby=":r3s: :r3t:"
       className="c2"
       data-component="input"
       onBlur={[Function]}
@@ -6381,6 +6381,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c3"
         display="flex"
+        id=":r3s:"
       >
         <div
           className="c4"
@@ -6412,7 +6413,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r31:"
             className="c6"
             fill="none"
             height="32px"
@@ -6446,15 +6446,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c7"
-            id=":r31:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c7"
+      id=":r3t:"
+    >
+      Loading
+    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -6475,20 +6475,10 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.c8 {
+.c7 {
   visibility: visible;
 }
 
-.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;
@@ -6500,7 +6490,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6511,6 +6501,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
+.c9 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -6612,7 +6615,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6622,7 +6625,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
@@ -6652,6 +6655,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r3v:"
       >
         <div
           className="c3"
@@ -6683,7 +6687,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r34:"
             className="c5"
             fill="none"
             height="32px"
@@ -6717,18 +6720,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r34:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <input
-      aria-describedby=":r32: :r33:"
-      className="c7"
+      aria-describedby=":r3v: :r40: :r41:"
+      className="c6"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6740,9 +6737,10 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r40:"
       >
         <div
-          className="c8"
+          className="c7"
         >
           <svg
             aria-hidden="true"
@@ -6771,8 +6769,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r35:"
-            className="c9"
+            className="c8"
             fill="none"
             height="32px"
             sx={
@@ -6805,15 +6802,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r35:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c9"
+      id=":r41:"
+    >
+      Loading
+    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -6834,20 +6831,10 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.c8 {
+.c7 {
   visibility: visible;
 }
 
-.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;
@@ -6859,7 +6846,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6870,6 +6857,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
+.c9 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -6963,7 +6963,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6973,7 +6973,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
@@ -7002,6 +7002,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r44:"
       >
         <div
           className="c3"
@@ -7033,7 +7034,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r38:"
             className="c5"
             fill="none"
             height="32px"
@@ -7067,18 +7067,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r38:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <input
-      aria-describedby=":r36: :r37:"
-      className="c7"
+      aria-describedby=":r44: :r45: :r46:"
+      className="c6"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -7090,9 +7084,10 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r45:"
       >
         <div
-          className="c8"
+          className="c7"
         >
           <svg
             aria-hidden="true"
@@ -7121,8 +7116,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r39:"
-            className="c9"
+            className="c8"
             fill="none"
             height="32px"
             sx={
@@ -7155,15 +7149,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r39:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c9"
+      id=":r46:"
+    >
+      Loading
+    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -7180,7 +7174,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: inline-flex;
 }
 
-.c8 {
+.c7 {
   visibility: hidden;
 }
 
@@ -7188,16 +7182,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.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;
@@ -7209,7 +7193,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -7220,6 +7204,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
+.c9 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -7319,7 +7316,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7329,7 +7326,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
@@ -7359,6 +7356,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r49:"
       >
         <div
           className="c3"
@@ -7390,7 +7388,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r3c:"
             className="c5"
             fill="none"
             height="32px"
@@ -7424,18 +7421,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r3c:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <input
-      aria-describedby=":r3a: :r3b:"
-      className="c7"
+      aria-describedby=":r49: :r4a: :r4b:"
+      className="c6"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -7447,9 +7438,10 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r4a:"
       >
         <div
-          className="c8"
+          className="c7"
         >
           <svg
             aria-hidden="true"
@@ -7478,8 +7470,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r3d:"
-            className="c9"
+            className="c8"
             fill="none"
             height="32px"
             sx={
@@ -7512,15 +7503,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r3d:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c9"
+      id=":r4b:"
+    >
+      Loading
+    </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 6fcb73235d6..f28b77a0af7 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -6308,16 +6308,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: inline-flex;
 }
 
-.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;
@@ -7022,7 +7012,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":re:"
             className="c11"
             fill="none"
             height="16px"
@@ -7051,17 +7040,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c12"
-            id=":re:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
   </span>,
-  .c6 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7081,7 +7064,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c6 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7089,7 +7072,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -7114,29 +7097,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   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;
 }
 
-.c13 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -7249,7 +7222,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c8 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7260,11 +7233,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c8:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -7297,13 +7270,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9:hover {
+.c8:hover {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
   box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -7343,16 +7316,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c12:hover,
-.c12:focus {
+.c11:hover,
+.c11:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c12:active {
+.c11:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -7377,11 +7350,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c10:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c10:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -7417,7 +7390,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rf:"
             className="c4"
             fill="none"
             height="16px"
@@ -7446,25 +7418,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c5"
-            id=":rf:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <div
-      className="c6"
+      className="c5"
       display="flex"
     >
       <div
-        className="c7"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c8"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -7472,7 +7438,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7481,19 +7447,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7522,7 +7488,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7531,19 +7497,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7572,7 +7538,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7581,19 +7547,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7622,7 +7588,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7631,19 +7597,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7672,7 +7638,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7681,19 +7647,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7722,7 +7688,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7731,19 +7697,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7772,7 +7738,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7781,19 +7747,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7822,7 +7788,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7831,19 +7797,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7884,8 +7850,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rg:"
-            className="c13"
+            className="c12"
             fill="none"
             height="16px"
             sx={
@@ -7913,12 +7878,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c5"
-            id=":rg:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
@@ -7976,16 +7935,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: inline-flex;
 }
 
-.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;
@@ -8690,7 +8639,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rh:"
             className="c11"
             fill="none"
             height="16px"
@@ -8719,17 +8667,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c12"
-            id=":rh:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
   </span>,
-  .c7 {
+  .c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8749,7 +8691,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c7 > * {
+.c6 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -8757,7 +8699,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c8 {
+.c7 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -8786,17 +8728,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.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 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -8813,7 +8745,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -8926,7 +8858,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c9 {
+.c8 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -8937,11 +8869,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c9:focus {
+.c8:focus {
   outline: 0;
 }
 
-.c10 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -8974,13 +8906,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c10: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));
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -9020,16 +8952,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c13:hover,
-.c13:focus {
+.c12:hover,
+.c12:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c13:active {
+.c12:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c11 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -9054,11 +8986,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c11:is(a,button,[tabIndex='0']) {
+.c10:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c11:is(a,button,[tabIndex='0']):after {
+.c10:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -9119,7 +9051,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":ri:"
             className="c5"
             fill="none"
             height="32px"
@@ -9153,25 +9084,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":ri:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <div
-      className="c7"
+      className="c6"
       display="flex"
     >
       <div
-        className="c8"
+        className="c7"
       >
         <input
           aria-invalid="false"
-          className="c9"
+          className="c8"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -9179,7 +9104,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9188,19 +9113,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9229,7 +9154,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9238,19 +9163,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9279,7 +9204,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9288,19 +9213,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9329,7 +9254,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9338,19 +9263,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9379,7 +9304,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9388,19 +9313,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9429,7 +9354,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9438,19 +9363,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9479,7 +9404,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9488,19 +9413,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9529,7 +9454,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9538,19 +9463,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9591,8 +9516,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rj:"
-            className="c14"
+            className="c13"
             fill="none"
             height="16px"
             sx={
@@ -9620,17 +9544,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":rj:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
   </span>,
-  .c7 {
+  .c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9650,7 +9568,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c7 > * {
+.c6 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -9658,7 +9576,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c8 {
+.c7 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -9687,17 +9605,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.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 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -9714,7 +9622,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -9827,7 +9735,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 12px;
 }
 
-.c9 {
+.c8 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -9838,11 +9746,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c9:focus {
+.c8:focus {
   outline: 0;
 }
 
-.c10 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -9875,13 +9783,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c10: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));
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -9921,16 +9829,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c13:hover,
-.c13:focus {
+.c12:hover,
+.c12:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c13:active {
+.c12:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c11 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -9955,11 +9863,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c11:is(a,button,[tabIndex='0']) {
+.c10:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c11:is(a,button,[tabIndex='0']):after {
+.c10:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -10020,7 +9928,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rk:"
             className="c5"
             fill="none"
             height="32px"
@@ -10054,25 +9961,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":rk:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <div
-      className="c7"
+      className="c6"
       display="flex"
     >
       <div
-        className="c8"
+        className="c7"
       >
         <input
           aria-invalid="false"
-          className="c9"
+          className="c8"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -10080,7 +9981,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10089,19 +9990,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10130,7 +10031,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10139,19 +10040,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10180,7 +10081,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10189,19 +10090,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10230,7 +10131,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10239,19 +10140,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10280,7 +10181,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10289,19 +10190,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10330,7 +10231,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10339,19 +10240,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10380,7 +10281,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10389,19 +10290,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10430,7 +10331,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10439,19 +10340,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10492,8 +10393,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rl:"
-            className="c14"
+            className="c13"
             fill="none"
             height="16px"
             sx={
@@ -10521,17 +10421,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":rl:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
   </span>,
-  .c7 {
+  .c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10551,7 +10445,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c7 > * {
+.c6 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -10559,7 +10453,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c8 {
+.c7 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -10588,17 +10482,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.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 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -10615,7 +10499,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -10728,7 +10612,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9 {
+.c8 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -10739,11 +10623,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c9:focus {
+.c8:focus {
   outline: 0;
 }
 
-.c10 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -10776,13 +10660,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c10: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));
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -10822,16 +10706,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c13:hover,
-.c13:focus {
+.c12:hover,
+.c12:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c13:active {
+.c12:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c11 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -10856,11 +10740,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c11:is(a,button,[tabIndex='0']) {
+.c10:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c11:is(a,button,[tabIndex='0']):after {
+.c10:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -10921,7 +10805,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rm:"
             className="c5"
             fill="none"
             height="32px"
@@ -10955,25 +10838,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":rm:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <div
-      className="c7"
+      className="c6"
       display="flex"
     >
       <div
-        className="c8"
+        className="c7"
       >
         <input
           aria-invalid="false"
-          className="c9"
+          className="c8"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -10981,7 +10858,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10990,19 +10867,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11031,7 +10908,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11040,19 +10917,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11081,7 +10958,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11090,19 +10967,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11131,7 +11008,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11140,19 +11017,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11181,7 +11058,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11190,19 +11067,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11231,7 +11108,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11240,19 +11117,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11281,7 +11158,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11290,19 +11167,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11331,7 +11208,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11340,19 +11217,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11393,8 +11270,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rn:"
-            className="c14"
+            className="c13"
             fill="none"
             height="16px"
             sx={
@@ -11422,12 +11298,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":rn:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
@@ -11489,16 +11359,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.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;
@@ -12233,7 +12093,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":ro:"
             className="c12"
             fill="none"
             height="32px"
@@ -12267,17 +12126,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c13"
-            id=":ro:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
   </span>,
-  .c6 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12297,7 +12150,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c6 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -12305,7 +12158,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -12330,27 +12183,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: inline-flex;
 }
 
-.c13 {
+.c12 {
   visibility: visible;
 }
 
-.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;
 }
 
-.c14 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -12361,7 +12204,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -12474,7 +12317,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -12485,11 +12328,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c8:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c9 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -12522,13 +12365,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9:hover {
+.c8:hover {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
   box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -12568,16 +12411,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c12:hover,
-.c12:focus {
+.c11:hover,
+.c11:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c12:active {
+.c11:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c10 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -12602,11 +12445,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c10:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c10:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -12642,7 +12485,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rp:"
             className="c4"
             fill="none"
             height="16px"
@@ -12671,25 +12513,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c5"
-            id=":rp:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <div
-      className="c6"
+      className="c5"
       display="flex"
     >
       <div
-        className="c7"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c8"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -12697,7 +12533,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12706,19 +12542,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12747,7 +12583,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12756,19 +12592,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12797,7 +12633,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12806,19 +12642,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12847,7 +12683,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12856,19 +12692,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12897,7 +12733,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12906,19 +12742,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12947,7 +12783,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12956,19 +12792,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12997,7 +12833,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13006,19 +12842,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13047,7 +12883,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c9"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13056,19 +12892,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c10"
+          className="c9"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c11"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c12"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13105,7 +12941,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c13"
+          className="c12"
         >
           <svg
             aria-hidden="true"
@@ -13134,8 +12970,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rq:"
-            className="c14"
+            className="c13"
             fill="none"
             height="32px"
             sx={
@@ -13168,12 +13003,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c5"
-            id=":rq:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
@@ -13235,16 +13064,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.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;
@@ -13979,7 +13798,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rr:"
             className="c12"
             fill="none"
             height="32px"
@@ -14013,17 +13831,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c13"
-            id=":rr:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
   </span>,
-  .c7 {
+  .c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14043,7 +13855,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c7 > * {
+.c6 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -14051,7 +13863,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c8 {
+.c7 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -14080,20 +13892,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.c14 {
+.c13 {
   visibility: visible;
 }
 
-.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;
@@ -14105,7 +13907,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c15 {
+.c14 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -14116,7 +13918,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -14236,7 +14038,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9 {
+.c8 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -14247,11 +14049,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c9:focus {
+.c8:focus {
   outline: 0;
 }
 
-.c10 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -14282,13 +14084,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c10: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));
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -14328,16 +14130,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 16px;
 }
 
-.c13:hover,
-.c13:focus {
+.c12:hover,
+.c12:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c13:active {
+.c12:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c11 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -14362,11 +14164,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c11:is(a,button,[tabIndex='0']) {
+.c10:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c11:is(a,button,[tabIndex='0']):after {
+.c10:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -14427,7 +14229,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rs:"
             className="c5"
             fill="none"
             height="32px"
@@ -14461,25 +14262,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":rs:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <div
-      className="c7"
+      className="c6"
       display="flex"
     >
       <div
-        className="c8"
+        className="c7"
       >
         <input
           aria-invalid="false"
-          className="c9"
+          className="c8"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -14487,7 +14282,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14496,19 +14291,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14537,7 +14332,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14546,19 +14341,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14587,7 +14382,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14596,19 +14391,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14637,7 +14432,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14646,19 +14441,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14687,7 +14482,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14696,19 +14491,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14737,7 +14532,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14746,19 +14541,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14787,7 +14582,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14796,19 +14591,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14837,7 +14632,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14846,19 +14641,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14895,7 +14690,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c14"
+          className="c13"
         >
           <svg
             aria-hidden="true"
@@ -14924,8 +14719,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rt:"
-            className="c15"
+            className="c14"
             fill="none"
             height="32px"
             sx={
@@ -14958,17 +14752,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":rt:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
   </span>,
-  .c7 {
+  .c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14988,7 +14776,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c7 > * {
+.c6 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -14996,7 +14784,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c8 {
+.c7 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -15025,20 +14813,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.c14 {
+.c13 {
   visibility: visible;
 }
 
-.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;
@@ -15050,7 +14828,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c15 {
+.c14 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -15061,7 +14839,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -15174,7 +14952,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9 {
+.c8 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -15185,11 +14963,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c9:focus {
+.c8:focus {
   outline: 0;
 }
 
-.c10 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -15222,13 +15000,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c10: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));
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -15268,16 +15046,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c13:hover,
-.c13:focus {
+.c12:hover,
+.c12:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c13:active {
+.c12:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c11 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -15302,11 +15080,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c11:is(a,button,[tabIndex='0']) {
+.c10:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c11:is(a,button,[tabIndex='0']):after {
+.c10:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -15367,7 +15145,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":ru:"
             className="c5"
             fill="none"
             height="32px"
@@ -15401,25 +15178,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":ru:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <div
-      className="c7"
+      className="c6"
       display="flex"
     >
       <div
-        className="c8"
+        className="c7"
       >
         <input
           aria-invalid="false"
-          className="c9"
+          className="c8"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -15427,7 +15198,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15436,19 +15207,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15477,7 +15248,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15486,19 +15257,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15527,7 +15298,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15536,19 +15307,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15577,7 +15348,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15586,19 +15357,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15627,7 +15398,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15636,19 +15407,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15677,7 +15448,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15686,19 +15457,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15727,7 +15498,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15736,19 +15507,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15777,7 +15548,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15786,19 +15557,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15835,7 +15606,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c14"
+          className="c13"
         >
           <svg
             aria-hidden="true"
@@ -15864,8 +15635,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":rv:"
-            className="c15"
+            className="c14"
             fill="none"
             height="32px"
             sx={
@@ -15898,17 +15668,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":rv:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
   </span>,
-  .c7 {
+  .c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15928,7 +15692,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c7 > * {
+.c6 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -15936,7 +15700,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c8 {
+.c7 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -15961,7 +15725,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: inline-flex;
 }
 
-.c14 {
+.c13 {
   visibility: hidden;
 }
 
@@ -15969,16 +15733,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.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;
@@ -15990,7 +15744,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c15 {
+.c14 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -16001,7 +15755,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -16114,7 +15868,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c9 {
+.c8 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -16125,11 +15879,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c9:focus {
+.c8:focus {
   outline: 0;
 }
 
-.c10 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -16160,13 +15914,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c10: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));
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -16206,16 +15960,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 24px;
 }
 
-.c13:hover,
-.c13:focus {
+.c12:hover,
+.c12:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c13:active {
+.c12:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c11 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -16240,11 +15994,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c11:is(a,button,[tabIndex='0']) {
+.c10:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c11:is(a,button,[tabIndex='0']):after {
+.c10:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -16305,7 +16059,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r10:"
             className="c5"
             fill="none"
             height="32px"
@@ -16339,25 +16092,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r10:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <div
-      className="c7"
+      className="c6"
       display="flex"
     >
       <div
-        className="c8"
+        className="c7"
       >
         <input
           aria-invalid="false"
-          className="c9"
+          className="c8"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -16365,7 +16112,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16374,19 +16121,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16415,7 +16162,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16424,19 +16171,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16465,7 +16212,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16474,19 +16221,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16515,7 +16262,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16524,19 +16271,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16565,7 +16312,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16574,19 +16321,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16615,7 +16362,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16624,19 +16371,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16665,7 +16412,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16674,19 +16421,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16715,7 +16462,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c10"
+        className="c9"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16724,19 +16471,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c11"
+          className="c10"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c12"
+          className="c11"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c13"
+          className="c12"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16773,7 +16520,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         display="flex"
       >
         <div
-          className="c14"
+          className="c13"
         >
           <svg
             aria-hidden="true"
@@ -16802,8 +16549,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r11:"
-            className="c15"
+            className="c14"
             fill="none"
             height="32px"
             sx={
@@ -16836,12 +16582,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r11:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
diff --git a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx
index ebda2227617..c51dff9cd2a 100644
--- a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx
+++ b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx
@@ -29,9 +29,10 @@ const TextInputInnerVisualSlot: React.FC<
 
   return (
     <span className="TextInput-icon">
-      <Box display="flex" position="relative">
+      <Box display="flex" position="relative" id={id}>
         {children && <Box sx={{visibility: showLoadingIndicator ? 'hidden' : 'visible'}}>{children}</Box>}
         <Spinner
+          srText={null}
           sx={
             children
               ? {

From 72001e8d074620411bef095a710d098c2cb39d0b Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 10 Sep 2024 12:44:19 -0400
Subject: [PATCH 08/17] Update changeset

---
 .changeset/five-windows-invent.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/five-windows-invent.md b/.changeset/five-windows-invent.md
index 657f3a4ea0f..a2bf85b1566 100644
--- a/.changeset/five-windows-invent.md
+++ b/.changeset/five-windows-invent.md
@@ -1,5 +1,5 @@
 ---
-'@primer/react': patch
+'@primer/react': minor
 ---
 
-Adds `aria-describedby` for `LeadingVisual` and `TrailingVisual` in `TextInput`
+Adds `aria-describedby` for `LeadingVisual` and `TrailingVisual` in `TextInput`; adds new prop `loaderText` to convey loading state to screen readers

From 40c9309b5d0f8f514b03858315323c52753d8600 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 16 Sep 2024 10:30:20 -0400
Subject: [PATCH 09/17] Update packages/react/src/TextInput/TextInput.tsx

Co-authored-by: Ian Sanders <iansan5653@github.com>
---
 packages/react/src/TextInput/TextInput.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 97995df43b3..2a04a1825aa 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -105,15 +105,12 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     const loadingId = useId()
 
     const inputDescribedBy =
-      [
+      clsx(
         inputProps['aria-describedby'],
         LeadingVisual && leadingVisualId,
         TrailingVisual && trailingVisualId,
         loading && loadingId,
-      ]
-        .filter(String)
-        .join(' ')
-        .trim() || undefined
+      )
 
     const handleInputFocus = useCallback(
       (e: React.FocusEvent<HTMLInputElement>) => {

From 1ebeb8b2423d8a7349ad1e56cc467046e25f8a3b Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 16 Sep 2024 15:10:43 +0000
Subject: [PATCH 10/17] Add `aria-hidden`

---
 .../src/internal/components/TextInputInnerVisualSlot.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx
index c51dff9cd2a..7f692e1bb83 100644
--- a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx
+++ b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx
@@ -21,14 +21,14 @@ const TextInputInnerVisualSlot: React.FC<
 
   if (!hasLoadingIndicator) {
     return (
-      <span className="TextInput-icon" id={id}>
+      <span className="TextInput-icon" id={id} aria-hidden="true">
         {children}
       </span>
     )
   }
 
   return (
-    <span className="TextInput-icon">
+    <span className="TextInput-icon" aria-hidden="true">
       <Box display="flex" position="relative" id={id}>
         {children && <Box sx={{visibility: showLoadingIndicator ? 'hidden' : 'visible'}}>{children}</Box>}
         <Spinner

From 95389fdb7370aaa273de92a4cb2d1e55d08b03f5 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 27 Sep 2024 10:32:12 -0400
Subject: [PATCH 11/17] Update docs note, test snapshots

---
 .../react/src/TextInput/TextInput.docs.json   |    2 +-
 .../__snapshots__/Autocomplete.test.tsx.snap  |    7 +
 .../__snapshots__/TextInput.test.tsx.snap     |   50 +-
 .../TextInputWithTokens.test.tsx.snap         | 4912 +----------------
 4 files changed, 340 insertions(+), 4631 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.docs.json b/packages/react/src/TextInput/TextInput.docs.json
index e8c65a0e369..3a23fed93c3 100644
--- a/packages/react/src/TextInput/TextInput.docs.json
+++ b/packages/react/src/TextInput/TextInput.docs.json
@@ -46,7 +46,7 @@
       "name": "loaderText",
       "type": "string",
       "defaultValue": "Loading",
-      "description": "Text for screen readers to convey the loading state, should be descriptive and explain what is loading"
+      "description": "Text for screen readers to convey the loading state, should be descriptive and explain what is loading. This prop should only be used if there is visible context explaining what is loading, to ensure that context is provided to all users."
     },
     {
       "name": "leadingVisual",
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index dba564118db..defe4d7cf61 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -123,6 +123,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
+      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -298,6 +299,7 @@ exports[`snapshots renders a loading state 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
+      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -561,6 +563,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
+      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -1400,6 +1403,7 @@ exports[`snapshots renders a multiselect input 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
+      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -2141,6 +2145,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
+      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -3037,6 +3042,7 @@ exports[`snapshots renders a single select input 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
+      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -4141,6 +4147,7 @@ exports[`snapshots renders with an input value 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
+      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 2e691e0b321..47f8ff9dcb8 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -120,6 +120,7 @@ exports[`TextInput renders 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -258,6 +259,7 @@ exports[`TextInput renders block 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -389,6 +391,7 @@ exports[`TextInput renders contrast 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -526,6 +529,7 @@ exports[`TextInput renders error 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=""
     aria-invalid="true"
     className="c2"
     data-component="input"
@@ -664,6 +668,7 @@ exports[`TextInput renders large 1`] = `
   size="large"
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -794,6 +799,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   onClick={[Function]}
 >
   <span
+    aria-hidden="true"
     className="TextInput-icon"
     id=":r15:"
   >
@@ -952,6 +958,7 @@ exports[`TextInput renders leadingVisual 2`] = `
   onClick={[Function]}
 >
   <span
+    aria-hidden="true"
     className="TextInput-icon"
     id=":r19:"
   >
@@ -1110,6 +1117,7 @@ exports[`TextInput renders leadingVisual 3`] = `
   onClick={[Function]}
 >
   <span
+    aria-hidden="true"
     className="TextInput-icon"
     id=":r1d:"
   >
@@ -1250,6 +1258,7 @@ exports[`TextInput renders leadingVisual 4`] = `
   onClick={[Function]}
 >
   <span
+    aria-hidden="true"
     className="TextInput-icon"
     id=":r1h:"
   >
@@ -1391,6 +1400,7 @@ exports[`TextInput renders monospace 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -1521,6 +1531,7 @@ exports[`TextInput renders placeholder 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -1661,6 +1672,7 @@ exports[`TextInput renders small 1`] = `
   size="small"
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -2234,6 +2246,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="search"
@@ -2246,8 +2259,8 @@ exports[`TextInput renders trailingAction icon button 1`] = `
     className="c3 TextInput-action"
   >
     <button
-      aria-describedby=":ro:-loading-announcement"
-      aria-labelledby=":rn:"
+      aria-describedby=":r2k:-loading-announcement"
+      aria-labelledby=":r2j:"
       className="c4 IconButton"
       data-block={null}
       data-component="IconButton"
@@ -2755,6 +2768,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="search"
@@ -3367,6 +3381,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="search"
@@ -3552,6 +3567,7 @@ exports[`TextInput renders trailingVisual 1`] = `
     type="text"
   />
   <span
+    aria-hidden="true"
     className="TextInput-icon"
     id=":r1m:"
   >
@@ -3710,6 +3726,7 @@ exports[`TextInput renders trailingVisual 2`] = `
     type="text"
   />
   <span
+    aria-hidden="true"
     className="TextInput-icon"
     id=":r1q:"
   >
@@ -3868,6 +3885,7 @@ exports[`TextInput renders trailingVisual 3`] = `
     type="text"
   />
   <span
+    aria-hidden="true"
     className="TextInput-icon"
     id=":r1u:"
   >
@@ -4008,6 +4026,7 @@ exports[`TextInput renders trailingVisual 4`] = `
     type="text"
   />
   <span
+    aria-hidden="true"
     className="TextInput-icon"
     id=":r22:"
   >
@@ -4189,6 +4208,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -4406,6 +4426,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -4458,6 +4479,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -4677,6 +4699,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -4903,6 +4926,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -4977,7 +5001,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-describedby=":r33:  :r35:"
+      aria-describedby=":r33: :r35:"
       className="c6"
       data-component="input"
       onBlur={[Function]}
@@ -4985,6 +5009,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -5211,6 +5236,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -5285,7 +5311,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-describedby=":r38:  :r3a:"
+      aria-describedby=":r38: :r3a:"
       className="c6"
       data-component="input"
       onBlur={[Function]}
@@ -5293,6 +5319,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -5519,6 +5546,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -5593,7 +5621,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-describedby=":r3d:  :r3f:"
+      aria-describedby=":r3d: :r3f:"
       className="c6"
       data-component="input"
       onBlur={[Function]}
@@ -5601,6 +5629,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -5829,6 +5858,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -6085,6 +6115,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -6137,6 +6168,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -6395,6 +6427,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -6669,6 +6702,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     size="small"
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -6751,6 +6785,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -7016,6 +7051,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -7098,6 +7134,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -7370,6 +7407,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
     size="large"
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -7452,6 +7490,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -7655,6 +7694,7 @@ exports[`TextInput should render a password input 1`] = `
   onClick={[Function]}
 >
   <input
+    aria-describedby=""
     className="c2"
     data-component="input"
     name="password"
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 25df1af6d6e..bc79f9ce503 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -305,6 +305,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   size="medium"
 >
   <span
+    aria-hidden="true"
     className="TextInput-icon"
   >
     <svg
@@ -747,6 +748,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
     </span>
   </div>
   <span
+    aria-hidden="true"
     className="TextInput-icon"
   >
     <svg
@@ -6613,11 +6615,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           zero
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -6663,11 +6665,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           one
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -6713,11 +6715,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           two
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -6763,11 +6765,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           three
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -6813,11 +6815,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           four
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -6863,11 +6865,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           five
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -6913,11 +6915,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           six
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -6963,11 +6965,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           seven
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -7001,6 +7003,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -7379,6 +7382,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -7451,11 +7455,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           zero
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -7501,11 +7505,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           one
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -7551,11 +7555,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           two
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -7601,11 +7605,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           three
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -7651,11 +7655,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           four
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -7701,11 +7705,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           five
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -7751,11 +7755,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           six
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -7801,11 +7805,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           seven
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -7839,6 +7843,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -8628,6 +8633,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -9015,6 +9021,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -9505,6 +9512,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -9544,17 +9552,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c5"
-            id=":rg:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
   </span>,
-  .c2 {
+  .c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9574,7 +9576,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c6 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -9582,7 +9584,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c7 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -9592,7 +9594,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c9 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9600,30 +9602,35 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c10 {
+.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.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;
+.c3 {
+  visibility: hidden;
 }
 
-.c11 {
+.c13 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: hidden;
+}
+
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
   visibility: visible;
+  left: 0;
 }
 
-.c7 {
+.c11 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -9708,8 +9715,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
+  padding-left: 12px;
+  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -9732,11 +9739,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+  padding-left: 0;
+  padding-right: 12px;
 }
 
-.c4 {
+.c8 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -9747,11 +9754,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c8:focus {
   outline: 0;
 }
 
-.c5 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -9784,13 +9791,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c5: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));
 }
 
-.c8 {
+.c12 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -9830,16 +9837,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c12:hover,
+.c12:focus {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
-.c8:active {
+.c12:active {
   background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
-.c6 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -9864,11 +9871,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c10:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c10:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -9892,4374 +9899,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     onClick={[Function]}
     size="medium"
   >
-    <div
-      className="c2"
-      display="flex"
+    <span
+      aria-hidden="true"
+      className="TextInput-icon"
     >
       <div
-        className="c3"
-      >
-        <input
-          aria-invalid="false"
-          className="c4"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          type="text"
-        />
-      </div>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
+        className="c2"
+        display="flex"
       >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          zero
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          one
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          two
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          three
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          four
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          five
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          six
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          seven
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c9"
-        display="flex"
-      >
-        <span
-          className="c10"
-        >
-          <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>
-          <span
-            className="c12"
-            id=":rh:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-  </span>,
-  .c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-left: -0.25rem;
-  margin-bottom: -0.25rem;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c7 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.c8 {
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c3 {
-  visibility: hidden;
-}
-
-.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;
-}
-
-.c5 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  max-width: 100%;
-  visibility: visible;
-  left: 0;
-}
-
-.c12 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c9 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c9:focus {
-  outline: 0;
-}
-
-.c10 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 999px;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-weight: 600;
-  font-family: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  position: relative;
-  white-space: nowrap;
-  font-size: 14px;
-  height: 32px;
-  line-height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
-  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
-  border-style: solid;
-  border-width: 1px;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  max-width: 100%;
-  padding-right: 0;
-}
-
-.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));
-}
-
-.c13 {
-  background-color: transparent;
-  font-family: inherit;
-  color: currentColor;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0;
-  -webkit-transform: translate(1px,-1px);
-  -ms-transform: translate(1px,-1px);
-  transform: translate(1px,-1px);
-  -webkit-align-self: baseline;
-  -ms-flex-item-align: baseline;
-  align-self: baseline;
-  border: 0;
-  border-radius: 999px;
-  margin-left: 8px;
-  height: 32px;
-  width: 32px;
-}
-
-.c13:hover,
-.c13:focus {
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
-}
-
-.c13:active {
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
-}
-
-.c11 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: transparent;
-  border: none;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: normal;
-  color: currentColor;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c11:is(a,button,[tabIndex='0']) {
-  cursor: pointer;
-}
-
-.c11:is(a,button,[tabIndex='0']):after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    className="c0 c1"
-    onClick={[Function]}
-    size="medium"
-  >
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <div
-          className="c3"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-mark-github"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-            />
-          </svg>
-        </div>
-        <span
-          className="c4"
-        >
-          <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>
-          <span
-            className="c6"
-            id=":ri:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-    <div
-      className="c7"
-      display="flex"
-    >
-      <div
-        className="c8"
-      >
-        <input
-          aria-invalid="false"
-          className="c9"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          type="text"
-        />
-      </div>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          zero
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          one
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          two
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          three
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          four
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          five
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          six
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          seven
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <span
-          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>
-          <span
-            className="c6"
-            id=":rj:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-  </span>,
-  .c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-left: -0.25rem;
-  margin-bottom: -0.25rem;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c7 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.c8 {
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c3 {
-  visibility: hidden;
-}
-
-.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;
-}
-
-.c5 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  max-width: 100%;
-  visibility: visible;
-  left: 0;
-}
-
-.c12 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c9 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c9:focus {
-  outline: 0;
-}
-
-.c10 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 999px;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-weight: 600;
-  font-family: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  position: relative;
-  white-space: nowrap;
-  font-size: 14px;
-  height: 32px;
-  line-height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
-  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
-  border-style: solid;
-  border-width: 1px;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  max-width: 100%;
-  padding-right: 0;
-}
-
-.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));
-}
-
-.c13 {
-  background-color: transparent;
-  font-family: inherit;
-  color: currentColor;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0;
-  -webkit-transform: translate(1px,-1px);
-  -ms-transform: translate(1px,-1px);
-  transform: translate(1px,-1px);
-  -webkit-align-self: baseline;
-  -ms-flex-item-align: baseline;
-  align-self: baseline;
-  border: 0;
-  border-radius: 999px;
-  margin-left: 8px;
-  height: 32px;
-  width: 32px;
-}
-
-.c13:hover,
-.c13:focus {
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
-}
-
-.c13:active {
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
-}
-
-.c11 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: transparent;
-  border: none;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: normal;
-  color: currentColor;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c11:is(a,button,[tabIndex='0']) {
-  cursor: pointer;
-}
-
-.c11:is(a,button,[tabIndex='0']):after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    className="c0 c1"
-    onClick={[Function]}
-    size="medium"
-  >
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <div
-          className="c3"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-mark-github"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-            />
-          </svg>
-        </div>
-        <span
-          className="c4"
-        >
-          <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>
-          <span
-            className="c6"
-            id=":rk:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-    <div
-      className="c7"
-      display="flex"
-    >
-      <div
-        className="c8"
-      >
-        <input
-          aria-invalid="false"
-          className="c9"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          type="text"
-        />
-      </div>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          zero
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          one
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          two
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          three
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          four
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          five
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          six
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          seven
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <span
-          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>
-          <span
-            className="c6"
-            id=":rl:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-  </span>,
-  .c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-left: -0.25rem;
-  margin-bottom: -0.25rem;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c7 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.c8 {
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c3 {
-  visibility: visible;
-}
-
-.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;
-}
-
-.c5 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  max-width: 100%;
-  visibility: hidden;
-  left: 0;
-}
-
-.c12 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c9 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c9:focus {
-  outline: 0;
-}
-
-.c10 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 999px;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-weight: 600;
-  font-family: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  position: relative;
-  white-space: nowrap;
-  font-size: 14px;
-  height: 32px;
-  line-height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
-  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
-  border-style: solid;
-  border-width: 1px;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  max-width: 100%;
-  padding-right: 0;
-}
-
-.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));
-}
-
-.c13 {
-  background-color: transparent;
-  font-family: inherit;
-  color: currentColor;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0;
-  -webkit-transform: translate(1px,-1px);
-  -ms-transform: translate(1px,-1px);
-  transform: translate(1px,-1px);
-  -webkit-align-self: baseline;
-  -ms-flex-item-align: baseline;
-  align-self: baseline;
-  border: 0;
-  border-radius: 999px;
-  margin-left: 8px;
-  height: 32px;
-  width: 32px;
-}
-
-.c13:hover,
-.c13:focus {
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
-}
-
-.c13:active {
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
-}
-
-.c11 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: transparent;
-  border: none;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: normal;
-  color: currentColor;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c11:is(a,button,[tabIndex='0']) {
-  cursor: pointer;
-}
-
-.c11:is(a,button,[tabIndex='0']):after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    className="c0 c1"
-    onClick={[Function]}
-    size="medium"
-  >
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <div
-          className="c3"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-mark-github"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-            />
-          </svg>
-        </div>
-        <span
-          className="c4"
-        >
-          <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>
-          <span
-            className="c6"
-            id=":rm:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-    <div
-      className="c7"
-      display="flex"
-    >
-      <div
-        className="c8"
-      >
-        <input
-          aria-invalid="false"
-          className="c9"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          type="text"
-        />
-      </div>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          zero
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          one
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          two
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          three
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          four
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          five
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          six
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c10"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c11"
-          onClick={[Function]}
-        >
-          seven
-          <span
-            className="c12"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c13"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <span
-          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>
-          <span
-            className="c6"
-            id=":rn:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-  </span>,
-  .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-left: -0.25rem;
-  margin-bottom: -0.25rem;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c2 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.c3 {
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c11 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c10 {
-  visibility: hidden;
-}
-
-.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;
-  top: 0;
-  height: 100%;
-  max-width: 100%;
-  visibility: visible;
-  right: 0;
-}
-
-.c7 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c4 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c4:focus {
-  outline: 0;
-}
-
-.c5 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 999px;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-weight: 600;
-  font-family: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  position: relative;
-  white-space: nowrap;
-  font-size: 14px;
-  height: 32px;
-  line-height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
-  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
-  border-style: solid;
-  border-width: 1px;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  max-width: 100%;
-  padding-right: 0;
-}
-
-.c5: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));
-}
-
-.c8 {
-  background-color: transparent;
-  font-family: inherit;
-  color: currentColor;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0;
-  -webkit-transform: translate(1px,-1px);
-  -ms-transform: translate(1px,-1px);
-  transform: translate(1px,-1px);
-  -webkit-align-self: baseline;
-  -ms-flex-item-align: baseline;
-  align-self: baseline;
-  border: 0;
-  border-radius: 999px;
-  margin-left: 8px;
-  height: 32px;
-  width: 32px;
-}
-
-.c8:hover,
-.c8:focus {
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
-}
-
-.c8:active {
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
-}
-
-.c6 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: transparent;
-  border: none;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: normal;
-  color: currentColor;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c6:is(a,button,[tabIndex='0']) {
-  cursor: pointer;
-}
-
-.c6:is(a,button,[tabIndex='0']):after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    className="c0 c1"
-    onClick={[Function]}
-    size="medium"
-  >
-    <div
-      className="c2"
-      display="flex"
-    >
-      <div
-        className="c3"
-      >
-        <input
-          aria-invalid="false"
-          className="c4"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          type="text"
-        />
-      </div>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          zero
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          one
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          two
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          three
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          four
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          five
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          six
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span
-        className="c5"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        size="xlarge"
-        tabIndex={0}
-      >
-        <span
-          className="c6"
-          onClick={[Function]}
-        >
-          seven
-          <span
-            className="c7"
-          >
-             (press backspace or delete to remove)
-          </span>
-        </span>
-        <span
-          aria-hidden="true"
-          className="c8"
-          onClick={[Function]}
-          size="xlarge"
-          tabIndex={-1}
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-x"
-            fill="currentColor"
-            focusable="false"
-            height={24}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 24 24"
-            width={24}
-          >
-            <path
-              d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c9"
-        display="flex"
-      >
-        <div
-          className="c10"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-mark-github"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-            />
-          </svg>
-        </div>
-        <span
-          className="c11"
-        >
-          <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>
-          <span
-            className="c13"
-            id=":ro:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-  </span>,
-  .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-left: -0.25rem;
-  margin-bottom: -0.25rem;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c6 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.c7 {
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c3 {
-  visibility: hidden;
-}
-
-.c13 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  max-width: 100%;
-  visibility: visible;
-  left: 0;
-}
-
-.c11 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c8 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c8:focus {
-  outline: 0;
-}
-
-.c9 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 999px;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-weight: 600;
-  font-family: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  position: relative;
-  white-space: nowrap;
-  font-size: 14px;
-  height: 32px;
-  line-height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
-  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
-  border-style: solid;
-  border-width: 1px;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  max-width: 100%;
-  padding-right: 0;
-}
-
-.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));
-}
-
-.c12 {
-  background-color: transparent;
-  font-family: inherit;
-  color: currentColor;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0;
-  -webkit-transform: translate(1px,-1px);
-  -ms-transform: translate(1px,-1px);
-  transform: translate(1px,-1px);
-  -webkit-align-self: baseline;
-  -ms-flex-item-align: baseline;
-  align-self: baseline;
-  border: 0;
-  border-radius: 999px;
-  margin-left: 8px;
-  height: 32px;
-  width: 32px;
-}
-
-.c12:hover,
-.c12:focus {
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
-}
-
-.c12:active {
-  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
-}
-
-.c10 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: transparent;
-  border: none;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: normal;
-  color: currentColor;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c10:is(a,button,[tabIndex='0']) {
-  cursor: pointer;
-}
-
-.c10:is(a,button,[tabIndex='0']):after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    className="c0 c1"
-    onClick={[Function]}
-    size="medium"
-  >
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <div
-          className="c3"
+        <div
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -14742,6 +10391,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -15129,6 +10779,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -15231,11 +10882,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           zero
-        </span>
-        <span
-          className="c11"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c11"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -15281,11 +10932,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           one
-        </span>
-        <span
-          className="c11"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c11"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -15331,11 +10982,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           two
-        </span>
-        <span
-          className="c11"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c11"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -15381,11 +11032,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           three
-        </span>
-        <span
-          className="c11"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c11"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -15431,11 +11082,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           four
-        </span>
-        <span
-          className="c11"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c11"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -15481,11 +11132,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           five
-        </span>
-        <span
-          className="c11"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c11"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -15531,11 +11182,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           six
-        </span>
-        <span
-          className="c11"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c11"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -15581,11 +11232,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           seven
-        </span>
-        <span
-          className="c11"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c11"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -15619,6 +11270,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -16417,6 +12069,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -16834,6 +12487,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -16906,11 +12560,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           zero
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -16956,11 +12610,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           one
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17006,11 +12660,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           two
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17056,11 +12710,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           three
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17106,11 +12760,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           four
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17156,11 +12810,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           five
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17206,11 +12860,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           six
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17256,11 +12910,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           seven
-        </span>
-        <span
-          className="c10"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c10"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17294,6 +12948,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -17734,11 +13389,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           zero
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17784,11 +13439,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           one
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17834,11 +13489,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           two
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17884,11 +13539,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           three
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17934,11 +13589,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           four
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -17984,11 +13639,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           five
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -18034,11 +13689,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           six
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -18084,11 +13739,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           onClick={[Function]}
         >
           seven
-        </span>
-        <span
-          className="c7"
-        >
-           (press backspace or delete to remove)
+          <span
+            className="c7"
+          >
+             (press backspace or delete to remove)
+          </span>
         </span>
         <span
           aria-hidden="true"
@@ -18122,6 +13777,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -18553,6 +14209,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="small"
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -18656,7 +14313,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           zero
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -18706,7 +14363,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           one
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -18756,7 +14413,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           two
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -18806,7 +14463,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           three
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -18856,7 +14513,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           four
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -18906,7 +14563,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           five
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -18956,7 +14613,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           six
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -19006,7 +14663,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           seven
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -19043,6 +14700,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -19469,6 +15127,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -19572,7 +15231,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           zero
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -19622,7 +15281,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           one
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -19672,7 +15331,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           two
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -19722,7 +15381,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           three
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -19772,7 +15431,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           four
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -19822,7 +15481,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           five
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -19872,7 +15531,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           six
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -19922,7 +15581,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           seven
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -19959,6 +15618,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -20383,6 +16043,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -20486,7 +16147,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           zero
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -20536,7 +16197,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           one
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -20586,7 +16247,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           two
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -20636,7 +16297,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           three
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -20686,7 +16347,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           four
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -20736,7 +16397,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           five
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -20786,7 +16447,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           six
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -20836,7 +16497,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         >
           seven
           <span
-            className="c12"
+            className="c11"
           >
              (press backspace or delete to remove)
           </span>
@@ -20873,6 +16534,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
+      aria-hidden="true"
       className="TextInput-icon"
     >
       <div

From f428305e0ab0fbc7ba12f4126bf72826c5cdf5be Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 27 Sep 2024 10:36:57 -0400
Subject: [PATCH 12/17] format

---
 packages/react/src/TextInput/TextInput.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 2a04a1825aa..56f0a9971db 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -104,13 +104,12 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     const trailingVisualId = useId()
     const loadingId = useId()
 
-    const inputDescribedBy =
-      clsx(
-        inputProps['aria-describedby'],
-        LeadingVisual && leadingVisualId,
-        TrailingVisual && trailingVisualId,
-        loading && loadingId,
-      )
+    const inputDescribedBy = clsx(
+      inputProps['aria-describedby'],
+      LeadingVisual && leadingVisualId,
+      TrailingVisual && trailingVisualId,
+      loading && loadingId,
+    )
 
     const handleInputFocus = useCallback(
       (e: React.FocusEvent<HTMLInputElement>) => {

From 4315e67002ffa68563bf0333f094bcf088bdd4ca Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 27 Sep 2024 11:15:30 -0400
Subject: [PATCH 13/17] Fix tests

---
 packages/react/src/TextInput/TextInput.tsx          | 13 +++++++------
 packages/react/src/__tests__/TextInput.test.tsx     |  4 ++--
 .../__snapshots__/Autocomplete.test.tsx.snap        |  7 -------
 .../__tests__/__snapshots__/TextInput.test.tsx.snap | 12 ------------
 4 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 56f0a9971db..5ef80532aeb 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -104,12 +104,13 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     const trailingVisualId = useId()
     const loadingId = useId()
 
-    const inputDescribedBy = clsx(
-      inputProps['aria-describedby'],
-      LeadingVisual && leadingVisualId,
-      TrailingVisual && trailingVisualId,
-      loading && loadingId,
-    )
+    const inputDescribedBy =
+      clsx(
+        inputProps['aria-describedby'],
+        LeadingVisual && leadingVisualId,
+        TrailingVisual && trailingVisualId,
+        loading && loadingId,
+      ) || undefined
 
     const handleInputFocus = useCallback(
       (e: React.FocusEvent<HTMLInputElement>) => {
diff --git a/packages/react/src/__tests__/TextInput.test.tsx b/packages/react/src/__tests__/TextInput.test.tsx
index 0e0608ef5dd..8632fa18046 100644
--- a/packages/react/src/__tests__/TextInput.test.tsx
+++ b/packages/react/src/__tests__/TextInput.test.tsx
@@ -246,7 +246,7 @@ describe('TextInput', () => {
     const Icon = () => <SearchIcon aria-label="Search" />
 
     const {getByRole} = HTMLRender(<TextInput leadingVisual={Icon} />)
-    const icon = getByRole('img')
+    const icon = getByRole('img', {hidden: true})
 
     expect(getByRole('textbox')).toHaveAttribute('aria-describedby', icon.parentElement?.id)
     expect(icon).toHaveAccessibleName('Search')
@@ -261,7 +261,7 @@ describe('TextInput', () => {
     const Icon = () => <SearchIcon aria-label="Search" />
 
     const {getByRole} = HTMLRender(<TextInput trailingVisual={Icon} />)
-    const icon = getByRole('img')
+    const icon = getByRole('img', {hidden: true})
 
     expect(getByRole('textbox')).toHaveAttribute('aria-describedby', icon.parentElement?.id)
     expect(icon).toHaveAccessibleName('Search')
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index defe4d7cf61..dba564118db 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -123,7 +123,6 @@ exports[`snapshots renders a custom empty state message 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
-      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -299,7 +298,6 @@ exports[`snapshots renders a loading state 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
-      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -563,7 +561,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
-      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -1403,7 +1400,6 @@ exports[`snapshots renders a multiselect input 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
-      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -2145,7 +2141,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
-      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -3042,7 +3037,6 @@ exports[`snapshots renders a single select input 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
-      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
@@ -4147,7 +4141,6 @@ exports[`snapshots renders with an input value 1`] = `
     <input
       aria-autocomplete="both"
       aria-controls="autocompleteId-listbox"
-      aria-describedby=""
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 47f8ff9dcb8..322e193c604 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -120,7 +120,6 @@ exports[`TextInput renders 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -259,7 +258,6 @@ exports[`TextInput renders block 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -391,7 +389,6 @@ exports[`TextInput renders contrast 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -529,7 +526,6 @@ exports[`TextInput renders error 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=""
     aria-invalid="true"
     className="c2"
     data-component="input"
@@ -668,7 +664,6 @@ exports[`TextInput renders large 1`] = `
   size="large"
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -1400,7 +1395,6 @@ exports[`TextInput renders monospace 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -1531,7 +1525,6 @@ exports[`TextInput renders placeholder 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -1672,7 +1665,6 @@ exports[`TextInput renders small 1`] = `
   size="small"
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="zipcode"
@@ -2246,7 +2238,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="search"
@@ -2768,7 +2759,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="search"
@@ -3381,7 +3371,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="search"
@@ -7694,7 +7683,6 @@ exports[`TextInput should render a password input 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-describedby=""
     className="c2"
     data-component="input"
     name="password"

From 265d7d5142890547fb12ca83ce5aacb64865b687 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 14 Oct 2024 13:11:23 +0000
Subject: [PATCH 14/17] Update snapshots again

---
 .../__snapshots__/TextInput.test.tsx.snap     | 1258 +++--------------
 .../TextInputWithTokens.test.tsx.snap         |   20 -
 2 files changed, 210 insertions(+), 1068 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index b6efa92318d..9a23cbb16db 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -4198,7 +4198,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      aria-hidden="true"
       className="TextInput-icon"
       data-testid="text-input-trailing-visual"
     >
@@ -4417,8 +4416,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
+      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -4470,8 +4469,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      aria-hidden="true"
       className="TextInput-icon"
+      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -4648,981 +4647,42 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c2:focus {
-  outline: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
-    onClick={[Function]}
-  >
-    <input
-      aria-describedby=":r31:"
-      className="c2"
-      data-component="input"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      type="text"
-    />
-    <span
-      aria-hidden="true"
-      className="TextInput-icon"
-    >
-      <div
-        className="c3"
-        display="flex"
-        id=":r30:"
-      >
-        <span
-          className="c4"
-        >
-          <svg
-            aria-hidden={true}
-            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>
-        </span>
-      </div>
-    </span>
-    <span
-      className="c6"
-      id=":r31:"
-    >
-      Loading
-    </span>
-  </span>,
-  .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c3 {
-  visibility: hidden;
-}
-
-.c7 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  max-width: 100%;
-  visibility: visible;
-  left: 0;
-}
-
-.c8 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c6 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c6:focus {
-  outline: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden="true"
-      className="TextInput-icon"
-      data-testid="text-input-leading-visual"
-    >
-      <div
-        className="c2"
-        display="flex"
-        id=":r33:"
-      >
-        <div
-          className="c3"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-search"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
-            />
-          </svg>
-        </div>
-        <span
-          className="c4"
-        >
-          <svg
-            aria-hidden={true}
-            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>
-        </span>
-      </div>
-    </span>
-    <input
-      aria-describedby=":r33: :r35:"
-      className="c6"
-      data-component="input"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      type="text"
-    />
-    <span
-      aria-hidden="true"
-      className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
-    >
-      <div
-        className="c2"
-        display="flex"
-        id=":r34:"
-      >
-        <span
-          className="c4"
-        >
-          <svg
-            aria-hidden={true}
-            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>
-        </span>
-      </div>
-    </span>
-    <span
-      className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
-    >
-      Loading
-    </span>
-  </span>,
-  .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c3 {
-  visibility: hidden;
-}
-
-.c7 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  max-width: 100%;
-  visibility: visible;
-  left: 0;
-}
-
-.c8 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c7:focus {
-  outline: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
-    onClick={[Function]}
-  >
-    <span
-      className="TextInput-icon"
-      data-testid="text-input-leading-visual"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <div
-          className="c3"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-search"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
-            />
-          </svg>
-        </div>
-        <span
-          className="c4"
-        >
-          <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>
-          <span
-            className="c6"
-            id=":ru:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-    <input
-      className="c7"
-      data-component="input"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      type="text"
-    />
-    <span
-      className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <span
-          className="c4"
-        >
-          <svg
-            aria-hidden={true}
-            aria-labelledby=":rv:"
-            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>
-          <span
-            className="c6"
-            id=":rv:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-  </span>,
-  .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c3 {
-  visibility: hidden;
-}
-
-.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;
-}
-
-.c5 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  max-width: 100%;
-  visibility: visible;
-  left: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c7:focus {
-  outline: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
-    onClick={[Function]}
-  >
-    <span
-      className="TextInput-icon"
-      data-testid="text-input-leading-visual"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <div
-          className="c3"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-search"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
-            />
-          </svg>
-        </div>
-        <span
-          className="c4"
-        >
-          <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": "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>
-          <span
-            className="c6"
-            id=":r10:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
     <input
-      className="c7"
+      aria-describedby=":r31:"
+      className="c2"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5633,21 +4693,21 @@ exports[`TextInput renders with a loading indicator 1`] = `
       data-testid="text-input-trailing-visual"
     >
       <div
-        className="c2"
+        className="c3"
         display="flex"
+        id=":r30:"
       >
         <span
           className="c4"
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r11:"
-            className="c8"
+            className="c5"
             fill="none"
             height="16px"
             sx={
               {
-                "visibility": "hidden",
+                "visibility": "visible",
               }
             }
             viewBox="0 0 16 16"
@@ -5670,15 +4730,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r11:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c6"
+      id=":r31:"
+    >
+      Loading
+    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -5696,23 +4756,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c3 {
-  visibility: visible;
-}
-
-.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;
+  visibility: hidden;
 }
 
-.c8 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
-  visibility: visible;
+  visibility: hidden;
 }
 
 .c5 {
@@ -5722,10 +4772,23 @@ exports[`TextInput renders with a loading indicator 1`] = `
   top: 0;
   height: 100%;
   max-width: 100%;
-  visibility: hidden;
+  visibility: visible;
   left: 0;
 }
 
+.c8 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -5795,7 +4858,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -5816,10 +4879,10 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c1 > input,
 .c1 > select {
   padding-left: 0;
-  padding-right: 0;
+  padding-right: 12px;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5829,7 +4892,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
@@ -5859,6 +4922,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r33:"
       >
         <div
           className="c3"
@@ -5890,7 +4954,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r12:"
             className="c5"
             fill="none"
             height="32px"
@@ -5901,7 +4964,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
                 "maxWidth": "100%",
                 "position": "absolute",
                 "top": 0,
-                "visibility": "hidden",
+                "visibility": "visible",
               }
             }
             viewBox="0 0 16 16"
@@ -5924,17 +4987,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r12:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
     <input
-      className="c7"
+      aria-describedby=":r33: :r35:"
+      className="c6"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5947,19 +5005,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
       <div
         className="c2"
         display="flex"
+        id=":r34:"
       >
         <span
           className="c4"
         >
           <svg
             aria-hidden={true}
-            aria-labelledby=":r13:"
-            className="c8"
+            className="c7"
             fill="none"
             height="16px"
             sx={
               {
-                "visibility": "visible",
+                "visibility": "hidden",
               }
             }
             viewBox="0 0 16 16"
@@ -5982,17 +5040,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <span
-            className="c6"
-            id=":r13:"
-          >
-            Loading
-          </span>
         </span>
       </div>
     </span>
+    <span
+      className="c8"
+      id=":r35:"
+    >
+      Loading
+    </span>
   </span>,
-  .c3 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6000,25 +5058,138 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c5 {
+.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c4 {
+.c3 {
   visibility: hidden;
 }
 
-.c7:not(:focus):not(:active):not(:focus-within) {
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
+.c7 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: hidden;
+}
+
+.c5 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  left: 0;
+}
+
+.c8 {
+  position: absolute;
+  width: 1px;
   height: 1px;
+  padding: 0;
+  margin: -1px;
   overflow: hidden;
-  position: absolute;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
   white-space: nowrap;
-  width: 1px;
+  border-width: 0;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
 }
 
 .c6 {
@@ -6055,9 +5226,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
+      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -6139,8 +5309,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      aria-hidden="true"
       className="TextInput-icon"
+      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -6366,7 +5536,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
       data-testid="text-input-leading-visual"
     >
@@ -6450,8 +5619,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      aria-hidden="true"
       className="TextInput-icon"
+      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -6495,8 +5664,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <span
-      className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
+      className="c8"
+      id=":r3f:"
     >
       Loading
     </span>
@@ -6679,7 +5848,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      aria-hidden="true"
       className="TextInput-icon"
       data-testid="text-input-trailing-visual"
     >
@@ -6937,8 +6105,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
+      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -6990,8 +6158,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      aria-hidden="true"
       className="TextInput-icon"
+      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -7249,8 +6417,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      aria-hidden="true"
       className="TextInput-icon"
+      data-testid="text-input-trailing-visual"
     >
       <div
         className="c3"
@@ -7524,7 +6692,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     size="small"
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
       data-testid="text-input-leading-visual"
     >
@@ -7608,7 +6775,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      aria-hidden="true"
       className="TextInput-icon"
       data-testid="text-input-trailing-visual"
     >
@@ -7875,7 +7041,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
       data-testid="text-input-leading-visual"
     >
@@ -7959,7 +7124,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      aria-hidden="true"
       className="TextInput-icon"
       data-testid="text-input-trailing-visual"
     >
@@ -8233,7 +7397,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     size="large"
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
       data-testid="text-input-leading-visual"
     >
@@ -8317,7 +7480,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       type="text"
     />
     <span
-      aria-hidden="true"
       className="TextInput-icon"
       data-testid="text-input-trailing-visual"
     >
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index bc79f9ce503..0cad504a1be 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -7003,7 +7003,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -7382,7 +7381,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -7843,7 +7841,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -8633,7 +8630,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -9021,7 +9017,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -9512,7 +9507,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -9900,7 +9894,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -10391,7 +10384,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -10779,7 +10771,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -11270,7 +11261,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -12069,7 +12059,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -12487,7 +12476,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -12948,7 +12936,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -13777,7 +13764,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -14209,7 +14195,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="small"
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -14700,7 +14685,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -15127,7 +15111,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -15618,7 +15601,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -16043,7 +16025,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
     size="medium"
   >
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div
@@ -16534,7 +16515,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </span>
     </div>
     <span
-      aria-hidden="true"
       className="TextInput-icon"
     >
       <div

From 12426a604c99f2824236eefa146822d3a0e01912 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Thu, 17 Oct 2024 15:20:12 +0000
Subject: [PATCH 15/17] Update snapshots again

---
 .../__snapshots__/TextInput.test.tsx.snap     | 876 +-----------------
 1 file changed, 25 insertions(+), 851 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 3b04d9dd79b..6250b624464 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -4416,7 +4416,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   >
     <span
       className="TextInput-icon"
-      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -4469,7 +4468,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     />
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -4689,7 +4687,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     />
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c3"
@@ -5041,632 +5038,10 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <span
-      className="TextInput-icon"
-    >
-      Loading
-    </span>
-  </span>,
-  .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c3 {
-  visibility: hidden;
-}
-
-.c7 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  visibility: hidden;
-}
-
-.c5 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  max-width: 100%;
-  visibility: visible;
-  left: 0;
-}
-
-.c8 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c7:focus {
-  outline: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
-    onClick={[Function]}
-  >
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <div
-          className="c3"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-search"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
-            />
-          </svg>
-        </div>
-        <span
-          className="c4"
-        >
-          <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>
-          <span
-            className="c6"
-            id=":ru:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-    <input
-      className="c7"
-      data-component="input"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      type="text"
-    />
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <span
-          className="c4"
-        >
-          <svg
-            aria-hidden={true}
-            aria-labelledby=":rv:"
-            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>
-          <span
-            className="c6"
-            id=":rv:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-  </span>,
-  .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c3 {
-  visibility: hidden;
-}
-
-.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;
-}
-
-.c5 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  max-width: 100%;
-  visibility: visible;
-  left: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c7:focus {
-  outline: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
-    onClick={[Function]}
-  >
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <div
-          className="c3"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-search"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
-            />
-          </svg>
-        </div>
-        <span
-          className="c4"
-        >
-          <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": "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>
-          <span
-            className="c6"
-            id=":r10:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-    <input
-      className="c7"
-      data-component="input"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      type="text"
-    />
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <span
-          className="c4"
-        >
-          <svg
-            aria-hidden={true}
-            aria-labelledby=":r11:"
-            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>
-          <span
-            className="c6"
-            id=":r11:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
+      className="c8"
+      id=":r35:"
+    >
+      Loading
     </span>
   </span>,
   .c2 {
@@ -5685,23 +5060,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c3 {
-  visibility: visible;
-}
-
-.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;
+  visibility: hidden;
 }
 
-.c8 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
-  visibility: visible;
+  visibility: hidden;
 }
 
 .c5 {
@@ -5711,10 +5076,23 @@ exports[`TextInput renders with a loading indicator 1`] = `
   top: 0;
   height: 100%;
   max-width: 100%;
-  visibility: hidden;
+  visibility: visible;
   left: 0;
 }
 
+.c8 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -5784,7 +5162,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -5805,207 +5183,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c1 > input,
 .c1 > select {
   padding-left: 0;
-  padding-right: 0;
-}
-
-.c7 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c7:focus {
-  outline: 0;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-<span
-    aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
-    onClick={[Function]}
-  >
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <div
-          className="c3"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-search"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
-            }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
-            />
-          </svg>
-        </div>
-        <span
-          className="c4"
-        >
-          <svg
-            aria-hidden={true}
-            aria-labelledby=":r12:"
-            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>
-          <span
-            className="c6"
-            id=":r12:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-    <input
-      className="c7"
-      data-component="input"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      type="text"
-    />
-    <span
-      className="TextInput-icon"
-    >
-      <div
-        className="c2"
-        display="flex"
-      >
-        <span
-          className="c4"
-        >
-          <svg
-            aria-hidden={true}
-            aria-labelledby=":r13:"
-            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>
-          <span
-            className="c6"
-            id=":r13:"
-          >
-            Loading
-          </span>
-        </span>
-      </div>
-    </span>
-  </span>,
-  .c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.c5 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c4 {
-  visibility: hidden;
-}
-
-.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;
+  padding-right: 12px;
 }
 
 .c6 {
@@ -6125,7 +5303,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     />
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -6434,7 +5611,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     />
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -6478,7 +5654,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <span
-      className="TextInput-icon"
+      className="c8"
+      id=":r3f:"
     >
       Loading
     </span>
@@ -6918,7 +6095,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   >
     <span
       className="TextInput-icon"
-      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -6971,7 +6147,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     />
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -7230,7 +6405,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     />
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c3"

From 5f690177c8ad829e50a2bd521494a8031bee84c2 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Thu, 17 Oct 2024 17:22:26 -0400
Subject: [PATCH 16/17] Move `visuallyhidden` span

---
 packages/react/src/TextInput/TextInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 8b0e5076779..e272f04887f 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -170,6 +170,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           aria-describedby={inputDescribedBy}
           data-component="input"
         />
+        {loading && <VisuallyHidden id={loadingId}>{loaderText}</VisuallyHidden>}
         <TextInputInnerVisualSlot
           visualPosition="trailing"
           showLoadingIndicator={showTrailingLoadingIndicator}
@@ -184,7 +185,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           )}
         </TextInputInnerVisualSlot>
         {trailingAction}
-        {loading && <VisuallyHidden id={loadingId}>{loaderText}</VisuallyHidden>}
       </TextInputWrapper>
     )
   },

From e9d65a230b791bd2809fa6a6ed9b7b7a224c0a82 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Thu, 17 Oct 2024 17:31:17 -0400
Subject: [PATCH 17/17] Update snapshots

---
 .../__snapshots__/TextInput.test.tsx.snap     | 272 +++++++++---------
 1 file changed, 136 insertions(+), 136 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 6250b624464..2c8c4fe8878 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -4029,7 +4029,7 @@ exports[`TextInput renders trailingVisual 4`] = `
 
 exports[`TextInput renders with a loading indicator 1`] = `
 [
-  .c3 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4037,20 +4037,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
+.c5 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c5 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c6 {
+.c3 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4197,20 +4197,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c3"
+      id=":r2o:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
       <div
-        className="c3"
+        className="c4"
         display="flex"
         id=":r2n:"
       >
         <span
-          className="c4"
+          className="c5"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c6"
             fill="none"
             height="16px"
             sx={
@@ -4241,12 +4247,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c6"
-      id=":r2o:"
-    >
-      Loading
-    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -4269,13 +4269,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.c6 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4466,6 +4466,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c6"
+      id=":r2s:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
@@ -4479,7 +4485,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            className="c6"
+            className="c7"
             fill="none"
             height="16px"
             sx={
@@ -4510,14 +4516,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c7"
-      id=":r2s:"
-    >
-      Loading
-    </span>
   </span>,
-  .c3 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4525,20 +4525,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
+.c5 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c5 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c6 {
+.c3 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4685,20 +4685,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c3"
+      id=":r31:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
       <div
-        className="c3"
+        className="c4"
         display="flex"
         id=":r30:"
       >
         <span
-          className="c4"
+          className="c5"
         >
           <svg
             aria-hidden={true}
-            className="c5"
+            className="c6"
             fill="none"
             height="16px"
             sx={
@@ -4729,12 +4735,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c6"
-      id=":r31:"
-    >
-      Loading
-    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -4755,7 +4755,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.c7 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -4772,7 +4772,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c8 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4993,6 +4993,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c7"
+      id=":r35:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
@@ -5006,7 +5012,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            className="c7"
+            className="c8"
             fill="none"
             height="16px"
             sx={
@@ -5037,12 +5043,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c8"
-      id=":r35:"
-    >
-      Loading
-    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -5063,7 +5063,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.c7 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -5080,7 +5080,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c8 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5301,6 +5301,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c7"
+      id=":r3a:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
@@ -5314,7 +5320,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            className="c7"
+            className="c8"
             fill="none"
             height="16px"
             sx={
@@ -5345,12 +5351,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c8"
-      id=":r3a:"
-    >
-      Loading
-    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -5371,7 +5371,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.c7 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -5388,7 +5388,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c8 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5609,6 +5609,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c7"
+      id=":r3f:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
@@ -5622,7 +5628,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            className="c7"
+            className="c8"
             fill="none"
             height="16px"
             sx={
@@ -5653,14 +5659,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c8"
-      id=":r3f:"
-    >
-      Loading
-    </span>
   </span>,
-  .c3 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5668,18 +5668,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c5 {
+.c6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c4 {
+.c5 {
   visibility: hidden;
 }
 
-.c6 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5690,7 +5690,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c7 {
+.c3 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5837,16 +5837,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c3"
+      id=":r3k:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
       <div
-        className="c3"
+        className="c4"
         display="flex"
         id=":r3j:"
       >
         <div
-          className="c4"
+          className="c5"
         >
           <svg
             aria-hidden="true"
@@ -5871,11 +5877,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c5"
+          className="c6"
         >
           <svg
             aria-hidden={true}
-            className="c6"
+            className="c7"
             fill="none"
             height="32px"
             sx={
@@ -5911,12 +5917,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c7"
-      id=":r3k:"
-    >
-      Loading
-    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -5933,7 +5933,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: inline-flex;
 }
 
-.c6 {
+.c7 {
   visibility: visible;
 }
 
@@ -5943,7 +5943,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: visible;
 }
 
-.c7 {
+.c8 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5954,7 +5954,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c8 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6145,6 +6145,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c6"
+      id=":r3o:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
@@ -6154,7 +6160,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r3n:"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <svg
             aria-hidden="true"
@@ -6183,7 +6189,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            className="c7"
+            className="c8"
             fill="none"
             height="32px"
             sx={
@@ -6219,14 +6225,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c8"
-      id=":r3o:"
-    >
-      Loading
-    </span>
   </span>,
-  .c3 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6234,18 +6234,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c5 {
+.c6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c4 {
+.c5 {
   visibility: hidden;
 }
 
-.c6 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6256,7 +6256,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c7 {
+.c3 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6403,16 +6403,22 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c3"
+      id=":r3t:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
       <div
-        className="c3"
+        className="c4"
         display="flex"
         id=":r3s:"
       >
         <div
-          className="c4"
+          className="c5"
         >
           <svg
             aria-hidden="true"
@@ -6437,11 +6443,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <span
-          className="c5"
+          className="c6"
         >
           <svg
             aria-hidden={true}
-            className="c6"
+            className="c7"
             fill="none"
             height="32px"
             sx={
@@ -6477,12 +6483,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c7"
-      id=":r3t:"
-    >
-      Loading
-    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -6503,7 +6503,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.c7 {
+.c8 {
   visibility: visible;
 }
 
@@ -6518,7 +6518,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c8 {
+.c9 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6529,7 +6529,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c9 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6759,6 +6759,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c7"
+      id=":r41:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
@@ -6768,7 +6774,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r40:"
       >
         <div
-          className="c7"
+          className="c8"
         >
           <svg
             aria-hidden="true"
@@ -6797,7 +6803,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            className="c8"
+            className="c9"
             fill="none"
             height="32px"
             sx={
@@ -6833,12 +6839,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c9"
-      id=":r41:"
-    >
-      Loading
-    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -6859,7 +6859,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   visibility: hidden;
 }
 
-.c7 {
+.c8 {
   visibility: visible;
 }
 
@@ -6874,7 +6874,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c8 {
+.c9 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6885,7 +6885,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c9 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -7106,6 +7106,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c7"
+      id=":r46:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
@@ -7115,7 +7121,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r45:"
       >
         <div
-          className="c7"
+          className="c8"
         >
           <svg
             aria-hidden="true"
@@ -7144,7 +7150,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            className="c8"
+            className="c9"
             fill="none"
             height="32px"
             sx={
@@ -7180,12 +7186,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c9"
-      id=":r46:"
-    >
-      Loading
-    </span>
   </span>,
   .c2 {
   display: -webkit-box;
@@ -7202,7 +7202,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: inline-flex;
 }
 
-.c7 {
+.c8 {
   visibility: hidden;
 }
 
@@ -7221,7 +7221,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c8 {
+.c9 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -7232,7 +7232,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   right: 0;
 }
 
-.c9 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -7460,6 +7460,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
       onFocus={[Function]}
       type="text"
     />
+    <span
+      className="c7"
+      id=":r4b:"
+    >
+      Loading
+    </span>
     <span
       className="TextInput-icon"
     >
@@ -7469,7 +7475,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         id=":r4a:"
       >
         <div
-          className="c7"
+          className="c8"
         >
           <svg
             aria-hidden="true"
@@ -7498,7 +7504,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         >
           <svg
             aria-hidden={true}
-            className="c8"
+            className="c9"
             fill="none"
             height="32px"
             sx={
@@ -7534,12 +7540,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
         </span>
       </div>
     </span>
-    <span
-      className="c9"
-      id=":r4b:"
-    >
-      Loading
-    </span>
   </span>,
 ]
 `;