diff --git a/.changeset/loud-schools-own.md b/.changeset/loud-schools-own.md
new file mode 100644
index 00000000000..068d42c986a
--- /dev/null
+++ b/.changeset/loud-schools-own.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix `TextInput` types
diff --git a/src/Autocomplete/AutocompleteInput.tsx b/src/Autocomplete/AutocompleteInput.tsx
index b34eda1ffe6..db31ba51ee2 100644
--- a/src/Autocomplete/AutocompleteInput.tsx
+++ b/src/Autocomplete/AutocompleteInput.tsx
@@ -166,7 +166,7 @@ const AutocompleteInput = React.forwardRef(
         aria-expanded={showMenu}
         aria-haspopup="listbox"
         aria-owns={`${id}-listbox`}
-        autocomplete="off"
+        autoComplete="off"
         id={id}
         {...props}
       />
diff --git a/src/TextInput.tsx b/src/TextInput.tsx
index bce41f70637..6c1a21d8e6d 100644
--- a/src/TextInput.tsx
+++ b/src/TextInput.tsx
@@ -1,25 +1,34 @@
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
 import classnames from 'classnames'
 import React from 'react'
-import {ComponentProps, Merge} from './utils/types'
+import {Merge} from './utils/types'
+import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper'
 import UnstyledTextInput from './_UnstyledTextInput'
-import TextInputWrapper from './_TextInputWrapper'
 
 type NonPassthroughProps = {
-  className?: string
   /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
   icon?: React.ComponentType<{className?: string}>
   leadingVisual?: string | React.ComponentType<{className?: string}>
   trailingVisual?: string | React.ComponentType<{className?: string}>
 } & Pick<
-  ComponentProps<typeof TextInputWrapper>,
-  'block' | 'contrast' | 'disabled' | 'monospace' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size'
+  StyledWrapperProps,
+  | 'block'
+  | 'contrast'
+  | 'disabled'
+  | 'monospace'
+  | 'sx'
+  | 'width'
+  | 'maxWidth'
+  | 'minWidth'
+  | 'variant'
+  | 'size'
+  | 'validationStatus'
 >
 
-// Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
-type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>
+export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, NonPassthroughProps>
 
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
-const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
+const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
   (
     {
       icon: IconComponent,
@@ -78,7 +87,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
       </TextInputWrapper>
     )
   }
-)
+) as PolymorphicForwardRefComponent<'input', TextInputProps>
 
 TextInput.defaultProps = {
   type: 'text'
@@ -86,5 +95,4 @@ TextInput.defaultProps = {
 
 TextInput.displayName = 'TextInput'
 
-export type TextInputProps = ComponentProps<typeof TextInput>
 export default TextInput
diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx
index d3812497332..f43c19f606f 100644
--- a/src/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens.tsx
@@ -1,25 +1,24 @@
-import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject, useRef, useState} from 'react'
-import {omit} from '@styled-system/props'
 import {FocusKeys} from '@primer/behaviors'
+import {isFocusable} from '@primer/behaviors/utils'
+import {omit} from '@styled-system/props'
+import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject, useRef, useState} from 'react'
+import Box from './Box'
+import {useProvidedRefOrCreate} from './hooks'
 import {useCombinedRefs} from './hooks/useCombinedRefs'
 import {useFocusZone} from './hooks/useFocusZone'
-import {ComponentProps} from './utils/types'
+import Text from './Text'
+import {TextInputProps} from './TextInput'
 import Token from './Token/Token'
 import {TokenSizeKeys} from './Token/TokenBase'
-import {TextInputProps} from './TextInput'
-import {useProvidedRefOrCreate} from './hooks'
-import UnstyledTextInput from './_UnstyledTextInput'
 import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from './_TextInputWrapper'
-import Box from './Box'
-import Text from './Text'
-import {isFocusable} from '@primer/behaviors/utils'
+import UnstyledTextInput from './_UnstyledTextInput'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyReactComponent = React.ComponentType<any>
 
 // NOTE: if these props or their JSDoc comments are updated, be sure to also update
 // the prop table in docs/content/TextInputTokens.mdx
-type TextInputWithTokensInternalProps<TokenComponentType extends AnyReactComponent> = {
+export type TextInputWithTokensProps<TokenComponentType extends AnyReactComponent = typeof Token> = {
   /**
    * The array of tokens to render
    */
@@ -53,7 +52,7 @@ type TextInputWithTokensInternalProps<TokenComponentType extends AnyReactCompone
    * The number of tokens to display before truncating
    */
   visibleTokenCount?: number
-} & TextInputProps
+} & Omit<TextInputProps, 'size'>
 
 const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
   small: 0,
@@ -72,7 +71,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     className,
     block,
     disabled,
-    theme,
     sx: sxProp,
     tokens,
     onTokenRemove,
@@ -88,10 +86,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     variant: variantProp, // deprecated. use `size` instead
     visibleTokenCount,
     ...rest
-  }: TextInputWithTokensInternalProps<TokenComponentType> & {
-    selectedTokenIndex: number | undefined
-    setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>
-  },
+  }: TextInputWithTokensProps<TokenComponentType>,
   externalRef: React.ForwardedRef<HTMLInputElement>
 ) {
   const {onBlur, onFocus, onKeyDown, ...inputPropsRest} = omit(rest)
@@ -252,7 +247,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       disabled={disabled}
       hasLeadingVisual={Boolean(LeadingVisual)}
       hasTrailingVisual={Boolean(TrailingVisual)}
-      theme={theme}
       width={widthProp}
       minWidth={minWidthProp}
       maxWidth={maxWidthProp}
@@ -372,5 +366,4 @@ TextInputWithTokens.defaultProps = {
 
 TextInputWithTokens.displayName = 'TextInputWithTokens'
 
-export type TextInputWithTokensProps = ComponentProps<typeof TextInputWithTokens>
 export default TextInputWithTokens
diff --git a/src/__tests__/FormControl.test.tsx b/src/__tests__/FormControl.test.tsx
index 4f79f92bfdd..d7181390622 100644
--- a/src/__tests__/FormControl.test.tsx
+++ b/src/__tests__/FormControl.test.tsx
@@ -140,7 +140,7 @@ describe('FormControl', () => {
                   {text: 'one', id: 1},
                   {text: 'two', id: 2}
                 ]}
-                onRemove={onRemoveMock}
+                onTokenRemove={onRemoveMock}
               />
             </FormControl>
           </SSRProvider>
diff --git a/src/__tests__/SelectMenu.types.test.tsx b/src/__tests__/SelectMenu.types.test.tsx
index c927bbc8798..66e57ddef0b 100644
--- a/src/__tests__/SelectMenu.types.test.tsx
+++ b/src/__tests__/SelectMenu.types.test.tsx
@@ -14,7 +14,7 @@ export function shouldNotAcceptSystemProps() {
       <SelectMenu.List backgroundColor="lightgreen" />
       {/* @ts-expect-error system props should not be accepted */}
       <SelectMenu.Divider backgroundColor="lightgrey" />
-      {/* This will not error for now, but once TextInputProps is fixed, a ts-expect-error can be added */}
+      {/* @ts-expect-error system props should not be accepted */}
       <SelectMenu.Filter backgroundColor="lightpink" />
       {/* @ts-expect-error system props should not be accepted */}
       <SelectMenu.Footer backgroundColor="lightsalmon" />
diff --git a/src/__tests__/TextInput.test.tsx b/src/__tests__/TextInput.test.tsx
index ec2b6e05f0c..09cc2439d77 100644
--- a/src/__tests__/TextInput.test.tsx
+++ b/src/__tests__/TextInput.test.tsx
@@ -38,11 +38,11 @@ describe('TextInput', () => {
   })
 
   it('renders warning', () => {
-    expect(render(<TextInput name="zipcode" status="warning" />)).toMatchSnapshot()
+    expect(render(<TextInput name="zipcode" validationStatus="warning" />)).toMatchSnapshot()
   })
 
   it('renders error', () => {
-    expect(render(<TextInput name="zipcode" status="error" />)).toMatchSnapshot()
+    expect(render(<TextInput name="zipcode" validationStatus="error" />)).toMatchSnapshot()
   })
 
   it('renders contrast', () => {
diff --git a/src/__tests__/TextInput.types.test.tsx b/src/__tests__/TextInput.types.test.tsx
new file mode 100644
index 00000000000..ba55f925ddd
--- /dev/null
+++ b/src/__tests__/TextInput.types.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import {TextInput} from '..'
+
+export function shouldNotAcceptInvalidDomProps() {
+  // @ts-expect-error invalid DOM props should not be accepted
+  return <TextInput onKeyDown={true} />
+}
+
+export function shouldNotAcceptInvalidSize() {
+  // @ts-expect-error invalid size value should not be accepted
+  return <TextInput size="big" />
+}
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index ed74f706514..e8f6413770e 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -2,21 +2,7 @@
 
 exports[`Autocomplete snapshots renders a custom empty state message 1`] = `
 Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
+  .c0 {
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
@@ -87,6 +73,20 @@ Array [
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -102,6 +102,7 @@ Array [
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
+      autoComplete="off"
       className="c1"
       data-component="input"
       id="autocompleteId"
@@ -148,21 +149,7 @@ Array [
 
 exports[`Autocomplete snapshots renders a loading state 1`] = `
 Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
+  .c0 {
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
@@ -233,6 +220,20 @@ Array [
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -248,6 +249,7 @@ Array [
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
+      autoComplete="off"
       className="c1"
       data-component="input"
       id="autocompleteId"
@@ -329,21 +331,7 @@ Array [
 
 exports[`Autocomplete snapshots renders a menu that contains an item to add to the menu 1`] = `
 Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
+  .c0 {
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
@@ -414,6 +402,20 @@ Array [
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -429,6 +431,7 @@ Array [
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
+      autoComplete="off"
       className="c1"
       data-component="input"
       id="autocompleteId"
@@ -1273,21 +1276,7 @@ Array [
 
 exports[`Autocomplete snapshots renders a multiselect input 1`] = `
 Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
+  .c0 {
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
@@ -1358,6 +1347,20 @@ Array [
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -1373,6 +1376,7 @@ Array [
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
+      autoComplete="off"
       className="c1"
       data-component="input"
       id="autocompleteId"
@@ -2127,21 +2131,7 @@ Array [
 
 exports[`Autocomplete snapshots renders a multiselect input with selected menu items 1`] = `
 Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
+  .c0 {
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
@@ -2212,6 +2202,20 @@ Array [
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -2227,6 +2231,7 @@ Array [
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
+      autoComplete="off"
       className="c1"
       data-component="input"
       id="autocompleteId"
@@ -2992,21 +2997,7 @@ Array [
 
 exports[`Autocomplete snapshots renders a single select input 1`] = `
 Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
+  .c0 {
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
@@ -3077,6 +3068,20 @@ Array [
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -3092,6 +3097,7 @@ Array [
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
+      autoComplete="off"
       className="c1"
       data-component="input"
       id="autocompleteId"
@@ -3987,21 +3993,7 @@ Array [
 
 exports[`Autocomplete snapshots renders with an input value 1`] = `
 Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
+  .c0 {
   font-size: 14px;
   line-height: 20px;
   color: #24292f;
@@ -4072,6 +4064,20 @@ Array [
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -4087,6 +4093,7 @@ Array [
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
+      autoComplete="off"
       className="c1"
       data-component="input"
       id="autocompleteId"
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 7791f796b01..72357fe70a8 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1,20 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextInput renders 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -86,6 +72,20 @@ exports[`TextInput renders 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -105,20 +105,6 @@ exports[`TextInput renders 1`] = `
 `;
 
 exports[`TextInput renders block 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -195,6 +181,20 @@ exports[`TextInput renders block 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -214,20 +214,6 @@ exports[`TextInput renders block 1`] = `
 `;
 
 exports[`TextInput renders consistently 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -299,6 +285,20 @@ exports[`TextInput renders consistently 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -317,20 +317,6 @@ exports[`TextInput renders consistently 1`] = `
 `;
 
 exports[`TextInput renders contrast 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -403,6 +389,20 @@ exports[`TextInput renders contrast 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -422,20 +422,6 @@ exports[`TextInput renders contrast 1`] = `
 `;
 
 exports[`TextInput renders error 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -456,6 +442,7 @@ exports[`TextInput renders error 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  border-color: #cf222e;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 0;
@@ -487,6 +474,11 @@ exports[`TextInput renders error 1`] = `
   padding: 12px;
 }
 
+.c0:focus-within {
+  border-color: #cf222e;
+  box-shadow: 0 0 0 3px rgba(164,14,38,0.4);
+}
+
 .c0 >:not(:last-child) {
   margin-right: 8px;
 }
@@ -507,6 +499,20 @@ exports[`TextInput renders error 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -526,20 +532,6 @@ exports[`TextInput renders error 1`] = `
 `;
 
 exports[`TextInput renders large 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -616,6 +608,20 @@ exports[`TextInput renders large 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -636,20 +642,6 @@ exports[`TextInput renders large 1`] = `
 `;
 
 exports[`TextInput renders leadingVisual 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -721,6 +713,20 @@ exports[`TextInput renders leadingVisual 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -767,20 +773,6 @@ exports[`TextInput renders leadingVisual 1`] = `
 `;
 
 exports[`TextInput renders monospace 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -853,6 +845,20 @@ exports[`TextInput renders monospace 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -872,20 +878,6 @@ exports[`TextInput renders monospace 1`] = `
 `;
 
 exports[`TextInput renders placeholder 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -957,6 +949,20 @@ exports[`TextInput renders placeholder 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -977,20 +983,6 @@ exports[`TextInput renders placeholder 1`] = `
 `;
 
 exports[`TextInput renders small 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1069,6 +1061,20 @@ exports[`TextInput renders small 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -1089,20 +1095,6 @@ exports[`TextInput renders small 1`] = `
 `;
 
 exports[`TextInput renders trailingVisual 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1174,6 +1166,20 @@ exports[`TextInput renders trailingVisual 1`] = `
   padding-right: 0;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -1220,20 +1226,6 @@ exports[`TextInput renders trailingVisual 1`] = `
 `;
 
 exports[`TextInput renders warning 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1258,6 +1250,7 @@ exports[`TextInput renders warning 1`] = `
   background-position: right 8px center;
   padding-left: 0;
   padding-right: 0;
+  border-color: #bf8700;
 }
 
 .c0::-webkit-input-placeholder {
@@ -1305,6 +1298,25 @@ exports[`TextInput renders warning 1`] = `
   padding-right: 12px;
 }
 
+.c0:focus-within {
+  border-color: #bf8700;
+  box-shadow: 0 0 0 3px rgba(212,167,44,0.4);
+}
+
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -1324,20 +1336,6 @@ exports[`TextInput renders warning 1`] = `
 `;
 
 exports[`TextInput should render a password input 1`] = `
-.c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1409,6 +1407,20 @@ exports[`TextInput should render a password input 1`] = `
   padding-right: 12px;
 }
 
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 4c2f31b68d5..5c17583b6d6 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -39,21 +39,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -131,6 +116,21 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding-right: 0;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c6 {
   background-color: transparent;
   font-family: inherit;
@@ -765,21 +765,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -857,6 +842,21 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c7 {
   font-size: 16px;
   color: #57606a;
@@ -1164,21 +1164,6 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1271,6 +1256,21 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -1341,21 +1341,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1437,6 +1422,21 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c6 {
   background-color: transparent;
   font-family: inherit;
@@ -2019,21 +2019,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -2118,6 +2103,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c6 {
   background-color: transparent;
   font-family: inherit;
@@ -2700,21 +2700,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -2799,6 +2784,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c6 {
   background-color: transparent;
   font-family: inherit;
@@ -3381,21 +3381,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -3473,6 +3458,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c6 {
   background-color: transparent;
   font-family: inherit;
@@ -4055,21 +4055,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -4147,6 +4132,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c6 {
   background-color: transparent;
   font-family: inherit;
@@ -4729,21 +4729,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   margin-bottom: 0.25rem;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -4823,6 +4808,21 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c6 {
   background-color: transparent;
   font-family: inherit;
@@ -5405,21 +5405,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -5497,6 +5482,21 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -5787,21 +5787,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -5879,6 +5864,21 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c6 {
   background-color: transparent;
   font-family: inherit;
@@ -6461,21 +6461,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -6553,6 +6538,21 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 .c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -7140,21 +7140,6 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   flex-grow: 1;
 }
 
-.c3 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  height: 100%;
-}
-
-.c3:focus {
-  outline: 0;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -7232,6 +7217,21 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   padding-right: 12px;
 }
 
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
diff --git a/src/__tests__/deprecated/InputField.test.tsx b/src/__tests__/deprecated/InputField.test.tsx
index 48ccec4443f..c92d7a82be9 100644
--- a/src/__tests__/deprecated/InputField.test.tsx
+++ b/src/__tests__/deprecated/InputField.test.tsx
@@ -140,7 +140,7 @@ describe('InputField', () => {
                 {text: 'one', id: 1},
                 {text: 'two', id: 2}
               ]}
-              onRemove={onRemoveMock}
+              onTokenRemove={onRemoveMock}
             />
           </InputField>
         </SSRProvider>
diff --git a/src/deprecated/SelectMenu/SelectMenuFilter.tsx b/src/deprecated/SelectMenu/SelectMenuFilter.tsx
index 2d6e4d36667..a727d8bb48e 100644
--- a/src/deprecated/SelectMenu/SelectMenuFilter.tsx
+++ b/src/deprecated/SelectMenu/SelectMenuFilter.tsx
@@ -24,7 +24,7 @@ type SelectMenuFilterInternalProps = {
 } & TextInputProps
 
 const SelectMenuFilter = forwardRef<HTMLInputElement, SelectMenuFilterInternalProps>(
-  ({theme, value, sx: sxProp, ...rest}, forwardedRef) => {
+  ({value, sx: sxProp, ...rest}, forwardedRef) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const ref = forwardedRef ?? inputRef
     const {open} = useContext(MenuContext)
@@ -37,8 +37,8 @@ const SelectMenuFilter = forwardRef<HTMLInputElement, SelectMenuFilterInternalPr
     }, [open])
 
     return (
-      <StyledForm theme={theme} sx={sxProp}>
-        <TextInput theme={theme} ref={ref} width="100%" block value={value} contrast {...rest} />
+      <StyledForm sx={sxProp}>
+        <TextInput ref={ref} width="100%" block value={value} contrast {...rest} />
       </StyledForm>
     )
   }
diff --git a/src/stories/FormControl.stories.tsx b/src/stories/FormControl.stories.tsx
index cd29a9e1de6..9f3fbb815c1 100644
--- a/src/stories/FormControl.stories.tsx
+++ b/src/stories/FormControl.stories.tsx
@@ -107,6 +107,7 @@ export const UsingTextInputWithTokens = (args: Args) => (
         {text: 'css-in-js', id: 1},
         {text: 'styled-system', id: 2}
       ]}
+      onTokenRemove={() => null}
     />
   </FormControl>
 )
diff --git a/src/stories/Overlay.stories.tsx b/src/stories/Overlay.stories.tsx
index 5d2b59f7132..5c2ac9e50aa 100644
--- a/src/stories/Overlay.stories.tsx
+++ b/src/stories/Overlay.stories.tsx
@@ -311,7 +311,7 @@ export const NestedOverlays = () => {
                   Create a list to organize your starred repositories.
                 </Text>
                 <TextInput placeholder="Name this list" sx={{mb: 2}} />
-                <TextInput as="textarea" placeholder="Write a description" rows="3" sx={{mb: 2, textarea: {p: 2}}} />
+                <TextInput as="textarea" placeholder="Write a description" rows={3} sx={{mb: 2, textarea: {p: 2}}} />
 
                 <ButtonPrimary onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}>Create</ButtonPrimary>
               </Box>
diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx
index 88359ee0d97..b02db775a99 100644
--- a/src/stories/TextInputWithTokens.stories.tsx
+++ b/src/stories/TextInputWithTokens.stories.tsx
@@ -94,7 +94,7 @@ export const Default = (args: TextInputWithTokensProps) => {
     setTokens(tokens.filter(token => token.id !== tokenId))
   }
 
-  return <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} {...args} />
+  return <TextInputWithTokens {...args} tokens={tokens} onTokenRemove={onTokenRemove} />
 }
 
 Default.parameters = {controls: {exclude: [excludedControls, 'maxHeight']}}
@@ -105,7 +105,7 @@ export const WithLeadingVisual = (args: TextInputWithTokensProps) => {
     setTokens(tokens.filter(token => token.id !== tokenId))
   }
 
-  return <TextInputWithTokens leadingVisual={NumberIcon} tokens={tokens} onTokenRemove={onTokenRemove} {...args} />
+  return <TextInputWithTokens {...args} leadingVisual={NumberIcon} tokens={tokens} onTokenRemove={onTokenRemove} />
 }
 
 WithLeadingVisual.parameters = {controls: {exclude: [excludedControls, 'maxHeight']}}
@@ -116,7 +116,7 @@ export const WithTrailingVisual = (args: TextInputWithTokensProps) => {
     setTokens(tokens.filter(token => token.id !== tokenId))
   }
 
-  return <TextInputWithTokens trailingVisual={CheckIcon} tokens={tokens} onTokenRemove={onTokenRemove} {...args} />
+  return <TextInputWithTokens {...args} trailingVisual={CheckIcon} tokens={tokens} onTokenRemove={onTokenRemove} />
 }
 
 WithTrailingVisual.parameters = {controls: {exclude: [excludedControls, 'maxHeight']}}
@@ -132,7 +132,7 @@ export const UsingIssueLabelTokens = (args: TextInputWithTokensProps) => {
   }
 
   return (
-    <TextInputWithTokens tokenComponent={IssueLabelToken} tokens={tokens} onTokenRemove={onTokenRemove} {...args} />
+    <TextInputWithTokens {...args} tokenComponent={IssueLabelToken} tokens={tokens} onTokenRemove={onTokenRemove} />
   )
 }
 
@@ -146,7 +146,7 @@ export const MaxHeight = (args: TextInputWithTokensProps) => {
 
   return (
     <Box maxWidth="300px">
-      <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} maxHeight="100px" {...args} />
+      <TextInputWithTokens {...args} tokens={tokens} onTokenRemove={onTokenRemove} maxHeight="100px" />
     </Box>
   )
 }
@@ -161,6 +161,7 @@ export const Unstyled = (args: TextInputWithTokensProps) => {
 
   return (
     <TextInputWithTokens
+      {...args}
       tokens={tokens}
       onTokenRemove={onTokenRemove}
       // TODO: come up with a nicer way to unstyle an input component
@@ -173,7 +174,6 @@ export const Unstyled = (args: TextInputWithTokensProps) => {
           boxShadow: 'none'
         }
       }}
-      {...args}
     />
   )
 }