From 4aa40c9acd90f432c505abba6ca9213dbd971f5c Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Thu, 14 Nov 2024 12:48:25 -0500
Subject: [PATCH] feat(TextInput): Convert TextInput (Part 2) - Update CSS to
 use data attributes (#5257)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(TextInput): Remove width props from TextInput

* type fixes

* Revert "Revert "feat(TextInput): Update TextInput to use data attributes for …"

This reverts commit c424c36d50145371af67d0ff7a575dc5e4e30b7f.

* lint fix

* remove unused imports

* fix type error and add test

* Update to deprecate props

* Fix media styling

* revert back to get

* revert more gets

* Properly mark props as deprecated
---
 .changeset/real-fans-tap.md                   |    5 +
 packages/react/src/Select/Select.tsx          |    4 +-
 .../TextInputWithTokens.tsx                   |    6 +-
 packages/react/src/__tests__/Select.test.tsx  |   28 +
 .../react/src/__tests__/Textarea.test.tsx     |    8 +-
 .../__snapshots__/Autocomplete.test.tsx.snap  |  847 +++-
 .../__snapshots__/TextInput.test.tsx.snap     | 4257 ++++++++++++++---
 .../TextInputWithTokens.test.tsx.snap         | 3877 ++++++++++++---
 .../internal/components/TextInputWrapper.tsx  |  335 +-
 packages/react/src/utils/testing.tsx          |   12 +-
 10 files changed, 7950 insertions(+), 1429 deletions(-)
 create mode 100644 .changeset/real-fans-tap.md

diff --git a/.changeset/real-fans-tap.md b/.changeset/real-fans-tap.md
new file mode 100644
index 00000000000..f419b1ad11d
--- /dev/null
+++ b/.changeset/real-fans-tap.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert TextInput to use data attributes
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index 7efd064982d..25260fb8eaf 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -5,6 +5,8 @@ import type {StyledWrapperProps} from '../internal/components/TextInputWrapper'
 import TextInputWrapper from '../internal/components/TextInputWrapper'
 import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {useFeatureFlag} from '../FeatureFlags'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+
 import classes from './Select.module.css'
 
 export type SelectProps = Omit<
@@ -167,7 +169,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       </TextInputWrapper>
     )
   },
