diff --git a/.changeset/chubby-buses-greet.md b/.changeset/chubby-buses-greet.md
new file mode 100644
index 00000000000..d5df2a4554c
--- /dev/null
+++ b/.changeset/chubby-buses-greet.md
@@ -0,0 +1,6 @@
+---
+'@primer/react': major
+'@primer/styled-react': minor
+---
+
+Remove sx support from the Token component.
diff --git a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
index a3e0420f3ef..940998b6a58 100644
--- a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="zero"
>
-
zero
@@ -69,7 +69,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="one"
>
-
one
@@ -114,7 +114,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="two"
>
-
two
@@ -159,7 +159,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="three"
>
-
three
@@ -204,7 +204,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="four"
>
-
four
@@ -249,7 +249,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="five"
>
-
five
@@ -294,7 +294,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="six"
>
-
six
@@ -339,7 +339,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="seven"
>
-
seven
@@ -384,7 +384,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="zero"
>
-
zero
@@ -496,7 +496,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="one"
>
-
one
@@ -541,7 +541,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="two"
>
-
two
@@ -586,7 +586,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="three"
>
-
three
@@ -631,7 +631,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="four"
>
-
four
@@ -676,7 +676,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="five"
>
-
five
@@ -721,7 +721,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="six"
>
-
six
@@ -766,7 +766,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a leadingVisual and trailingVisual 1`] =
tabindex="-1"
text="seven"
>
-
seven
@@ -811,7 +811,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
>
(press backspace or delete to remove)
-
+
renders a truncated set of tokens 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -961,7 +961,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders a truncated set of tokens 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -1006,7 +1006,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders a truncated set of tokens 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -1082,7 +1082,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders a truncated set of tokens 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -1127,7 +1127,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="zero"
>
-
zero
@@ -1375,7 +1375,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="one"
>
-
one
@@ -1420,7 +1420,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="two"
>
-
two
@@ -1465,7 +1465,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="three"
>
-
three
@@ -1510,7 +1510,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="four"
>
-
four
@@ -1555,7 +1555,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="five"
>
-
five
@@ -1600,7 +1600,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="six"
>
-
six
@@ -1645,7 +1645,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="seven"
>
-
seven
@@ -1690,7 +1690,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="zero"
>
-
zero
@@ -1760,7 +1760,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="one"
>
-
one
@@ -1805,7 +1805,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="two"
>
-
two
@@ -1850,7 +1850,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="three"
>
-
three
@@ -1895,7 +1895,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="four"
>
-
four
@@ -1940,7 +1940,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="five"
>
-
five
@@ -1985,7 +1985,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="six"
>
-
six
@@ -2030,7 +2030,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders at a maximum height when specified 1`] =
tabindex="-1"
text="seven"
>
-
seven
@@ -2075,7 +2075,7 @@ exports[`TextInputWithTokens > renders at a maximum height when specified 1`] =
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -2204,7 +2204,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -2249,7 +2249,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -2294,7 +2294,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -2339,7 +2339,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -2384,7 +2384,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -2429,7 +2429,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -2474,7 +2474,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -2519,7 +2519,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -2587,7 +2587,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -2632,7 +2632,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -2677,7 +2677,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -2722,7 +2722,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -2767,7 +2767,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -2812,7 +2812,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -2857,7 +2857,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -2902,7 +2902,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 1`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -3031,7 +3031,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="one"
>
-
one
@@ -3076,7 +3076,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="two"
>
-
two
@@ -3121,7 +3121,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="three"
>
-
three
@@ -3166,7 +3166,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="four"
>
-
four
@@ -3211,7 +3211,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="five"
>
-
five
@@ -3256,7 +3256,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="six"
>
-
six
@@ -3301,7 +3301,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -3346,7 +3346,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -3413,7 +3413,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="one"
>
-
one
@@ -3458,7 +3458,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="two"
>
-
two
@@ -3503,7 +3503,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="three"
>
-
three
@@ -3548,7 +3548,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="four"
>
-
four
@@ -3593,7 +3593,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="five"
>
-
five
@@ -3638,7 +3638,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="six"
>
-
six
@@ -3683,7 +3683,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -3728,7 +3728,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -3796,7 +3796,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="one"
>
-
one
@@ -3841,7 +3841,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="two"
>
-
two
@@ -3886,7 +3886,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="three"
>
-
three
@@ -3931,7 +3931,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="four"
>
-
four
@@ -3976,7 +3976,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="five"
>
-
five
@@ -4021,7 +4021,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="six"
>
-
six
@@ -4066,7 +4066,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 2`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -4111,7 +4111,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 2`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -4240,7 +4240,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="one"
>
-
one
@@ -4285,7 +4285,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="two"
>
-
two
@@ -4330,7 +4330,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="three"
>
-
three
@@ -4375,7 +4375,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="four"
>
-
four
@@ -4420,7 +4420,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="five"
>
-
five
@@ -4465,7 +4465,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="six"
>
-
six
@@ -4510,7 +4510,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -4555,7 +4555,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -4622,7 +4622,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="one"
>
-
one
@@ -4667,7 +4667,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="two"
>
-
two
@@ -4712,7 +4712,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="three"
>
-
three
@@ -4757,7 +4757,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="four"
>
-
four
@@ -4802,7 +4802,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="five"
>
-
five
@@ -4847,7 +4847,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="six"
>
-
six
@@ -4892,7 +4892,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -4937,7 +4937,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -5004,7 +5004,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="one"
>
-
one
@@ -5049,7 +5049,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="two"
>
-
two
@@ -5094,7 +5094,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="three"
>
-
three
@@ -5139,7 +5139,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="four"
>
-
four
@@ -5184,7 +5184,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="five"
>
-
five
@@ -5229,7 +5229,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="six"
>
-
six
@@ -5274,7 +5274,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -5319,7 +5319,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -5387,7 +5387,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="one"
>
-
one
@@ -5432,7 +5432,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="two"
>
-
two
@@ -5477,7 +5477,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="three"
>
-
three
@@ -5522,7 +5522,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="four"
>
-
four
@@ -5567,7 +5567,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="five"
>
-
five
@@ -5612,7 +5612,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="six"
>
-
six
@@ -5657,7 +5657,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 3`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -5702,7 +5702,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 3`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -5831,7 +5831,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="one"
>
-
one
@@ -5876,7 +5876,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="two"
>
-
two
@@ -5921,7 +5921,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="three"
>
-
three
@@ -5966,7 +5966,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="four"
>
-
four
@@ -6011,7 +6011,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="five"
>
-
five
@@ -6056,7 +6056,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="six"
>
-
six
@@ -6101,7 +6101,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -6146,7 +6146,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -6213,7 +6213,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="one"
>
-
one
@@ -6258,7 +6258,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="two"
>
-
two
@@ -6303,7 +6303,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="three"
>
-
three
@@ -6348,7 +6348,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="four"
>
-
four
@@ -6393,7 +6393,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="five"
>
-
five
@@ -6438,7 +6438,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="six"
>
-
six
@@ -6483,7 +6483,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -6528,7 +6528,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -6595,7 +6595,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="one"
>
-
one
@@ -6640,7 +6640,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="two"
>
-
two
@@ -6685,7 +6685,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="three"
>
-
three
@@ -6730,7 +6730,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="four"
>
-
four
@@ -6775,7 +6775,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="five"
>
-
five
@@ -6820,7 +6820,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="six"
>
-
six
@@ -6865,7 +6865,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -6910,7 +6910,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -6977,7 +6977,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="one"
>
-
one
@@ -7022,7 +7022,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="two"
>
-
two
@@ -7067,7 +7067,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="three"
>
-
three
@@ -7112,7 +7112,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="four"
>
-
four
@@ -7157,7 +7157,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="five"
>
-
five
@@ -7202,7 +7202,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="six"
>
-
six
@@ -7247,7 +7247,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -7292,7 +7292,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -7360,7 +7360,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="one"
>
-
one
@@ -7405,7 +7405,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="two"
>
-
two
@@ -7450,7 +7450,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="three"
>
-
three
@@ -7495,7 +7495,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="four"
>
-
four
@@ -7540,7 +7540,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="five"
>
-
five
@@ -7585,7 +7585,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="six"
>
-
six
@@ -7630,7 +7630,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens at the specified sizes 4`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -7675,7 +7675,7 @@ exports[`TextInputWithTokens > renders tokens at the specified sizes 4`] = `
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="zero"
>
-
zero
@@ -7805,7 +7805,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="one"
>
-
one
@@ -7850,7 +7850,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="two"
>
-
two
@@ -7895,7 +7895,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="three"
>
-
three
@@ -7940,7 +7940,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="four"
>
-
four
@@ -7985,7 +7985,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="five"
>
-
five
@@ -8030,7 +8030,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="six"
>
-
six
@@ -8075,7 +8075,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="seven"
>
-
seven
@@ -8120,7 +8120,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="zero"
>
-
zero
@@ -8189,7 +8189,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="one"
>
-
one
@@ -8234,7 +8234,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="two"
>
-
two
@@ -8279,7 +8279,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="three"
>
-
three
@@ -8324,7 +8324,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="four"
>
-
four
@@ -8369,7 +8369,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="five"
>
-
five
@@ -8414,7 +8414,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="six"
>
-
six
@@ -8459,7 +8459,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders tokens on a single line when specified 1`
tabindex="-1"
text="seven"
>
-
seven
@@ -8504,7 +8504,7 @@ exports[`TextInputWithTokens > renders tokens on a single line when specified 1`
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -9077,7 +9077,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -9122,7 +9122,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -9167,7 +9167,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -9212,7 +9212,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -9257,7 +9257,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -9302,7 +9302,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -9347,7 +9347,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -9392,7 +9392,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -9532,7 +9532,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -9577,7 +9577,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -9622,7 +9622,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -9667,7 +9667,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -9712,7 +9712,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -9757,7 +9757,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -9802,7 +9802,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -9847,7 +9847,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -9950,7 +9950,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -9995,7 +9995,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -10040,7 +10040,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -10085,7 +10085,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -10130,7 +10130,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -10175,7 +10175,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -10220,7 +10220,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -10265,7 +10265,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -10425,7 +10425,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -10470,7 +10470,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -10515,7 +10515,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -10560,7 +10560,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -10605,7 +10605,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -10650,7 +10650,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -10695,7 +10695,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -10740,7 +10740,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -10900,7 +10900,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -10945,7 +10945,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -10990,7 +10990,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -11035,7 +11035,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -11080,7 +11080,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -11125,7 +11125,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -11170,7 +11170,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -11215,7 +11215,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -11376,7 +11376,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -11421,7 +11421,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -11466,7 +11466,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -11511,7 +11511,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -11556,7 +11556,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -11601,7 +11601,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -11646,7 +11646,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -11691,7 +11691,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -11794,7 +11794,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -11839,7 +11839,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -11884,7 +11884,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -11929,7 +11929,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -11974,7 +11974,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -12019,7 +12019,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -12064,7 +12064,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -12109,7 +12109,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -12270,7 +12270,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -12315,7 +12315,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -12360,7 +12360,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -12405,7 +12405,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -12450,7 +12450,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -12495,7 +12495,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -12540,7 +12540,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -12585,7 +12585,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -12708,7 +12708,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -12753,7 +12753,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -12798,7 +12798,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -12843,7 +12843,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -12888,7 +12888,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -12933,7 +12933,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -12978,7 +12978,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -13023,7 +13023,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -13204,7 +13204,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -13249,7 +13249,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -13294,7 +13294,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -13339,7 +13339,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -13384,7 +13384,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -13429,7 +13429,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -13474,7 +13474,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -13519,7 +13519,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -13700,7 +13700,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -13745,7 +13745,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -13790,7 +13790,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -13835,7 +13835,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -13880,7 +13880,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -13925,7 +13925,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -13970,7 +13970,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -14015,7 +14015,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -14196,7 +14196,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -14241,7 +14241,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -14286,7 +14286,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -14331,7 +14331,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -14376,7 +14376,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -14421,7 +14421,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -14466,7 +14466,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -14511,7 +14511,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -14637,7 +14637,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -14682,7 +14682,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -14727,7 +14727,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -14772,7 +14772,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -14817,7 +14817,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -14862,7 +14862,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -14907,7 +14907,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -14952,7 +14952,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -15092,7 +15092,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -15137,7 +15137,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -15182,7 +15182,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -15227,7 +15227,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -15272,7 +15272,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -15317,7 +15317,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -15362,7 +15362,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -15407,7 +15407,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -15510,7 +15510,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -15555,7 +15555,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -15600,7 +15600,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -15645,7 +15645,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -15690,7 +15690,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -15735,7 +15735,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -15780,7 +15780,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -15825,7 +15825,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -15985,7 +15985,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -16030,7 +16030,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -16075,7 +16075,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -16120,7 +16120,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -16165,7 +16165,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -16210,7 +16210,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -16255,7 +16255,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -16300,7 +16300,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -16460,7 +16460,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -16505,7 +16505,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -16550,7 +16550,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -16595,7 +16595,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -16640,7 +16640,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -16685,7 +16685,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -16730,7 +16730,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -16775,7 +16775,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -16936,7 +16936,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -16981,7 +16981,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -17026,7 +17026,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -17071,7 +17071,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -17116,7 +17116,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -17161,7 +17161,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -17206,7 +17206,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -17251,7 +17251,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -17354,7 +17354,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -17399,7 +17399,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -17444,7 +17444,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -17489,7 +17489,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -17534,7 +17534,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -17579,7 +17579,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -17624,7 +17624,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -17669,7 +17669,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -17830,7 +17830,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -17875,7 +17875,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -17920,7 +17920,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -17965,7 +17965,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -18010,7 +18010,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -18055,7 +18055,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -18100,7 +18100,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -18145,7 +18145,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -18268,7 +18268,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -18313,7 +18313,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -18358,7 +18358,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -18403,7 +18403,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -18448,7 +18448,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -18493,7 +18493,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -18538,7 +18538,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -18583,7 +18583,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -18764,7 +18764,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -18809,7 +18809,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -18854,7 +18854,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -18899,7 +18899,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -18944,7 +18944,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -18989,7 +18989,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -19034,7 +19034,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -19079,7 +19079,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -19260,7 +19260,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -19305,7 +19305,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -19350,7 +19350,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -19395,7 +19395,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -19440,7 +19440,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -19485,7 +19485,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -19530,7 +19530,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -19575,7 +19575,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -19756,7 +19756,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -19801,7 +19801,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -19846,7 +19846,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -19891,7 +19891,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -19936,7 +19936,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -19981,7 +19981,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -20026,7 +20026,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with a loading indicator 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -20071,7 +20071,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -20257,7 +20257,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -20302,7 +20302,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -20347,7 +20347,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -20392,7 +20392,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -20437,7 +20437,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -20482,7 +20482,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -20527,7 +20527,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -20572,7 +20572,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="zero"
>
-
zero
@@ -20640,7 +20640,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="one"
>
-
one
@@ -20685,7 +20685,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="two"
>
-
two
@@ -20730,7 +20730,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="three"
>
-
three
@@ -20775,7 +20775,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="four"
>
-
four
@@ -20820,7 +20820,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="five"
>
-
five
@@ -20865,7 +20865,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="six"
>
-
six
@@ -20910,7 +20910,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens 1`] = `
tabindex="-1"
text="seven"
>
-
seven
@@ -20955,7 +20955,7 @@ exports[`TextInputWithTokens > renders with tokens 1`] = `
>
(press backspace or delete to remove)
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="zero"
>
-
zero
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="one"
>
-
one
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="two"
>
-
two
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="three"
>
-
three
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="four"
>
-
four
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="five"
>
-
five
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="six"
>
-
six
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="seven"
>
-
seven
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="zero"
>
-
zero
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="one"
>
-
one
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="two"
>
-
two
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="three"
>
-
three
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="four"
>
-
four
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="five"
>
-
five
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="six"
>
-
six
-
+
renders with tokens using a custom token componen
tabindex="-1"
text="seven"
>
-
seven
-
+
-export const DevDefault = () =>
+export const DevDefault = () =>
diff --git a/packages/react/src/Token/Token.docs.json b/packages/react/src/Token/Token.docs.json
index 015b301ef84..ba6a2bdc11a 100644
--- a/packages/react/src/Token/Token.docs.json
+++ b/packages/react/src/Token/Token.docs.json
@@ -80,11 +80,6 @@
"name": "size",
"type": "'small' | 'medium' | 'large' | 'xlarge'",
"description": "Which size the token will be rendered at"
- },
- {
- "name": "sx",
- "type": "SystemStyleObject",
- "deprecated": true
}
],
"subcomponents": [
@@ -131,11 +126,6 @@
"name": "size",
"type": "'small' | 'medium' | 'large' | 'xlarge'",
"description": "Which size the token will be rendered at"
- },
- {
- "name": "sx",
- "type": "SystemStyleObject",
- "deprecated": true
}
]
}
diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx
index 51b2660df8e..b89f6b0d9c7 100644
--- a/packages/react/src/Token/Token.tsx
+++ b/packages/react/src/Token/Token.tsx
@@ -1,7 +1,6 @@
import type {MouseEventHandler} from 'react'
import type React from 'react'
import {forwardRef} from 'react'
-import {type SxProp} from '../sx'
import type {TokenBaseProps} from './TokenBase'
import TokenBase, {defaultTokenSize, isTokenInteractive} from './TokenBase'
import RemoveTokenButton from './_RemoveTokenButton'
@@ -14,7 +13,7 @@ import {clsx} from 'clsx'
// Omitting onResize and onResizeCapture because seems like React 18 types includes these menthod in the expansion but React 17 doesn't.
// TODO: This is a temporary solution until we figure out why these methods are causing type errors.
-export interface TokenProps extends TokenBaseProps, SxProp {
+export interface TokenProps extends TokenBaseProps {
/**
* A component that renders before the token text
*/
@@ -58,7 +57,6 @@ const Token = forwardRef((props, forwardedRef) => {
href,
onClick,
}
-
return (
(
(
- {onRemove, onKeyDown, id, className, size = defaultTokenSize, isSelected: _isSelected, as = 'span', ...rest},
+ {
+ onRemove,
+ onKeyDown,
+ id,
+ className,
+ size = defaultTokenSize,
+ isSelected: _isSelected,
+ as: Component = 'span',
+ ...rest
+ },
forwardedRef,
) => {
return (
- ) => {
onKeyDown && onKeyDown(event)
@@ -79,14 +85,27 @@ const TokenBase = React.forwardRef)
+ : Component === 'a'
+ ? (rest as React.AnchorHTMLAttributes)
+ : (rest as React.HTMLAttributes))}
+ // TypeScript cannot resolve polymorphic ref types at compile time
+ // This assertion is safe because the ref will match the actual rendered element
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ ref={forwardedRef as any}
/>
)
},
-) as PolymorphicForwardRefComponent<'span' | 'a' | 'button', TokenBaseProps & SxProp>
+) as PolymorphicForwardRefComponent<'span' | 'a' | 'button', TokenBaseProps>
export default TokenBase
diff --git a/packages/react/src/Token/_RemoveTokenButton.tsx b/packages/react/src/Token/_RemoveTokenButton.tsx
index 6d1d3ad461c..07febdd8b84 100644
--- a/packages/react/src/Token/_RemoveTokenButton.tsx
+++ b/packages/react/src/Token/_RemoveTokenButton.tsx
@@ -1,14 +1,12 @@
import type React from 'react'
import {XIcon} from '@primer/octicons-react'
import {clsx} from 'clsx'
-import {type SxProp} from '../sx'
import type {TokenSizeKeys} from './TokenBase'
import {tokenSizes, defaultTokenSize} from './TokenBase'
import classes from './_RemoveTokenButton.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
-interface TokenButtonProps extends SxProp {
+interface TokenButtonProps {
borderOffset?: number
size?: TokenSizeKeys
isParentInteractive?: boolean
@@ -29,20 +27,37 @@ const RemoveTokenButton = ({
}: React.PropsWithChildren) => {
// eslint-disable-next-line react-compiler/react-compiler
delete rest.children
+ if (isParentInteractive) {
+ return (
+
+
+
+ )
+ }
+
return (
- }
+ type="button"
>
-
+
)
}
diff --git a/packages/react/src/Token/_TokenTextContainer.tsx b/packages/react/src/Token/_TokenTextContainer.tsx
index aa032b4d7b6..232a9be1900 100644
--- a/packages/react/src/Token/_TokenTextContainer.tsx
+++ b/packages/react/src/Token/_TokenTextContainer.tsx
@@ -2,13 +2,25 @@ import type {TokenBaseProps} from './TokenBase'
import type React from 'react'
import classes from './_TokenTextContainer.module.css'
import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
-const TokenTextContainer = ({children, ...props}: React.PropsWithChildren>) => {
+const TokenTextContainer = ({
+ children,
+ id,
+ as: Component = 'span',
+ ...props
+}: React.PropsWithChildren>) => {
return (
-
+ )
+ : Component === 'a'
+ ? (props as React.AnchorHTMLAttributes)
+ : (props as React.HTMLAttributes))}
+ >
{children}
-
+
)
}
diff --git a/packages/react/src/Token/__tests__/Token.types.test.tsx b/packages/react/src/Token/__tests__/Token.types.test.tsx
index 99dbcdea799..7673307d209 100644
--- a/packages/react/src/Token/__tests__/Token.types.test.tsx
+++ b/packages/react/src/Token/__tests__/Token.types.test.tsx
@@ -70,17 +70,6 @@ export function allowsOnResizeProps() {
return {}} onResizeCapture={() => {}} />
}
-export function allowsSxProp() {
- return (
-
- )
-}
-
export function hasReasonableEventsForTargets() {
const handleButtonClick: React.MouseEventHandler = _event => {}
const handleAnchorClick: React.MouseEventHandler = _event => {}
diff --git a/packages/styled-react/src/components/Token.tsx b/packages/styled-react/src/components/Token.tsx
new file mode 100644
index 00000000000..2564a1e5ff1
--- /dev/null
+++ b/packages/styled-react/src/components/Token.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import {
+ type TokenProps as PrimerTokenProps,
+ type SxProp,
+ Token as PrimerToken,
+ useTheme,
+ theme as defaultTheme,
+} from '@primer/react'
+import css from '@styled-system/css'
+import type {ForwardRefComponent} from '../polymorphic'
+import type {PropsWithChildren} from 'react'
+
+type TokenProps = PropsWithChildren & SxProp
+
+const Token: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = React.forwardRef(
+ ({sx: sxProp, style, ...rest}, ref) => {
+ const contextTheme = useTheme()
+ const theme = contextTheme?.theme || defaultTheme
+
+ // If no sx prop is provided, just return PrimerToken directly
+ if (!sxProp) {
+ return
+ }
+
+ // Convert sx to CSS styles using the theme context
+ const sxStyles = css(sxProp)(theme)
+ const mergedStyle = {...sxStyles, ...style}
+
+ return
+ },
+) as ForwardRefComponent<'a' | 'button' | 'span', TokenProps>
+
+export {Token, type TokenProps}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 709b9ad6f4f..830f612f911 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -10,10 +10,8 @@ export {Select} from '@primer/react'
export {Text} from '@primer/react'
export {Textarea} from '@primer/react'
export {TextInput} from '@primer/react'
-export {Token} from '@primer/react'
export {Tooltip} from '@primer/react'
export {type TextInputProps} from '@primer/react'
-export {type TokenProps} from '@primer/react'
// theming depends on styled-components
export {ThemeProvider} from '@primer/react'
@@ -66,6 +64,7 @@ export {
type TimelineBreakProps,
} from './components/Timeline'
export {ToggleSwitch, type ToggleSwitchProps} from './components/ToggleSwitch'
+export {Token, type TokenProps} from './components/Token'
export {Truncate, type TruncateProps} from './components/Truncate'
export {UnderlineNav, type UnderlineNavProps, type UnderlineNavItemProps} from './components/UnderlineNav'