-)
+) as PolymorphicForwardRefComponent<'select', SelectProps>
 
 const Option: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptionElement> & {value: string}>> = props => (
   <option {...props} />
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index c81fb0d9b99..4ded926373d 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -13,7 +13,7 @@ import Token from '../Token/Token'
 import type {TokenSizeKeys} from '../Token/TokenBase'
 
 import type {TextInputSizes} from '../internal/components/TextInputWrapper'
-import TextInputWrapper, {textInputHorizPadding} from '../internal/components/TextInputWrapper'
+import TextInputWrapper from '../internal/components/TextInputWrapper'
 import UnstyledTextInput, {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from '../internal/components/UnstyledTextInput'
 import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
 import {useFeatureFlag} from '../FeatureFlags'
@@ -271,8 +271,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       variant={variantProp} // deprecated. use `size` prop instead
       onClick={focusInput}
       sx={{
-        paddingLeft: textInputHorizPadding,
-        py: `calc(${textInputHorizPadding} / 2)`,
+        paddingLeft: '12px',
+        py: `calc(12px / 2)`,
         ...(block
           ? {
               display: 'flex',
diff --git a/packages/react/src/__tests__/Select.test.tsx b/packages/react/src/__tests__/Select.test.tsx
index 2168c37c2d0..a9cdb9db192 100644
--- a/packages/react/src/__tests__/Select.test.tsx
+++ b/packages/react/src/__tests__/Select.test.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {Select} from '..'
 import {render} from '@testing-library/react'
 import {FeatureFlags} from '../FeatureFlags'
+import userEvent from '@testing-library/user-event'
 
 describe('Select', () => {
   it('should support `className` on the outermost element', () => {
@@ -155,4 +156,31 @@ describe('Select', () => {
     expect(select).toHaveAttribute('disabled')
     expect(select).toHaveAttribute('disabled')
   })
+
+  it('trigger changes event when option selected', async () => {
+    const {getByLabelText} = render(
+      <>
+        <label htmlFor="default">Choice</label>
+        <Select
+          id="default"
+          onChange={e => {
+            expect(e.currentTarget.value).toBe('one')
+          }}
+        >
+          <Select.Option value="one">Choice one</Select.Option>
+          <Select.Option value="two">Choice two</Select.Option>
+          <Select.Option value="three">Choice three</Select.Option>
+          <Select.Option value="four">Choice four</Select.Option>
+          <Select.Option value="five">Choice five</Select.Option>
+          <Select.Option value="six">Choice six</Select.Option>
+        </Select>
+      </>,
+    )
+
+    const select = getByLabelText('Choice')
+
+    expect(select).toBeDefined()
+
+    await userEvent.selectOptions(select, 'one')
+  })
 })
diff --git a/packages/react/src/__tests__/Textarea.test.tsx b/packages/react/src/__tests__/Textarea.test.tsx
index 2bc0c7f6e20..b460655558c 100644
--- a/packages/react/src/__tests__/Textarea.test.tsx
+++ b/packages/react/src/__tests__/Textarea.test.tsx
@@ -84,11 +84,11 @@ describe('Textarea', () => {
       width: '100%',
       display: 'flex',
     }
-    const defaultStyles = renderStyles(<Textarea block />)
-    const blockStyles = renderStyles(<Textarea />)
+    const defaultStyles = renderStyles(<Textarea />)
+    const blockStyles = renderStyles(<Textarea block />)
 
-    expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
-    expect(blockStyles).not.toEqual(expect.objectContaining(expectedStyles))
+    expect(defaultStyles).not.toEqual(expect.objectContaining(expectedStyles))
+    expect(blockStyles).toEqual(expect.objectContaining(expectedStyles))
   })
 
   it('renders default resize values correctly', () => {
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index c3dd83b8058..1facb429f36 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
 [
   .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -20,8 +20,9 @@ exports[`snapshots renders a custom empty state message 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -57,21 +58,107 @@ exports[`snapshots renders a custom empty state message 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -91,8 +178,26 @@ exports[`snapshots renders a custom empty state message 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -111,7 +216,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -179,7 +284,7 @@ exports[`snapshots renders a loading state 1`] = `
 [
   .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -195,8 +300,9 @@ exports[`snapshots renders a loading state 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -232,21 +338,107 @@ exports[`snapshots renders a loading state 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -266,8 +458,26 @@ exports[`snapshots renders a loading state 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -286,7 +496,7 @@ exports[`snapshots renders a loading state 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -411,7 +621,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 [
   .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -427,8 +637,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -464,21 +675,107 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -498,8 +795,26 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -542,7 +857,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -1262,7 +1577,7 @@ exports[`snapshots renders a multiselect input 1`] = `
 [
   .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -1278,8 +1593,9 @@ exports[`snapshots renders a multiselect input 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1315,21 +1631,107 @@ exports[`snapshots renders a multiselect input 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -1349,8 +1751,26 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1381,7 +1801,7 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -1991,7 +2411,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 [
   .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -2007,8 +2427,9 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2044,21 +2465,107 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -2078,8 +2585,26 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -2122,7 +2647,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -2903,7 +3428,7 @@ exports[`snapshots renders a single select input 1`] = `
 [
   .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -2919,8 +3444,9 @@ exports[`snapshots renders a single select input 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2956,21 +3482,107 @@ exports[`snapshots renders a single select input 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -2990,8 +3602,26 @@ exports[`snapshots renders a single select input 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3018,7 +3648,7 @@ exports[`snapshots renders a single select input 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -4007,7 +4637,7 @@ exports[`snapshots renders with an input value 1`] = `
 [
   .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -4023,8 +4653,9 @@ exports[`snapshots renders with an input value 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4060,21 +4691,107 @@ exports[`snapshots renders with an input value 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -4094,8 +4811,26 @@ exports[`snapshots renders with an input value 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -4122,7 +4857,7 @@ exports[`snapshots renders with an input value 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 36f7ae4f8bc..9bf40421763 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TextInput renders 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -19,8 +19,9 @@ exports[`TextInput renders 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -56,21 +57,107 @@ exports[`TextInput renders 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -90,8 +177,26 @@ exports[`TextInput renders 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -110,7 +215,7 @@ exports[`TextInput renders 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -133,7 +238,7 @@ exports[`TextInput renders 1`] = `
 exports[`TextInput renders block 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -149,16 +254,9 @@ exports[`TextInput renders block 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -194,21 +292,107 @@ exports[`TextInput renders block 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -228,8 +412,26 @@ exports[`TextInput renders block 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -248,13 +450,14 @@ exports[`TextInput renders block 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-block={true}
   onClick={[Function]}
 >
   <input
@@ -271,7 +474,7 @@ exports[`TextInput renders block 1`] = `
 exports[`TextInput renders contrast 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -287,9 +490,9 @@ exports[`TextInput renders contrast 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -325,21 +528,107 @@ exports[`TextInput renders contrast 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -359,8 +648,26 @@ exports[`TextInput renders contrast 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -379,13 +686,14 @@ exports[`TextInput renders contrast 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-contrast={true}
   onClick={[Function]}
 >
   <input
@@ -402,7 +710,7 @@ exports[`TextInput renders contrast 1`] = `
 exports[`TextInput renders error 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -418,9 +726,9 @@ exports[`TextInput renders error 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -456,27 +764,107 @@ exports[`TextInput renders error 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
 }
 
-.c0:focus-within {
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -496,8 +884,26 @@ exports[`TextInput renders error 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -516,13 +922,14 @@ exports[`TextInput renders error 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-validation="error"
   onClick={[Function]}
 >
   <input
@@ -540,7 +947,7 @@ exports[`TextInput renders error 1`] = `
 exports[`TextInput renders large 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -556,14 +963,9 @@ exports[`TextInput renders large 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  height: 40px;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -599,21 +1001,107 @@ exports[`TextInput renders large 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -633,8 +1121,26 @@ exports[`TextInput renders large 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -653,15 +1159,15 @@ exports[`TextInput renders large 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-size="large"
   onClick={[Function]}
-  size="large"
 >
   <input
     className="c2"
@@ -677,7 +1183,7 @@ exports[`TextInput renders large 1`] = `
 exports[`TextInput renders leadingVisual 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -693,8 +1199,9 @@ exports[`TextInput renders leadingVisual 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -730,21 +1237,107 @@ exports[`TextInput renders leadingVisual 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -764,8 +1357,26 @@ exports[`TextInput renders leadingVisual 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -784,13 +1395,14 @@ exports[`TextInput renders leadingVisual 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -836,7 +1448,7 @@ exports[`TextInput renders leadingVisual 1`] = `
 exports[`TextInput renders leadingVisual 2`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -852,8 +1464,9 @@ exports[`TextInput renders leadingVisual 2`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -889,21 +1502,107 @@ exports[`TextInput renders leadingVisual 2`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -923,8 +1622,26 @@ exports[`TextInput renders leadingVisual 2`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -943,13 +1660,14 @@ exports[`TextInput renders leadingVisual 2`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -995,7 +1713,7 @@ exports[`TextInput renders leadingVisual 2`] = `
 exports[`TextInput renders leadingVisual 3`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -1011,8 +1729,9 @@ exports[`TextInput renders leadingVisual 3`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1048,21 +1767,107 @@ exports[`TextInput renders leadingVisual 3`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -1080,10 +1885,28 @@ exports[`TextInput renders leadingVisual 3`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1102,13 +1925,14 @@ exports[`TextInput renders leadingVisual 3`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -1136,7 +1960,7 @@ exports[`TextInput renders leadingVisual 3`] = `
 exports[`TextInput renders leadingVisual 4`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -1152,8 +1976,9 @@ exports[`TextInput renders leadingVisual 4`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1189,21 +2014,107 @@ exports[`TextInput renders leadingVisual 4`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -1223,8 +2134,26 @@ exports[`TextInput renders leadingVisual 4`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1243,13 +2172,14 @@ exports[`TextInput renders leadingVisual 4`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -1277,7 +2207,7 @@ exports[`TextInput renders leadingVisual 4`] = `
 exports[`TextInput renders monospace 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -1293,9 +2223,9 @@ exports[`TextInput renders monospace 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1331,21 +2261,107 @@ exports[`TextInput renders monospace 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -1365,8 +2381,26 @@ exports[`TextInput renders monospace 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1385,13 +2419,14 @@ exports[`TextInput renders monospace 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-monospace={true}
   onClick={[Function]}
 >
   <input
@@ -1408,7 +2443,7 @@ exports[`TextInput renders monospace 1`] = `
 exports[`TextInput renders placeholder 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -1424,8 +2459,9 @@ exports[`TextInput renders placeholder 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1461,21 +2497,107 @@ exports[`TextInput renders placeholder 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -1495,8 +2617,26 @@ exports[`TextInput renders placeholder 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1515,7 +2655,7 @@ exports[`TextInput renders placeholder 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -1539,7 +2679,7 @@ exports[`TextInput renders placeholder 1`] = `
 exports[`TextInput renders small 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -1555,16 +2695,9 @@ exports[`TextInput renders small 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 20px;
-  min-height: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
-  line-height: 20px;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1600,21 +2733,107 @@ exports[`TextInput renders small 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -1634,8 +2853,26 @@ exports[`TextInput renders small 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1654,27 +2891,15 @@ exports[`TextInput renders small 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
-  }
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    font-size: 12px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-size="small"
   onClick={[Function]}
-  size="small"
 >
   <input
     className="c2"
@@ -2113,7 +3338,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -2129,8 +3354,9 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2166,15 +3392,107 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -2194,8 +3512,26 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -2240,13 +3576,14 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -2640,7 +3977,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -2656,8 +3993,9 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2693,15 +4031,107 @@ exports[`TextInput renders trailingAction text button 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -2721,8 +4151,26 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -2761,13 +4209,14 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -3246,7 +4695,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -3262,8 +4711,9 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3299,15 +4749,107 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -3327,8 +4869,26 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3373,13 +4933,14 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -3442,7 +5003,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 exports[`TextInput renders trailingVisual 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -3458,8 +5019,9 @@ exports[`TextInput renders trailingVisual 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3489,27 +5051,113 @@ exports[`TextInput renders trailingVisual 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
@@ -3529,8 +5177,26 @@ exports[`TextInput renders trailingVisual 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3549,13 +5215,14 @@ exports[`TextInput renders trailingVisual 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -3601,7 +5268,7 @@ exports[`TextInput renders trailingVisual 1`] = `
 exports[`TextInput renders trailingVisual 2`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -3617,8 +5284,9 @@ exports[`TextInput renders trailingVisual 2`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3654,21 +5322,107 @@ exports[`TextInput renders trailingVisual 2`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
@@ -3688,8 +5442,26 @@ exports[`TextInput renders trailingVisual 2`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3708,13 +5480,14 @@ exports[`TextInput renders trailingVisual 2`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -3760,7 +5533,7 @@ exports[`TextInput renders trailingVisual 2`] = `
 exports[`TextInput renders trailingVisual 3`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -3776,8 +5549,9 @@ exports[`TextInput renders trailingVisual 3`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3813,21 +5587,107 @@ exports[`TextInput renders trailingVisual 3`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
@@ -3847,8 +5707,26 @@ exports[`TextInput renders trailingVisual 3`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3867,13 +5745,14 @@ exports[`TextInput renders trailingVisual 3`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -3901,7 +5780,7 @@ exports[`TextInput renders trailingVisual 3`] = `
 exports[`TextInput renders trailingVisual 4`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -3917,8 +5796,9 @@ exports[`TextInput renders trailingVisual 4`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3954,21 +5834,107 @@ exports[`TextInput renders trailingVisual 4`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
@@ -3988,8 +5954,26 @@ exports[`TextInput renders trailingVisual 4`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -4008,13 +5992,14 @@ exports[`TextInput renders trailingVisual 4`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -4070,7 +6055,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -4086,8 +6071,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4105,39 +6091,125 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
@@ -4157,8 +6229,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -4177,29 +6267,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -4296,7 +6371,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -4312,8 +6387,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4349,21 +6425,107 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -4383,8 +6545,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -4403,29 +6583,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
     onClick={[Function]}
   >
     <span
@@ -4560,7 +6725,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -4576,8 +6741,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4613,21 +6779,107 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
@@ -4647,8 +6899,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -4667,29 +6937,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -4795,7 +7050,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -4811,8 +7066,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4824,45 +7080,131 @@ exports[`TextInput renders with a loading indicator 1`] = `
   cursor: pointer;
 }
 
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -4882,8 +7224,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -4902,29 +7262,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
     onClick={[Function]}
   >
     <span
@@ -5104,7 +7449,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -5120,8 +7465,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5157,21 +7503,107 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -5191,8 +7623,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -5211,29 +7661,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
     onClick={[Function]}
   >
     <span
@@ -5413,7 +7848,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -5429,8 +7864,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5466,21 +7902,107 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -5500,8 +8022,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -5520,29 +8060,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <span
@@ -5716,7 +8242,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -5732,8 +8258,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5757,33 +8284,119 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
@@ -5803,8 +8416,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -5823,29 +8454,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -5981,7 +8597,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -5997,8 +8613,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6034,21 +8651,107 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -6068,8 +8771,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -6088,29 +8809,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <span
@@ -6284,7 +8991,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -6300,8 +9007,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6337,21 +9045,107 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
@@ -6371,8 +9165,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -6391,29 +9203,14 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -6558,7 +9355,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -6574,16 +9371,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 20px;
-  min-height: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
-  line-height: 20px;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6619,21 +9409,107 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -6653,8 +9529,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -6672,36 +9566,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 @media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
   .c0 {
-    font-size: 12px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
+    data-size="small"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="small"
   >
     <span
       className="TextInput-icon"
@@ -6919,7 +9795,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -6935,8 +9811,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6972,21 +9849,107 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -7006,8 +9969,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -7026,29 +10007,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <span
@@ -7267,7 +10234,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -7283,14 +10250,9 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  height: 40px;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -7326,21 +10288,107 @@ exports[`TextInput renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -7360,8 +10408,26 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -7378,33 +10444,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
+    data-size="large"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="large"
   >
     <span
       className="TextInput-icon"
@@ -7575,7 +10627,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 exports[`TextInput should render a password input 1`] = `
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -7591,8 +10643,9 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -7628,21 +10681,107 @@ exports[`TextInput should render a password input 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -7662,8 +10801,26 @@ exports[`TextInput should render a password input 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -7682,7 +10839,7 @@ exports[`TextInput should render a password input 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 27dcc81e3ad..782b2826cb6 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -70,12 +70,9 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -111,26 +108,115 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
   margin-right: 8px;
 }
@@ -148,8 +234,32 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -295,14 +405,16 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-leading-visual={true}
+  data-size="medium"
+  data-trailing-visual={true}
   onClick={[Function]}
-  size="medium"
 >
   <span
     aria-hidden="true"
@@ -882,7 +994,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -898,12 +1010,9 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -939,24 +1048,113 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -976,8 +1174,32 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -1123,14 +1345,14 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -1305,7 +1527,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -1321,25 +1543,9 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1375,21 +1581,103 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1400,6 +1688,13 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   width: 100%;
 }
 
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
   margin-right: 8px;
 }
@@ -1417,8 +1712,37 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
 }
 
 .c4 {
@@ -1438,14 +1762,15 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-block={true}
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -1521,7 +1846,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -1537,14 +1862,9 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  max-height: 20px;
-  overflow: auto;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1580,21 +1900,103 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1602,6 +2004,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   overflow: auto;
 }
 
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
   margin-right: 8px;
 }
@@ -1619,8 +2028,34 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  max-height: 20px;
+  overflow: auto;
 }
 
 .c4 {
@@ -1766,14 +2201,14 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -2265,7 +2700,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -2281,19 +2716,9 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 20px;
-  min-height: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
-  line-height: 20px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2329,24 +2754,113 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -2366,8 +2880,32 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -2511,26 +3049,14 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
-  }
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    font-size: 12px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="small"
   onClick={[Function]}
-  size="small"
 >
   <div
     className="c2"
@@ -3022,7 +3548,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -3038,19 +3564,9 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 20px;
-  min-height: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
-  line-height: 20px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3086,24 +3602,113 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -3123,8 +3728,32 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -3268,26 +3897,14 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
-  }
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    font-size: 12px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="small"
   onClick={[Function]}
-  size="small"
 >
   <div
     className="c2"
@@ -3779,7 +4396,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -3795,12 +4412,9 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3824,36 +4438,125 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -3873,8 +4576,32 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -4016,28 +4743,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -4529,7 +5244,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -4545,12 +5260,9 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4586,24 +5298,113 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -4623,8 +5424,32 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -4768,28 +5593,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -5281,7 +6094,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -5297,13 +6110,9 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  overflow: auto;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5339,27 +6148,116 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
   overflow: auto;
 }
 
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
   margin-right: 8px;
 }
@@ -5377,8 +6275,33 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  overflow: auto;
 }
 
 .c4 {
@@ -5524,14 +6447,14 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -6023,7 +6946,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -6039,12 +6962,9 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6068,36 +6988,125 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -6117,8 +7126,32 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -6214,14 +7247,14 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -6480,7 +7513,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -6496,12 +7529,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6537,24 +7567,113 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
@@ -6574,8 +7693,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -6721,26 +7864,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <div
       className="c2"
@@ -7292,7 +8424,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -7308,12 +8440,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -7349,24 +8478,113 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -7386,8 +8604,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c6 {
@@ -7533,26 +8775,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -8141,7 +9372,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -8157,12 +9388,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -8186,36 +9414,125 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
@@ -8235,8 +9552,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -8382,26 +9723,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <div
       className="c2"
@@ -8962,7 +10292,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -8978,12 +10308,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -9019,24 +10346,113 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -9056,8 +10472,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c7 {
@@ -9203,26 +10643,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -9856,7 +11285,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -9872,12 +11301,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -9913,24 +11339,113 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -9950,8 +11465,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c7 {
@@ -10097,26 +11636,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -10750,7 +12278,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -10766,12 +12294,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -10807,26 +12332,115 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
   margin-right: 8px;
 }
@@ -10844,8 +12458,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c7 {
@@ -10991,26 +12629,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -11638,7 +13266,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -11654,12 +13282,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -11695,24 +13320,113 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
@@ -11732,8 +13446,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -11879,26 +13617,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <div
       className="c2"
@@ -12489,7 +14216,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -12505,12 +14232,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -12546,26 +14270,115 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
   margin-right: 8px;
 }
@@ -12583,8 +14396,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c6 {
@@ -12730,26 +14567,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -13377,7 +15204,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -13393,12 +15220,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -13434,24 +15258,113 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > :not(:last-child) {
@@ -13471,8 +15384,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 12px;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -13618,26 +15555,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <div
       className="c2"
@@ -14237,7 +16163,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -14253,19 +16179,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 20px;
-  min-height: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
-  line-height: 20px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -14301,26 +16217,115 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
   margin-right: 8px;
 }
@@ -14338,8 +16343,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c7 {
@@ -14482,31 +16511,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 @media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
   .c0 {
-    font-size: 12px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="small"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="small"
   >
     <span
       className="TextInput-icon"
@@ -15179,7 +17194,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -15195,12 +17210,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -15236,26 +17248,115 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
   margin-right: 8px;
 }
@@ -15273,8 +17374,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c7 {
@@ -15420,26 +17545,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -16112,7 +18227,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -16128,12 +18243,9 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -16169,26 +18281,115 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
   margin-right: 8px;
 }
@@ -16206,8 +18407,32 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c1 > input,
 .c1 > select {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c7 {
@@ -16351,26 +18576,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -17009,7 +19224,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -17025,12 +19240,9 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -17066,24 +19278,113 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -17103,8 +19404,32 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -17250,14 +19575,14 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -17736,7 +20061,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -17752,12 +20077,9 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -17793,24 +20115,113 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -17830,8 +20241,32 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -17989,14 +20424,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -18435,7 +20870,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 
 .c0 {
   font-size: 14px;
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
   background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
@@ -18451,12 +20886,9 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -18492,24 +20924,113 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
-.c0:focus-within {
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
   border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));
+  box-shadow: none;
+  border-color: var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+}
+
+.c0:where([data-block]) {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c1 {
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
   padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
@@ -18529,8 +21050,32 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 
 .c1 > input,
 .c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c1 {
   padding-left: 12px;
-  padding-right: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
 }
 
 .c4 {
@@ -18550,14 +21095,14 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 
 @media (min-width:768px) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 146c1c637b3..c12ea54094e 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,6 +1,6 @@
-import styled, {css} from 'styled-components'
-import type {ResponsiveValue} from 'styled-system'
-import {maxWidth, minWidth, variant, width} from 'styled-system'
+import React from 'react'
+import styled from 'styled-components'
+import {maxWidth, minWidth, width, type ResponsiveValue} from 'styled-system'
 import {get} from '../../constants'
 import type {SxProp} from '../../sx'
 import sx from '../../sx'
@@ -8,46 +8,6 @@ import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 
 export type TextInputSizes = 'small' | 'medium' | 'large'
 
-const sizeDeprecatedVariants = variant({
-  variants: {
-    small: {
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: [0, 0, 0],
-      lineHeight: '20px',
-    },
-    large: {
-      px: 2,
-      py: '10px',
-      fontSize: 3,
-    },
-  },
-})
-
-const sizeVariants = variant({
-  prop: 'size',
-  variants: {
-    small: {
-      '--inner-action-size': '20px',
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: [0, 0, 0],
-      lineHeight: '20px',
-    },
-    medium: {
-      '--inner-action-size': '24px',
-    },
-    large: {
-      '--inner-action-size': '28px',
-      px: 2,
-      py: '10px',
-      height: '40px',
-    },
-  },
-})
-
 export type StyledBaseWrapperProps = {
   block?: boolean
   contrast?: boolean
@@ -56,6 +16,12 @@ export type StyledBaseWrapperProps = {
   isInputFocused?: boolean
   monospace?: boolean
   validationStatus?: FormValidationStatus
+  /** @deprecated Use `size` prop instead */
+  variant?: TextInputSizes
+  size?: TextInputSizes
+  className?: string
+  style?: React.CSSProperties
+  onClick?: React.MouseEventHandler
   /** @deprecated Update `width` using CSS modules or style. */
   width?: string | number | ResponsiveValue<string | number>
   /** @deprecated Update `min-width` using CSS modules or style. */
@@ -67,37 +33,11 @@ export type StyledBaseWrapperProps = {
 export type StyledWrapperProps = {
   hasLeadingVisual?: boolean
   hasTrailingVisual?: boolean
-  /** @deprecated Use `size` prop instead */
-  variant?: TextInputSizes
-  size?: TextInputSizes
 } & StyledBaseWrapperProps
 
-const textInputBasePadding = '12px'
-export const textInputHorizPadding = textInputBasePadding
-
-const renderFocusStyles = (hasTrailingAction: boolean, isInputFocused: boolean) => {
-  if (hasTrailingAction) {
-    return (
-      isInputFocused &&
-      css`
-        border-color: ${get('colors.accent.fg')};
-        outline: 2px solid ${get('colors.accent.fg')};
-        outline-offset: -1px;
-      `
-    )
-  }
-  return css`
-    &:focus-within {
-      border-color: ${get('colors.accent.fg')};
-      outline: 2px solid ${get('colors.accent.fg')};
-      outline-offset: -1px;
-    }
-  `
-}
-
-export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
+export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   font-size: ${get('fontSizes.1')};
-  line-height: 20px;
+  line-height: var(--base-size-20);
   color: ${get('colors.fg.default')};
   vertical-align: middle;
   background-color: ${get('colors.canvas.default')};
@@ -107,7 +47,7 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   box-shadow: ${get('shadows.primer.shadow.inset')};
   display: inline-flex;
   align-items: stretch;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
 
   input,
@@ -127,77 +67,151 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     }
   }
 
-  ${props => renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))}
+  &:where([data-trailing-action][data-focused]),
+  &:where(:not([data-trailing-action]):focus-within) {
+    border-color: ${get('colors.accent.fg')};
+    outline: 2px solid ${get('colors.accent.fg')};
+    outline-offset: -1px;
+  }
 
   > textarea {
-    padding: ${textInputBasePadding};
-  }
-
-  ${props =>
-    props.contrast &&
-    css`
-      background-color: ${get('colors.canvas.inset')};
-    `}
-
-  ${props =>
-    props.disabled &&
-    css`
-      color: ${get('colors.primer.fg.disabled')};
-      background-color: ${get('colors.input.disabledBg')};
-      box-shadow: none;
-      border-color: var(--control-borderColor-disabled, ${get('colors.border.default')});
-
-      input,
-      textarea,
-      select {
-        cursor: not-allowed;
-      }
-    `}
-
-    ${props =>
-    props.monospace &&
-    css`
-      font-family: ${get('fonts.mono')};
-    `}
-
-  ${props =>
-    props.validationStatus === 'error' &&
-    css`
-      border-color: ${get('colors.danger.emphasis')};
-      ${renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))}
-    `}
-
-
-  ${props =>
-    props.validationStatus === 'success' &&
-    css`
-      border-color: ${get('colors.success.emphasis')};
-    `}
-
-  ${props =>
-    props.block &&
-    css`
-      width: 100%;
-      display: flex;
-      align-self: stretch;
-    `}
-
-  // Ensures inputs don' t zoom on mobile but are body-font size on desktop
+    padding: var(--base-size-12);
+  }
+
+  &:where([data-contrast]) {
+    background-color: ${get('colors.canvas.inset')};
+  }
+
+  &:where([data-disabled]) {
+    color: ${get('colors.primer.fg.disabled')};
+    background-color: ${get('colors.input.disabledBg')};
+    box-shadow: none;
+    border-color: var(--control-borderColor-disabled, ${get('colors.border.default')});
+
+    input,
+    textarea,
+    select {
+      cursor: not-allowed;
+    }
+  }
+
+  &:where([data-monospace]) {
+    font-family: ${get('fonts.mono')};
+  }
+
+  &:where([data-validation='error']) {
+    border-color: ${get('colors.danger.emphasis')};
+
+    &:where([data-trailing-action][data-focused]),
+    &:where(:not([data-trailing-action])):focus-within {
+      border-color: ${get('colors.accent.fg')};
+      outline: 2px solid ${get('colors.accent.fg')};
+      outline-offset: -1px;
+    }
+  }
+
+  &:where([data-validation='success']) {
+    border-color: ${get('colors.success.emphasis')};
+  }
+
+  &:where([data-block]) {
+    width: 100%;
+    display: flex;
+    align-self: stretch;
+  }
+
+  /* Ensures inputs don' t zoom on mobile but are body-font size on desktop */
   @media (min-width: ${get('breakpoints.1')}) {
-    font-size: ${get('fontSizes.1')};
+    font-size: var(--text-body-size-medium);
+  }
+
+  --inner-action-size: var(--base-size-24); /* Default size */
+
+  &:where([data-size='small']) {
+    --inner-action-size: var(--base-size-20);
+
+    min-height: var(--base-size-28);
+    padding-top: 3px;
+    padding-right: var(--base-size-8);
+    padding-bottom: 3px;
+    padding-left: var(--base-size-8);
+    font-size: var(--text-body-size-small);
+    line-height: var(--base-size-20);
+  }
+
+  &:where([data-size='large']) {
+    --inner-action-size: var(--base-size-28);
+
+    height: var(--base-size-40);
+    padding-top: 10px;
+    padding-right: var(--base-size-8);
+    padding-bottom: 10px;
+    padding-left: var(--base-size-8);
+  }
+
+  /* Deprecated */
+  &:where([data-variant='small']) {
+    min-height: 28px;
+    padding-top: 3px;
+    padding-right: var(--base-size-8);
+    padding-bottom: 3px;
+    padding-left: var(--base-size-8);
+    font-size: (--text-body-size-small);
+    line-height: var(--base-size-20);
   }
 
-  ${width}
-  ${minWidth}
-  ${maxWidth}
-  ${sizeDeprecatedVariants}
-  ${sizeVariants}
-  ${sx};
+  /* Deprecated */
+  &:where([data-variant='large']) {
+    padding-top: 10px;
+    padding-right: var(--base-size-8);
+    padding-bottom: 10px;
+    padding-left: var(--base-size-8);
+    font-size: var(--text-title-size-medium);
+  }
+
+  & {
+    ${width}
+    ${minWidth}
+    ${maxWidth}
+    ${sx}
+  }
 `
 
-const TextInputWrapper = styled(TextInputBaseWrapper)<StyledWrapperProps>`
-  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
-  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
+export function TextInputBaseWrapper(props: React.PropsWithChildren<StyledBaseWrapperProps>) {
+  const {
+    variant,
+    size,
+    isInputFocused,
+    hasTrailingAction,
+    validationStatus,
+    disabled,
+    contrast,
+    monospace,
+    block,
+    ...restProps
+  } = props
+  return (
+    <StyledTextInputBaseWrapper
+      data-variant={variant}
+      data-size={size}
+      data-focused={isInputFocused || undefined}
+      data-trailing-action={hasTrailingAction || undefined}
+      data-validation={validationStatus}
+      data-disabled={disabled || undefined}
+      data-contrast={contrast || undefined}
+      data-monospace={monospace || undefined}
+      data-block={block || undefined}
+      {...restProps}
+    />
+  )
+}
+
+const StyledTextInputWrapper = styled(TextInputBaseWrapper)<StyledWrapperProps>`
+  /* Repeat and position set for form states (success, error, etc) */
+  background-repeat: no-repeat;
+
+  /* For form validation. This keeps images 8px from right and centered vertically. */
+  background-position: right 8px center;
 
   & > :not(:last-child) {
     margin-right: ${get('space.2')};
@@ -210,18 +224,47 @@ const TextInputWrapper = styled(TextInputBaseWrapper)<StyledWrapperProps>`
     flex-shrink: 0;
   }
 
-  ${props => css`
-    padding-left: ${props.hasLeadingVisual ? textInputHorizPadding : 0};
-    padding-right: ${props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0};
+  padding-right: 0;
+  padding-left: 0;
 
-    > input,
-    > select {
-      padding-left: ${!props.hasLeadingVisual ? textInputHorizPadding : 0};
-      padding-right: ${!props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0};
-    }
-  `}
+  > input,
+  > select {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  &:where([data-leading-visual]) {
+    padding-left: var(--base-size-12);
+  }
+
+  &:where([data-trailing-visual]:not([data-trailing-action])) {
+    padding-right: var(--base-size-12);
+  }
 
-  ${sx};
+  &:where(:not([data-leading-visual])) > input,
+  &:where(:not([data-leading-visual])) > select {
+    padding-left: var(--base-size-12);
+  }
+
+  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+    padding-right: var(--base-size-12);
+  }
+
+  & {
+    ${sx}
+  }
 `
 
+export function TextInputWrapper(props: React.PropsWithChildren<StyledWrapperProps>) {
+  const {hasLeadingVisual, hasTrailingVisual, ...restProps} = props
+  return (
+    <StyledTextInputWrapper
+      data-leading-visual={hasLeadingVisual || undefined}
+      data-trailing-visual={hasTrailingVisual || undefined}
+      {...restProps}
+    />
+  )
+}
+
 export default TextInputWrapper
diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx
index 5699aa85ca1..a01cb435dec 100644
--- a/packages/react/src/utils/testing.tsx
+++ b/packages/react/src/utils/testing.tsx
@@ -87,15 +87,21 @@ export function percent(value: number | string): string {
 
 export function renderStyles(node: React.ReactElement) {
   const {
-    props: {className},
+    props: {className, ...restProps},
   } = render(node)
-  return getComputedStyles(className)
+  return getComputedStyles(className, restProps)
 }
 
-export function getComputedStyles(className: string) {
+export function getComputedStyles(className: string, restProps?: Record<string, string | undefined>) {
   const div = document.createElement('div')
   div.className = className
 
+  if (restProps) {
+    for (const [key, value] of Object.entries(restProps)) {
+      if (key.startsWith('data-') && value !== undefined) div.setAttribute(key, value)
+    }
+  }
+
   const computed: ComputedStyles = {}
   for (const sheet of document.styleSheets) {
     // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule