diff --git a/.changeset/lovely-planes-pull.md b/.changeset/lovely-planes-pull.md
new file mode 100644
index 00000000000..ea29564a961
--- /dev/null
+++ b/.changeset/lovely-planes-pull.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+update icon types and primer octicons
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-colorblind-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-colorblind-linux.png
index 9481c79ad5a..25ab287c52a 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-colorblind-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-dimmed-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-dimmed-linux.png
index 201ae2fdb0f..131883c9209 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-dimmed-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-high-contrast-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-high-contrast-linux.png
index d2fa9c29bee..2fd173eb298 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-linux.png
index 9481c79ad5a..25ab287c52a 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-tritanopia-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-tritanopia-linux.png
index 9481c79ad5a..25ab287c52a 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-colorblind-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-colorblind-linux.png
index af776f930e7..59a4f2da4b4 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-colorblind-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-high-contrast-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-high-contrast-linux.png
index af776f930e7..59a4f2da4b4 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-high-contrast-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png
index af776f930e7..59a4f2da4b4 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-tritanopia-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-tritanopia-linux.png
index af776f930e7..59a4f2da4b4 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-tritanopia-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-colorblind-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-colorblind-linux.png
index 17ddafd7759..7e3cac2b940 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-colorblind-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-dimmed-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-dimmed-linux.png
index e99a44cb416..e3d97d80f1f 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-dimmed-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-high-contrast-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-high-contrast-linux.png
index f9e8a1ead45..6b67c17ea70 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-linux.png
index 17ddafd7759..9200056673d 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-tritanopia-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-tritanopia-linux.png
index 17ddafd7759..7e3cac2b940 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-colorblind-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-colorblind-linux.png
index 1afb7640210..5d85ce1f083 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-colorblind-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-high-contrast-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-high-contrast-linux.png
index f7b708b91aa..c4b84c514bd 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-high-contrast-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-linux.png
index 1afb7640210..ec03f0c354d 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-linux.png differ
diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-tritanopia-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-tritanopia-linux.png
index 1afb7640210..5d85ce1f083 100644
Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-tritanopia-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-tritanopia-linux.png differ
diff --git a/package-lock.json b/package-lock.json
index 9803ef9e772..f3c7586be19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,12 +15,13 @@
         "@github/relative-time-element": "^4.1.2",
         "@lit-labs/react": "1.1.1",
         "@primer/behaviors": "1.3.4",
-        "@primer/octicons-react": "18.3.0",
+        "@primer/octicons-react": "^19.3.0",
         "@primer/primitives": "7.11.11",
         "@react-aria/ssr": "^3.1.0",
         "@styled-system/css": "^5.1.5",
         "@styled-system/props": "^5.1.5",
         "@styled-system/theme-get": "^5.1.2",
+        "@types/react-is": "^18.2.1",
         "@types/styled-components": "^5.1.11",
         "@types/styled-system": "^5.1.12",
         "@types/styled-system__css": "^5.0.16",
@@ -34,6 +35,7 @@
         "lodash.isempty": "4.4.0",
         "lodash.isobject": "3.0.2",
         "react-intersection-observer": "9.4.3",
+        "react-is": "^18.2.0",
         "styled-system": "^5.1.5"
       },
       "devDependencies": {
@@ -3969,12 +3971,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@jest/core/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/@jest/core/node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4456,12 +4452,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@jest/expect/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/@jest/expect/node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -5438,14 +5428,14 @@
       }
     },
     "node_modules/@primer/octicons-react": {
-      "version": "18.3.0",
-      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-18.3.0.tgz",
-      "integrity": "sha512-kOoc4wrBw3bPe2ZPj9BmCwXdEkw8hxUX/tFCvcjOsZ6eywaQXm3PR0yZnPZxZ8o4RFj2tdg/cwGr4+cU83weHw==",
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.3.0.tgz",
+      "integrity": "sha512-LCCer1Roc5WGYy5FZcByniuUOJKla7i+9TaPeL95G+KIXhisuyWbTIy5DbiW/EWYMWvfCUQe6u71zZKVNeHjyg==",
       "engines": {
         "node": ">=8"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.3"
       }
     },
     "node_modules/@primer/primitives": {
@@ -14427,12 +14417,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@storybook/test-runner/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/@storybook/test-runner/node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -15510,12 +15494,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@types/jest/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/@types/jsdom": {
       "version": "20.0.0",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.0.tgz",
@@ -15750,6 +15728,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-is": {
+      "version": "18.2.1",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
+      "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-test-renderer": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
@@ -23166,12 +23152,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/expect/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/expect/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -24845,6 +24825,11 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -26576,12 +26561,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-circus/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/jest-circus/node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -26881,12 +26860,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-cli/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/jest-cli/node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -27784,12 +27757,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-config/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/jest-config/node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -28017,12 +27984,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-diff/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/jest-diff/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -28165,12 +28126,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-each/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/jest-each/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -28523,12 +28478,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-leak-detector/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/jest-matcher-utils": {
       "version": "29.2.2",
       "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.2.2.tgz",
@@ -28646,12 +28595,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-matcher-utils/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/jest-matcher-utils/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -28844,12 +28787,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-message-util/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/jest-message-util/node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -29674,12 +29611,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-snapshot/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/jest-snapshot/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -29910,12 +29841,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-validate/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/jest-validate/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -34972,6 +34897,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
     "node_modules/property-information": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
@@ -35439,9 +35370,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/react-refresh": {
       "version": "0.11.0",
@@ -35508,12 +35439,6 @@
         "react": "^18.2.0"
       }
     },
-    "node_modules/react-test-renderer/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -37410,6 +37335,12 @@
         "react-dom": ">= 16.3.0"
       }
     },
+    "node_modules/styled-components/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
     "node_modules/styled-system": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz",
diff --git a/package.json b/package.json
index b92c6d10035..a8b64d85e47 100644
--- a/package.json
+++ b/package.json
@@ -100,12 +100,13 @@
     "@github/relative-time-element": "^4.1.2",
     "@lit-labs/react": "1.1.1",
     "@primer/behaviors": "1.3.4",
-    "@primer/octicons-react": "18.3.0",
+    "@primer/octicons-react": "^19.3.0",
     "@primer/primitives": "7.11.11",
     "@react-aria/ssr": "^3.1.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
+    "@types/react-is": "^18.2.1",
     "@types/styled-components": "^5.1.11",
     "@types/styled-system": "^5.1.12",
     "@types/styled-system__css": "^5.0.16",
@@ -119,6 +120,7 @@
     "lodash.isempty": "4.4.0",
     "lodash.isobject": "3.0.2",
     "react-intersection-observer": "9.4.3",
+    "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 6ad81d0e9a0..bccc1c0761c 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -42,19 +42,19 @@ export type ButtonProps = {
   /**
    * The icon for the IconButton
    */
-  icon?: React.ComponentType | null | undefined
+  icon?: React.ElementType | null | undefined
   /**
    * The leading icon comes before button content
    */
-  leadingIcon?: React.ComponentType | null | undefined
+  leadingIcon?: React.ElementType | null | undefined
   /**
    * The trailing icon comes after button content
    */
-  trailingIcon?: React.ComponentType | null | undefined
+  trailingIcon?: React.ElementType | null | undefined
   /**
    * Trailing action appears to the right of the trailing visual and is always locked to the end
    */
-  trailingAction?: React.ComponentType | null | undefined
+  trailingAction?: React.ElementType | null | undefined
   children: React.ReactNode
   /**
    * Content alignment for when visuals are present
@@ -63,7 +63,7 @@ export type ButtonProps = {
 } & ButtonBaseProps
 
 export type IconButtonProps = ButtonA11yProps & {
-  icon: React.ComponentType
+  icon: React.ElementType
 } & Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby'>
 
 // adopted from React.AnchorHTMLAttributes
diff --git a/src/Octicon/Octicon.tsx b/src/Octicon/Octicon.tsx
index 8eaa7d37a39..5e331e9a2a9 100644
--- a/src/Octicon/Octicon.tsx
+++ b/src/Octicon/Octicon.tsx
@@ -6,9 +6,10 @@ import {ComponentProps} from '../utils/types'
 
 type StyledOcticonProps = {icon: React.ElementType; color?: string} & IconProps
 
-function Icon({icon: IconComponent, ...rest}: StyledOcticonProps) {
-  return <IconComponent {...rest} />
-}
+const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref<SVGSVGElement>) => {
+  const {icon: IconComponent, ...rest} = props
+  return <IconComponent {...rest} ref={ref} />
+})
 
 const Octicon = styled(Icon)<SxProp>`
   ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 7dad39ddf68..48533afc22e 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -53,7 +53,7 @@ export type PageLayoutProps = {
   columnGap?: keyof typeof SPACING_MAP
 
   /** Private prop to allow SplitPageLayout to customize slot components */
-  _slotsConfig?: Record<'header' | 'footer', React.ComponentType>
+  _slotsConfig?: Record<'header' | 'footer', React.ElementType>
 } & SxProp
 
 const containerWidths = {
diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
index 94827b83cf5..48edf3234f1 100644
--- a/src/TextInput/TextInput.tsx
+++ b/src/TextInput/TextInput.tsx
@@ -1,4 +1,5 @@
 import React, {MouseEventHandler, useCallback, useState} from 'react'
+import {isValidElementType} from 'react-is'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import classnames from 'classnames'
 
@@ -11,7 +12,7 @@ import TextInputAction from '../_TextInputInnerAction'
 
 export type TextInputNonPassthroughProps = {
   /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
-  icon?: React.ComponentType<React.PropsWithChildren<{className?: string}>>
+  icon?: React.ElementType
   /** Whether the to show a loading indicator in the input */
   loading?: boolean
   /**
@@ -24,11 +25,11 @@ export type TextInputNonPassthroughProps = {
   /**
    * A visual that renders inside the input before the typing area
    */
-  leadingVisual?: string | React.ComponentType<React.PropsWithChildren<{className?: string}>>
+  leadingVisual?: React.ElementType | React.ReactNode
   /**
    * A visual that renders inside the input after the typing area
    */
-  trailingVisual?: string | React.ComponentType<React.PropsWithChildren<{className?: string}>>
+  trailingVisual?: React.ElementType | React.ReactNode
   /**
    * A visual that renders inside the input after the typing area
    */
@@ -134,7 +135,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           showLoadingIndicator={showLeadingLoadingIndicator}
           hasLoadingIndicator={typeof loading === 'boolean'}
         >
-          {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
+          {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
         </TextInputInnerVisualSlot>
         <UnstyledTextInput
           ref={inputRef}
@@ -150,7 +151,11 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           showLoadingIndicator={showTrailingLoadingIndicator}
           hasLoadingIndicator={typeof loading === 'boolean'}
         >
-          {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+          {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? (
+            <TrailingVisual />
+          ) : (
+            TrailingVisual
+          )}
         </TextInputInnerVisualSlot>
         {trailingAction}
       </TextInputWrapper>
diff --git a/src/TextInputWithTokens/TextInputWithTokens.tsx b/src/TextInputWithTokens/TextInputWithTokens.tsx
index 69c93b13758..849f58b6f6b 100644
--- a/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -2,6 +2,7 @@ import {FocusKeys} from '@primer/behaviors'
 import {isFocusable} from '@primer/behaviors/utils'
 import {omit} from '@styled-system/props'
 import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject, useRef, useState} from 'react'
+import {isValidElementType} from 'react-is'
 import Box from '../Box'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {useFocusZone} from '../hooks/useFocusZone'
@@ -296,7 +297,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
         visualPosition="leading"
         showLoadingIndicator={showLeadingLoadingIndicator}
       >
-        {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
+        {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
       </TextInputInnerVisualSlot>
       <Box
         ref={containerRef as RefObject<HTMLDivElement>}
@@ -362,7 +363,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
         visualPosition="trailing"
         showLoadingIndicator={showTrailingLoadingIndicator}
       >
-        {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+        {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? <TrailingVisual /> : TrailingVisual}
       </TextInputInnerVisualSlot>
     </TextInputWrapper>
   )
diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
index 9a9df8ba25d..4bed89458d3 100644
--- a/src/Token/Token.tsx
+++ b/src/Token/Token.tsx
@@ -12,10 +12,9 @@ import VisuallyHidden from '../_VisuallyHidden'
 // TODO: This is a temporary solution until we figure out why these methods are causing type errors.
 export interface TokenProps extends TokenBaseProps, SxProp {
   /**
-   * A function that renders a component before the token text
+   * A component that renders before the token text
    */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  leadingVisual?: React.ComponentType<React.PropsWithChildren<any>>
+  leadingVisual?: React.ElementType
 }
 
 const tokenBorderWidthPx = 1
diff --git a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
index 0eb72bbc832..f8b70368c1f 100644
--- a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
@@ -212,11 +212,11 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={12}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -435,11 +435,11 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -1536,11 +1536,11 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -1709,11 +1709,11 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={12}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -1882,11 +1882,11 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -2658,11 +2658,11 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -2831,11 +2831,11 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -3115,11 +3115,11 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -3295,11 +3295,11 @@ exports[`Token components Token renders all sizes 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={12}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -3475,11 +3475,11 @@ exports[`Token components Token renders all sizes 2`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -4462,11 +4462,11 @@ exports[`Token components Token renders with a remove button 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
diff --git a/src/__tests__/TextInput.test.tsx b/src/__tests__/TextInput.test.tsx
index e563a3e8e49..e1b5320dfb3 100644
--- a/src/__tests__/TextInput.test.tsx
+++ b/src/__tests__/TextInput.test.tsx
@@ -57,10 +57,56 @@ describe('TextInput', () => {
 
   it('renders leadingVisual', () => {
     expect(render(<TextInput name="search" placeholder={'Search'} leadingVisual={SearchIcon} />)).toMatchSnapshot()
+    expect(render(<TextInput name="search" placeholder={'Search'} leadingVisual={<SearchIcon />} />)).toMatchSnapshot()
+    expect(
+      render(
+        <TextInput
+          name="search"
+          placeholder={'Search'}
+          leadingVisual={React.memo(() => (
+            <div>Trailing</div>
+          ))}
+        />,
+      ),
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <TextInput
+          name="search"
+          placeholder={'Search'}
+          leadingVisual={React.forwardRef(() => (
+            <div>Trailing</div>
+          ))}
+        />,
+      ),
+    ).toMatchSnapshot()
   })
 
   it('renders trailingVisual', () => {
     expect(render(<TextInput name="search" placeholder={'Search'} trailingVisual={SearchIcon} />)).toMatchSnapshot()
+    expect(render(<TextInput name="search" placeholder={'Search'} trailingVisual={<SearchIcon />} />)).toMatchSnapshot()
+    expect(
+      render(
+        <TextInput
+          name="search"
+          placeholder={'Search'}
+          trailingVisual={React.memo(() => (
+            <div>Trailing</div>
+          ))}
+        />,
+      ),
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <TextInput
+          name="search"
+          placeholder={'Search'}
+          trailingVisual={React.forwardRef(() => (
+            <div>Trailing</div>
+          ))}
+        />,
+      ),
+    ).toMatchSnapshot()
   })
 
   it('renders trailingAction text button', () => {
diff --git a/src/__tests__/TextInput.types.test.tsx b/src/__tests__/TextInput.types.test.tsx
index ba55f925ddd..964be1afb23 100644
--- a/src/__tests__/TextInput.types.test.tsx
+++ b/src/__tests__/TextInput.types.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import {TextInput} from '..'
+import {SearchIcon} from '@primer/octicons-react'
 
 export function shouldNotAcceptInvalidDomProps() {
   // @ts-expect-error invalid DOM props should not be accepted
@@ -10,3 +11,34 @@ export function shouldNotAcceptInvalidSize() {
   // @ts-expect-error invalid size value should not be accepted
   return <TextInput size="big" />
 }
+
+export function shouldAcceptLeadingAndTrailingVisualsOfVariousTypes() {
+  return (
+    <>
+      <TextInput leadingVisual={SearchIcon} trailingVisual={SearchIcon} />
+      <TextInput leadingVisual={<SearchIcon />} trailingVisual={<SearchIcon />} />
+      <TextInput leadingVisual="Visual" trailingVisual="Visual" />
+      <TextInput
+        leadingVisual={React.memo(() => (
+          <div />
+        ))}
+        trailingVisual={React.memo(() => (
+          <div />
+        ))}
+      />
+      <TextInput
+        leadingVisual={React.lazy(() => Promise.resolve({default: () => <div />}))}
+        trailingVisual={React.lazy(() => Promise.resolve({default: () => <div />}))}
+      />
+      <TextInput
+        leadingVisual={React.forwardRef(() => (
+          <div />
+        ))}
+        trailingVisual={React.forwardRef(() => (
+          <div />
+        ))}
+      />
+      <TextInput leadingVisual={() => <div />} trailingVisual={() => <div />} />
+    </>
+  )
+}
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 12f447b6d76..6dd602143a5 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -875,7 +875,7 @@ exports[`TextInput renders leadingVisual 1`] = `
 </span>
 `;
 
-exports[`TextInput renders monospace 1`] = `
+exports[`TextInput renders leadingVisual 2`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -895,10 +895,9 @@ exports[`TextInput renders monospace 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
-  font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+  padding-left: 12px;
   padding-right: 0;
 }
 
@@ -954,7 +953,7 @@ exports[`TextInput renders monospace 1`] = `
 
 .c0 > input,
 .c0 > select {
-  padding-left: 12px;
+  padding-left: 0;
   padding-right: 12px;
 }
 
@@ -983,18 +982,45 @@ exports[`TextInput renders monospace 1`] = `
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
+  <span
+    className="TextInput-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-search"
+      fill="currentColor"
+      focusable="false"
+      height={16}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    >
+      <path
+        d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+      />
+    </svg>
+  </span>
   <input
     className="c1"
     data-component="input"
-    name="zipcode"
+    name="search"
     onBlur={[Function]}
     onFocus={[Function]}
+    placeholder="Search"
     type="text"
   />
 </span>
 `;
 
-exports[`TextInput renders placeholder 1`] = `
+exports[`TextInput renders leadingVisual 3`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1016,7 +1042,7 @@ exports[`TextInput renders placeholder 1`] = `
   min-height: 32px;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+  padding-left: 12px;
   padding-right: 0;
 }
 
@@ -1072,7 +1098,7 @@ exports[`TextInput renders placeholder 1`] = `
 
 .c0 > input,
 .c0 > select {
-  padding-left: 12px;
+  padding-left: 0;
   padding-right: 12px;
 }
 
@@ -1101,19 +1127,26 @@ exports[`TextInput renders placeholder 1`] = `
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
+  <span
+    className="TextInput-icon"
+  >
+    <div>
+      Trailing
+    </div>
+  </span>
   <input
     className="c1"
     data-component="input"
-    name="zipcode"
+    name="search"
     onBlur={[Function]}
     onFocus={[Function]}
-    placeholder="560076"
+    placeholder="Search"
     type="text"
   />
 </span>
 `;
 
-exports[`TextInput renders small 1`] = `
+exports[`TextInput renders leadingVisual 4`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1133,17 +1166,9 @@ exports[`TextInput renders small 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
-  --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;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+  padding-left: 12px;
   padding-right: 0;
 }
 
@@ -1199,7 +1224,7 @@ exports[`TextInput renders small 1`] = `
 
 .c0 > input,
 .c0 > select {
-  padding-left: 12px;
+  padding-left: 0;
   padding-right: 12px;
 }
 
@@ -1227,261 +1252,265 @@ exports[`TextInput renders small 1`] = `
   aria-busy={false}
   className="c0 TextInput-wrapper"
   onClick={[Function]}
-  size="small"
 >
+  <span
+    className="TextInput-icon"
+  >
+    <div>
+      Trailing
+    </div>
+  </span>
   <input
     className="c1"
     data-component="input"
-    name="zipcode"
+    name="search"
     onBlur={[Function]}
     onFocus={[Function]}
+    placeholder="Search"
     type="text"
   />
 </span>
 `;
 
-exports[`TextInput renders trailingAction icon button 1`] = `
-.c2 {
-  margin-left: 4px;
-  margin-right: 4px;
-  line-height: 0;
-}
-
-.c4 {
-  border-radius: 6px;
-  border: 1px solid;
-  border-color: transparent;
-  font-family: inherit;
-  font-weight: 500;
+exports[`TextInput renders monospace 1`] = `
+.c0 {
   font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: #0969da;
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c4:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid #0969da;
-  outline-offset: -2px;
-}
-
-.c4:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c4:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid #0969da;
-  outline-offset: -2px;
-}
-
-.c4[href] {
+  line-height: 20px;
+  color: #1F2328;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.c4[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c4:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
+.c0 input,
+.c0 textarea {
+  cursor: text;
 }
 
-.c4:active {
-  -webkit-transition: none;
-  transition: none;
+.c0 select {
+  cursor: pointer;
 }
 
-.c4:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: #8c959f;
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
 }
 
-.c4:disabled [data-component=ButtonCounter],
-.c4:disabled [data-component="leadingVisual"],
-.c4:disabled [data-component="trailingAction"] {
-  color: inherit;
+.c0::-moz-placeholder {
+  color: #6e7781;
 }
 
-.c4 [data-component=ButtonCounter] {
-  font-size: 14px;
+.c0:-ms-input-placeholder {
+  color: #6e7781;
 }
 
-.c4[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
+.c0::placeholder {
+  color: #6e7781;
 }
 
-.c4[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
+.c0:focus-within {
+  border-color: #0969da;
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
-.c4[data-size="small"] [data-component="text"] {
-  line-height: calc(20 / 12);
+.c0 > textarea {
+  padding: 12px;
 }
 
-.c4[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
+.c0 > :not(:last-child) {
+  margin-right: 8px;
 }
 
-.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #656d76;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
-.c4[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
-.c4[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
 }
 
-.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
+.c1:focus {
+  outline: 0;
 }
 
-.c4[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
 }
 
-.c4[data-block="block"] {
-  width: 100%;
-}
-
-.c4 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-  color: #656d76;
-}
+<span
+  aria-busy={false}
+  className="c0 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="text"
+  />
+</span>
+`;
 
-.c4 [data-component="text"] {
-  grid-area: text;
-  line-height: calc(20/14);
-  white-space: nowrap;
+exports[`TextInput renders placeholder 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #1F2328;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.c4 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
+.c0 input,
+.c0 textarea {
+  cursor: text;
 }
 
-.c4 [data-component="trailingAction"] {
-  margin-right: -4px;
-  color: #656d76;
+.c0 select {
+  cursor: pointer;
 }
 
-.c4 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
 }
 
-.c4 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
+.c0::-moz-placeholder {
+  color: #6e7781;
 }
 
-.c4:hover:not([disabled]) {
-  background-color: #f3f4f6;
+.c0:-ms-input-placeholder {
+  color: #6e7781;
 }
 
-.c4:active:not([disabled]) {
-  background-color: hsla(220,14%,94%,1);
+.c0::placeholder {
+  color: #6e7781;
 }
 
-.c4[aria-expanded=true] {
-  background-color: hsla(220,14%,94%,1);
+.c0:focus-within {
+  border-color: #0969da;
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
-.c4[data-component="IconButton"][data-no-visuals] {
-  color: #656d76;
+.c0 > textarea {
+  padding: 12px;
 }
 
-.c4[data-no-visuals] {
-  color: #0969da;
+.c0 > :not(:last-child) {
+  margin-right: 8px;
 }
 
-.c4:has([data-component="ButtonCounter"]) {
-  color: #0969da;
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #656d76;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
-.c4:disabled[data-no-visuals] {
-  color: #8c959f;
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
-.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
   color: inherit;
+  width: 100%;
 }
 
-.c4[data-size="small"][data-no-visuals="true"] {
-  padding-top: 2px;
-  padding-right: 4px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  position: relative;
+.c1:focus {
+  outline: 0;
 }
 
-.c4[data-size="small"][data-no-visuals="true"][data-component="IconButton"] {
-  width: var(--inner-action-size);
-  height: var(--inner-action-size);
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
 }
 
+<span
+  aria-busy={false}
+  className="c0 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="560076"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders small 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1501,6 +1530,14 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --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;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 0;
@@ -1532,6 +1569,12 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   color: #6e7781;
 }
 
+.c0:focus-within {
+  border-color: #0969da;
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
+}
+
 .c0 > textarea {
   padding: 12px;
 }
@@ -1554,7 +1597,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 .c0 > input,
 .c0 > select {
   padding-left: 12px;
-  padding-right: 0;
+  padding-right: 12px;
 }
 
 .c1 {
@@ -1571,51 +1614,405 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   outline: 0;
 }
 
-.c3 {
-  position: relative;
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
 }
 
-.c3::before {
-  position: absolute;
-  z-index: 1000001;
-  display: none;
-  width: 0px;
-  height: 0px;
-  color: #24292f;
-  pointer-events: none;
-  content: '';
-  border: 6px solid transparent;
-  opacity: 0;
+<span
+  aria-busy={false}
+  className="c0 TextInput-wrapper"
+  onClick={[Function]}
+  size="small"
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders trailingAction icon button 1`] = `
+.c2 {
+  margin-left: 4px;
+  margin-right: 4px;
+  line-height: 0;
 }
 
-.c3::after {
-  position: absolute;
-  z-index: 1000000;
-  display: none;
-  padding: 0.5em 0.75em;
-  font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-  -webkit-font-smoothing: subpixel-antialiased;
-  color: #ffffff;
-  text-align: center;
+.c4 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: transparent;
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  word-wrap: break-word;
-  white-space: pre;
-  pointer-events: none;
-  content: attr(aria-label);
-  background: #24292f;
-  border-radius: 3px;
-  opacity: 0;
-}
-
-.c3:hover::before,
-.c3:active::before,
+  text-align: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: #0969da;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c4:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
+.c4:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c4:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
+.c4[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c4[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c4:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
+.c4:disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  color: #8c959f;
+}
+
+.c4:disabled [data-component=ButtonCounter],
+.c4:disabled [data-component="leadingVisual"],
+.c4:disabled [data-component="trailingAction"] {
+  color: inherit;
+}
+
+.c4 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c4[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c4[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c4[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c4[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c4[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c4[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c4[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c4[data-block="block"] {
+  width: 100%;
+}
+
+.c4 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
+  color: #656d76;
+}
+
+.c4 [data-component="text"] {
+  grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
+}
+
+.c4 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
+}
+
+.c4 [data-component="trailingAction"] {
+  margin-right: -4px;
+  color: #656d76;
+}
+
+.c4 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c4 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c4:hover:not([disabled]) {
+  background-color: #f3f4f6;
+}
+
+.c4:active:not([disabled]) {
+  background-color: hsla(220,14%,94%,1);
+}
+
+.c4[aria-expanded=true] {
+  background-color: hsla(220,14%,94%,1);
+}
+
+.c4[data-component="IconButton"][data-no-visuals] {
+  color: #656d76;
+}
+
+.c4[data-no-visuals] {
+  color: #0969da;
+}
+
+.c4:has([data-component="ButtonCounter"]) {
+  color: #0969da;
+}
+
+.c4:disabled[data-no-visuals] {
+  color: #8c959f;
+}
+
+.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
+  color: inherit;
+}
+
+.c4[data-size="small"][data-no-visuals="true"] {
+  padding-top: 2px;
+  padding-right: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  position: relative;
+}
+
+.c4[data-size="small"][data-no-visuals="true"][data-component="IconButton"] {
+  width: var(--inner-action-size);
+  height: var(--inner-action-size);
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #1F2328;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #656d76;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c3 {
+  position: relative;
+}
+
+.c3::before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0px;
+  height: 0px;
+  color: #24292f;
+  pointer-events: none;
+  content: '';
+  border: 6px solid transparent;
+  opacity: 0;
+}
+
+.c3::after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: 0.5em 0.75em;
+  font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: #ffffff;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: #24292f;
+  border-radius: 3px;
+  opacity: 0;
+}
+
+.c3:hover::before,
+.c3:active::before,
 .c3:focus::before,
 .c3:focus-within::before,
 .c3:hover::after,
@@ -1625,184 +2022,608 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  -webkit-animation-name: tooltip-appear;
-  animation-name: tooltip-appear;
-  -webkit-animation-duration: 0.1s;
-  animation-duration: 0.1s;
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-  -webkit-animation-timing-function: ease-in;
-  animation-timing-function: ease-in;
-  -webkit-animation-delay: 0.4s;
-  animation-delay: 0.4s;
+  -webkit-animation-name: tooltip-appear;
+  animation-name: tooltip-appear;
+  -webkit-animation-duration: 0.1s;
+  animation-duration: 0.1s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.c3.tooltipped-no-delay:hover::before,
+.c3.tooltipped-no-delay:active::before,
+.c3.tooltipped-no-delay:focus::before,
+.c3.tooltipped-no-delay:focus-within::before,
+.c3.tooltipped-no-delay:hover::after,
+.c3.tooltipped-no-delay:active::after,
+.c3.tooltipped-no-delay:focus::after,
+.c3.tooltipped-no-delay:focus-within::after {
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+
+.c3.tooltipped-multiline:hover::after,
+.c3.tooltipped-multiline:active::after,
+.c3.tooltipped-multiline:focus::after,
+.c3.tooltipped-multiline:focus-within::after {
+  display: table-cell;
+}
+
+.c3.tooltipped-s::after,
+.c3.tooltipped-se::after,
+.c3.tooltipped-sw::after {
+  top: 100%;
+  right: 50%;
+  margin-top: 6px;
+}
+
+.c3.tooltipped-s::before,
+.c3.tooltipped-se::before,
+.c3.tooltipped-sw::before {
+  top: auto;
+  right: 50%;
+  bottom: -7px;
+  margin-right: -6px;
+  border-bottom-color: #24292f;
+}
+
+.c3.tooltipped-se::after {
+  right: auto;
+  left: 50%;
+  margin-left: -16px;
+}
+
+.c3.tooltipped-sw::after {
+  margin-right: -16px;
+}
+
+.c3.tooltipped-n::after,
+.c3.tooltipped-ne::after,
+.c3.tooltipped-nw::after {
+  right: 50%;
+  bottom: 100%;
+  margin-bottom: 6px;
+}
+
+.c3.tooltipped-n::before,
+.c3.tooltipped-ne::before,
+.c3.tooltipped-nw::before {
+  top: -7px;
+  right: 50%;
+  bottom: auto;
+  margin-right: -6px;
+  border-top-color: #24292f;
+}
+
+.c3.tooltipped-ne::after {
+  right: auto;
+  left: 50%;
+  margin-left: -16px;
+}
+
+.c3.tooltipped-nw::after {
+  margin-right: -16px;
+}
+
+.c3.tooltipped-s::after,
+.c3.tooltipped-n::after {
+  -webkit-transform: translateX(50%);
+  -ms-transform: translateX(50%);
+  transform: translateX(50%);
+}
+
+.c3.tooltipped-w::after {
+  right: 100%;
+  bottom: 50%;
+  margin-right: 6px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%);
+}
+
+.c3.tooltipped-w::before {
+  top: 50%;
+  bottom: 50%;
+  left: -7px;
+  margin-top: -6px;
+  border-left-color: #24292f;
+}
+
+.c3.tooltipped-e::after {
+  bottom: 50%;
+  left: 100%;
+  margin-left: 6px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%);
+}
+
+.c3.tooltipped-e::before {
+  top: 50%;
+  right: -7px;
+  bottom: 50%;
+  margin-top: -6px;
+  border-right-color: #24292f;
+}
+
+.c3.tooltipped-multiline::after {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 250px;
+  word-wrap: break-word;
+  white-space: pre-line;
+  border-collapse: separate;
+}
+
+.c3.tooltipped-multiline.tooltipped-s::after,
+.c3.tooltipped-multiline.tooltipped-n::after {
+  right: auto;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.c3.tooltipped-multiline.tooltipped-w::after,
+.c3.tooltipped-multiline.tooltipped-e::after {
+  right: 100%;
+}
+
+.c3.tooltipped-align-right-2::after {
+  right: 0;
+  margin-right: 0;
+}
+
+.c3.tooltipped-align-right-2::before {
+  right: 15px;
+}
+
+.c3.tooltipped-align-left-2::after {
+  left: 0;
+  margin-left: 0;
+}
+
+.c3.tooltipped-align-left-2::before {
+  left: 10px;
+}
+
+@media (forced-colors:active) {
+  .c4:focus {
+    outline: solid 1px transparent;
+  }
+}
+
+@media (pointer:coarse) {
+  .c4[data-size="small"][data-no-visuals="true"]:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    top: 50%;
+    min-height: 44px;
+  }
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="c2 TextInput-action"
+  >
+    <span
+      aria-label="iconLabel"
+      className="c3 tooltipped-n"
+      role="tooltip"
+    >
+      <button
+        aria-label="iconLabel"
+        className="c4"
+        data-block={null}
+        data-component="IconButton"
+        data-no-visuals={true}
+        data-size="small"
+        onClick={[MockFunction]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-search"
+          fill="currentColor"
+          focusable="false"
+          height={16}
+          role="img"
+          style={
+            {
+              "display": "inline-block",
+              "overflow": "visible",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={16}
+        >
+          <path
+            d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+          />
+        </svg>
+      </button>
+    </span>
+  </span>
+</span>
+`;
+
+exports[`TextInput renders trailingAction text button 1`] = `
+.c2 {
+  margin-left: 4px;
+  margin-right: 4px;
+  line-height: 0;
+}
+
+.c4 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c3 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: transparent;
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: #0969da;
+  background-color: transparent;
+  box-shadow: none;
 }
 
-.c3.tooltipped-no-delay:hover::before,
-.c3.tooltipped-no-delay:active::before,
-.c3.tooltipped-no-delay:focus::before,
-.c3.tooltipped-no-delay:focus-within::before,
-.c3.tooltipped-no-delay:hover::after,
-.c3.tooltipped-no-delay:active::after,
-.c3.tooltipped-no-delay:focus::after,
-.c3.tooltipped-no-delay:focus-within::after {
-  -webkit-animation-delay: 0s;
-  animation-delay: 0s;
+.c3:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
 }
 
-.c3.tooltipped-multiline:hover::after,
-.c3.tooltipped-multiline:active::after,
-.c3.tooltipped-multiline:focus::after,
-.c3.tooltipped-multiline:focus-within::after {
-  display: table-cell;
+.c3:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
 }
 
-.c3.tooltipped-s::after,
-.c3.tooltipped-se::after,
-.c3.tooltipped-sw::after {
-  top: 100%;
-  right: 50%;
-  margin-top: 6px;
+.c3:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
+.c3[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c3[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c3:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c3:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
+.c3:disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  color: #8c959f;
+}
+
+.c3:disabled [data-component=ButtonCounter],
+.c3:disabled [data-component="leadingVisual"],
+.c3:disabled [data-component="trailingAction"] {
+  color: inherit;
+}
+
+.c3 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c3[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c3[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c3[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c3[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c3[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c3[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c3[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c3[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c3[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c3[data-block="block"] {
+  width: 100%;
+}
+
+.c3 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
+  color: #656d76;
+}
+
+.c3 [data-component="text"] {
+  grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
+}
+
+.c3 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
+}
+
+.c3 [data-component="trailingAction"] {
+  margin-right: -4px;
+  color: #656d76;
+}
+
+.c3 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c3 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c3:hover:not([disabled]) {
+  background-color: #f3f4f6;
+}
+
+.c3:active:not([disabled]) {
+  background-color: hsla(220,14%,94%,1);
+}
+
+.c3[aria-expanded=true] {
+  background-color: hsla(220,14%,94%,1);
 }
 
-.c3.tooltipped-s::before,
-.c3.tooltipped-se::before,
-.c3.tooltipped-sw::before {
-  top: auto;
-  right: 50%;
-  bottom: -7px;
-  margin-right: -6px;
-  border-bottom-color: #24292f;
+.c3[data-component="IconButton"][data-no-visuals] {
+  color: #656d76;
 }
 
-.c3.tooltipped-se::after {
-  right: auto;
-  left: 50%;
-  margin-left: -16px;
+.c3[data-no-visuals] {
+  color: #0969da;
 }
 
-.c3.tooltipped-sw::after {
-  margin-right: -16px;
+.c3:has([data-component="ButtonCounter"]) {
+  color: #0969da;
 }
 
-.c3.tooltipped-n::after,
-.c3.tooltipped-ne::after,
-.c3.tooltipped-nw::after {
-  right: 50%;
-  bottom: 100%;
-  margin-bottom: 6px;
+.c3:disabled[data-no-visuals] {
+  color: #8c959f;
 }
 
-.c3.tooltipped-n::before,
-.c3.tooltipped-ne::before,
-.c3.tooltipped-nw::before {
-  top: -7px;
-  right: 50%;
-  bottom: auto;
-  margin-right: -6px;
-  border-top-color: #24292f;
+.c3:disabled[data-no-visuals] [data-component=ButtonCounter] {
+  color: inherit;
 }
 
-.c3.tooltipped-ne::after {
-  right: auto;
-  left: 50%;
-  margin-left: -16px;
+.c3[data-no-visuals="true"] {
+  padding-top: 2px;
+  padding-right: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  position: relative;
 }
 
-.c3.tooltipped-nw::after {
-  margin-right: -16px;
+.c3[data-no-visuals="true"][data-component="IconButton"] {
+  width: var(--inner-action-size);
+  height: var(--inner-action-size);
 }
 
-.c3.tooltipped-s::after,
-.c3.tooltipped-n::after {
-  -webkit-transform: translateX(50%);
-  -ms-transform: translateX(50%);
-  transform: translateX(50%);
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #1F2328;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.c3.tooltipped-w::after {
-  right: 100%;
-  bottom: 50%;
-  margin-right: 6px;
-  -webkit-transform: translateY(50%);
-  -ms-transform: translateY(50%);
-  transform: translateY(50%);
+.c0 input,
+.c0 textarea {
+  cursor: text;
 }
 
-.c3.tooltipped-w::before {
-  top: 50%;
-  bottom: 50%;
-  left: -7px;
-  margin-top: -6px;
-  border-left-color: #24292f;
+.c0 select {
+  cursor: pointer;
 }
 
-.c3.tooltipped-e::after {
-  bottom: 50%;
-  left: 100%;
-  margin-left: 6px;
-  -webkit-transform: translateY(50%);
-  -ms-transform: translateY(50%);
-  transform: translateY(50%);
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-e::before {
-  top: 50%;
-  right: -7px;
-  bottom: 50%;
-  margin-top: -6px;
-  border-right-color: #24292f;
+.c0::-moz-placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-multiline::after {
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
-  max-width: 250px;
-  word-wrap: break-word;
-  white-space: pre-line;
-  border-collapse: separate;
+.c0:-ms-input-placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-multiline.tooltipped-s::after,
-.c3.tooltipped-multiline.tooltipped-n::after {
-  right: auto;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
+.c0::placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-multiline.tooltipped-w::after,
-.c3.tooltipped-multiline.tooltipped-e::after {
-  right: 100%;
+.c0 > textarea {
+  padding: 12px;
 }
 
-.c3.tooltipped-align-right-2::after {
-  right: 0;
-  margin-right: 0;
+.c0 > :not(:last-child) {
+  margin-right: 8px;
 }
 
-.c3.tooltipped-align-right-2::before {
-  right: 15px;
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #656d76;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
-.c3.tooltipped-align-left-2::after {
-  left: 0;
-  margin-left: 0;
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
-.c3.tooltipped-align-left-2::before {
-  left: 10px;
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
 }
 
 @media (forced-colors:active) {
-  .c4:focus {
+  .c3:focus {
     outline: solid 1px transparent;
   }
 }
 
 @media (pointer:coarse) {
-  .c4[data-size="small"][data-no-visuals="true"]:after {
+  .c3[data-no-visuals="true"]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -1838,64 +2659,43 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   <span
     className="c2 TextInput-action"
   >
-    <span
-      aria-label="iconLabel"
-      className="c3 tooltipped-n"
-      role="tooltip"
+    <button
+      className="c3"
+      data-block={null}
+      data-no-visuals={true}
+      onClick={[MockFunction]}
+      type="button"
     >
-      <button
-        aria-label="iconLabel"
+      <span
         className="c4"
-        data-block={null}
-        data-component="IconButton"
-        data-no-visuals={true}
-        data-size="small"
-        onClick={[MockFunction]}
-        type="button"
+        data-component="buttonContent"
       >
-        <svg
-          aria-hidden="true"
-          className="octicon octicon-search"
-          fill="currentColor"
-          focusable="false"
-          height={16}
-          role="img"
-          style={
-            {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
-          }
-          viewBox="0 0 16 16"
-          width={16}
+        <span
+          data-component="text"
         >
-          <path
-            d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
-          />
-        </svg>
-      </button>
-    </span>
+          Clear
+        </span>
+      </span>
+    </button>
   </span>
 </span>
 `;
 
-exports[`TextInput renders trailingAction text button 1`] = `
+exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c2 {
   margin-left: 4px;
   margin-right: 4px;
   line-height: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
 }
 
-.c3 {
+.c4 {
   border-radius: 6px;
   border: 1px solid;
   border-color: transparent;
@@ -1940,61 +2740,61 @@ exports[`TextInput renders trailingAction text button 1`] = `
   box-shadow: none;
 }
 
-.c3:focus:not(:disabled) {
+.c4:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c3:focus:not(:disabled):not(:focus-visible) {
+.c4:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c3:focus-visible:not(:disabled) {
+.c4:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c3[href] {
+.c4[href] {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c3[href]:hover {
+.c4[href]:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c3:hover {
+.c4:hover {
   -webkit-transition-duration: 80ms;
   transition-duration: 80ms;
 }
 
-.c3:active {
+.c4:active {
   -webkit-transition: none;
   transition: none;
 }
 
-.c3:disabled {
+.c4:disabled {
   cursor: not-allowed;
   box-shadow: none;
   color: #8c959f;
 }
 
-.c3:disabled [data-component=ButtonCounter],
-.c3:disabled [data-component="leadingVisual"],
-.c3:disabled [data-component="trailingAction"] {
+.c4:disabled [data-component=ButtonCounter],
+.c4:disabled [data-component="leadingVisual"],
+.c4:disabled [data-component="trailingAction"] {
   color: inherit;
 }
 
-.c3 [data-component=ButtonCounter] {
+.c4 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
-.c3[data-component=IconButton] {
+.c4[data-component=IconButton] {
   display: inline-grid;
   padding: unset;
   place-content: center;
@@ -2002,70 +2802,70 @@ exports[`TextInput renders trailingAction text button 1`] = `
   min-width: unset;
 }
 
-.c3[data-size="small"] {
+.c4[data-size="small"] {
   padding: 0 8px;
   height: 28px;
   gap: 4px;
   font-size: 12px;
 }
 
-.c3[data-size="small"] [data-component="text"] {
+.c4[data-size="small"] [data-component="text"] {
   line-height: calc(20 / 12);
 }
 
-.c3[data-size="small"] [data-component=ButtonCounter] {
+.c4[data-size="small"] [data-component=ButtonCounter] {
   font-size: 12px;
 }
 
-.c3[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 4px;
 }
 
-.c3[data-size="small"][data-component=IconButton] {
+.c4[data-size="small"][data-component=IconButton] {
   width: 28px;
   padding: unset;
 }
 
-.c3[data-size="large"] {
+.c4[data-size="large"] {
   padding: 0 16px;
   height: 40px;
   gap: 8px;
 }
 
-.c3[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c3[data-size="large"][data-component=IconButton] {
+.c4[data-size="large"][data-component=IconButton] {
   width: 40px;
   padding: unset;
 }
 
-.c3[data-block="block"] {
+.c4[data-block="block"] {
   width: 100%;
 }
 
-.c3 [data-component="leadingVisual"] {
+.c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
   color: #656d76;
 }
 
-.c3 [data-component="text"] {
+.c4 [data-component="text"] {
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
 }
 
-.c3 [data-component="trailingVisual"] {
+.c4 [data-component="trailingVisual"] {
   grid-area: trailingVisual;
 }
 
-.c3 [data-component="trailingAction"] {
+.c4 [data-component="trailingAction"] {
   margin-right: -4px;
   color: #656d76;
 }
 
-.c3 [data-component="buttonContent"] {
+.c4 [data-component="buttonContent"] {
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
@@ -2081,43 +2881,43 @@ exports[`TextInput renders trailingAction text button 1`] = `
   align-content: center;
 }
 
-.c3 [data-component="buttonContent"] > :not(:last-child) {
+.c4 [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c3:hover:not([disabled]) {
+.c4:hover:not([disabled]) {
   background-color: #f3f4f6;
 }
 
-.c3:active:not([disabled]) {
+.c4:active:not([disabled]) {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c3[aria-expanded=true] {
+.c4[aria-expanded=true] {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c3[data-component="IconButton"][data-no-visuals] {
+.c4[data-component="IconButton"][data-no-visuals] {
   color: #656d76;
 }
 
-.c3[data-no-visuals] {
+.c4[data-no-visuals] {
   color: #0969da;
 }
 
-.c3:has([data-component="ButtonCounter"]) {
+.c4:has([data-component="ButtonCounter"]) {
   color: #0969da;
 }
 
-.c3:disabled[data-no-visuals] {
+.c4:disabled[data-no-visuals] {
   color: #8c959f;
 }
 
-.c3:disabled[data-no-visuals] [data-component=ButtonCounter] {
+.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
   color: inherit;
 }
 
-.c3[data-no-visuals="true"] {
+.c4[data-no-visuals="true"] {
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
@@ -2125,7 +2925,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   position: relative;
 }
 
-.c3[data-no-visuals="true"][data-component="IconButton"] {
+.c4[data-no-visuals="true"][data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);
 }
@@ -2219,320 +3019,303 @@ exports[`TextInput renders trailingAction text button 1`] = `
   outline: 0;
 }
 
-@media (forced-colors:active) {
-  .c3:focus {
-    outline: solid 1px transparent;
-  }
-}
-
-@media (pointer:coarse) {
-  .c3[data-no-visuals="true"]:after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
-    top: 50%;
-    min-height: 44px;
-  }
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-<span
-  aria-busy={false}
-  className="c0 TextInput-wrapper"
-  onClick={[Function]}
->
-  <input
-    className="c1"
-    data-component="input"
-    name="search"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    placeholder="Search"
-    type="text"
-  />
-  <span
-    className="c2 TextInput-action"
-  >
-    <button
-      className="c3"
-      data-block={null}
-      data-no-visuals={true}
-      onClick={[MockFunction]}
-      type="button"
-    >
-      <span
-        className="c4"
-        data-component="buttonContent"
-      >
-        <span
-          data-component="text"
-        >
-          Clear
-        </span>
-      </span>
-    </button>
-  </span>
-</span>
-`;
-
-exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
-.c2 {
-  margin-left: 4px;
-  margin-right: 4px;
-  line-height: 0;
+.c3 {
+  position: relative;
+  display: inline-block;
 }
 
-.c5 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+.c3::before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0px;
+  height: 0px;
+  color: #24292f;
+  pointer-events: none;
+  content: '';
+  border: 6px solid transparent;
+  opacity: 0;
 }
 
-.c4 {
-  border-radius: 6px;
-  border: 1px solid;
-  border-color: transparent;
-  font-family: inherit;
-  font-weight: 500;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+.c3::after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: 0.5em 0.75em;
+  font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: #ffffff;
   text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: #0969da;
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c4:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid #0969da;
-  outline-offset: -2px;
-}
-
-.c4:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c4:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid #0969da;
-  outline-offset: -2px;
-}
-
-.c4[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c4[href]:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: #24292f;
+  border-radius: 3px;
+  opacity: 0;
 }
 
-.c4:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c4:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c4:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: #8c959f;
-}
-
-.c4:disabled [data-component=ButtonCounter],
-.c4:disabled [data-component="leadingVisual"],
-.c4:disabled [data-component="trailingAction"] {
-  color: inherit;
-}
-
-.c4 [data-component=ButtonCounter] {
-  font-size: 14px;
+.c3:hover::before,
+.c3:active::before,
+.c3:focus::before,
+.c3:focus-within::before,
+.c3:hover::after,
+.c3:active::after,
+.c3:focus::after,
+.c3:focus-within::after {
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-animation-name: tooltip-appear;
+  animation-name: tooltip-appear;
+  -webkit-animation-duration: 0.1s;
+  animation-duration: 0.1s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
 }
 
-.c4[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
+.c3.tooltipped-no-delay:hover::before,
+.c3.tooltipped-no-delay:active::before,
+.c3.tooltipped-no-delay:focus::before,
+.c3.tooltipped-no-delay:focus-within::before,
+.c3.tooltipped-no-delay:hover::after,
+.c3.tooltipped-no-delay:active::after,
+.c3.tooltipped-no-delay:focus::after,
+.c3.tooltipped-no-delay:focus-within::after {
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
 }
 
-.c4[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
+.c3.tooltipped-multiline:hover::after,
+.c3.tooltipped-multiline:active::after,
+.c3.tooltipped-multiline:focus::after,
+.c3.tooltipped-multiline:focus-within::after {
+  display: table-cell;
 }
 
-.c4[data-size="small"] [data-component="text"] {
-  line-height: calc(20 / 12);
+.c3.tooltipped-s::after,
+.c3.tooltipped-se::after,
+.c3.tooltipped-sw::after {
+  top: 100%;
+  right: 50%;
+  margin-top: 6px;
 }
 
-.c4[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
+.c3.tooltipped-s::before,
+.c3.tooltipped-se::before,
+.c3.tooltipped-sw::before {
+  top: auto;
+  right: 50%;
+  bottom: -7px;
+  margin-right: -6px;
+  border-bottom-color: #24292f;
 }
 
-.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
+.c3.tooltipped-se::after {
+  right: auto;
+  left: 50%;
+  margin-left: -16px;
 }
 
-.c4[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
+.c3.tooltipped-sw::after {
+  margin-right: -16px;
 }
 
-.c4[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
+.c3.tooltipped-n::after,
+.c3.tooltipped-ne::after,
+.c3.tooltipped-nw::after {
+  right: 50%;
+  bottom: 100%;
+  margin-bottom: 6px;
 }
 
-.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
+.c3.tooltipped-n::before,
+.c3.tooltipped-ne::before,
+.c3.tooltipped-nw::before {
+  top: -7px;
+  right: 50%;
+  bottom: auto;
+  margin-right: -6px;
+  border-top-color: #24292f;
 }
 
-.c4[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
+.c3.tooltipped-ne::after {
+  right: auto;
+  left: 50%;
+  margin-left: -16px;
 }
 
-.c4[data-block="block"] {
-  width: 100%;
+.c3.tooltipped-nw::after {
+  margin-right: -16px;
 }
 
-.c4 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-  color: #656d76;
+.c3.tooltipped-s::after,
+.c3.tooltipped-n::after {
+  -webkit-transform: translateX(50%);
+  -ms-transform: translateX(50%);
+  transform: translateX(50%);
 }
 
-.c4 [data-component="text"] {
-  grid-area: text;
-  line-height: calc(20/14);
-  white-space: nowrap;
+.c3.tooltipped-w::after {
+  right: 100%;
+  bottom: 50%;
+  margin-right: 6px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%);
 }
 
-.c4 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
+.c3.tooltipped-w::before {
+  top: 50%;
+  bottom: 50%;
+  left: -7px;
+  margin-top: -6px;
+  border-left-color: #24292f;
 }
 
-.c4 [data-component="trailingAction"] {
-  margin-right: -4px;
-  color: #656d76;
+.c3.tooltipped-e::after {
+  bottom: 50%;
+  left: 100%;
+  margin-left: 6px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%);
 }
 
-.c4 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
+.c3.tooltipped-e::before {
+  top: 50%;
+  right: -7px;
+  bottom: 50%;
+  margin-top: -6px;
+  border-right-color: #24292f;
 }
 
-.c4 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
+.c3.tooltipped-multiline::after {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 250px;
+  word-wrap: break-word;
+  white-space: pre-line;
+  border-collapse: separate;
 }
 
-.c4:hover:not([disabled]) {
-  background-color: #f3f4f6;
+.c3.tooltipped-multiline.tooltipped-s::after,
+.c3.tooltipped-multiline.tooltipped-n::after {
+  right: auto;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
 }
 
-.c4:active:not([disabled]) {
-  background-color: hsla(220,14%,94%,1);
+.c3.tooltipped-multiline.tooltipped-w::after,
+.c3.tooltipped-multiline.tooltipped-e::after {
+  right: 100%;
 }
 
-.c4[aria-expanded=true] {
-  background-color: hsla(220,14%,94%,1);
+.c3.tooltipped-align-right-2::after {
+  right: 0;
+  margin-right: 0;
 }
 
-.c4[data-component="IconButton"][data-no-visuals] {
-  color: #656d76;
+.c3.tooltipped-align-right-2::before {
+  right: 15px;
 }
 
-.c4[data-no-visuals] {
-  color: #0969da;
+.c3.tooltipped-align-left-2::after {
+  left: 0;
+  margin-left: 0;
 }
 
-.c4:has([data-component="ButtonCounter"]) {
-  color: #0969da;
+.c3.tooltipped-align-left-2::before {
+  left: 10px;
 }
 
-.c4:disabled[data-no-visuals] {
-  color: #8c959f;
+@media (forced-colors:active) {
+  .c4:focus {
+    outline: solid 1px transparent;
+  }
 }
 
-.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
-  color: inherit;
+@media (pointer:coarse) {
+  .c4[data-no-visuals="true"]:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    top: 50%;
+    min-height: 44px;
+  }
 }
 
-.c4[data-no-visuals="true"] {
-  padding-top: 2px;
-  padding-right: 4px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  position: relative;
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
 }
 
-.c4[data-no-visuals="true"][data-component="IconButton"] {
-  width: var(--inner-action-size);
-  height: var(--inner-action-size);
-}
+<span
+  aria-busy={false}
+  className="c0 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="c2 TextInput-action"
+  >
+    <span
+      aria-label="Clear input"
+      className="c3 tooltipped-n"
+      role="tooltip"
+    >
+      <button
+        className="c4"
+        data-block={null}
+        data-no-visuals={true}
+        onClick={[MockFunction]}
+        type="button"
+      >
+        <span
+          className="c5"
+          data-component="buttonContent"
+        >
+          <span
+            data-component="text"
+          >
+            Clear
+          </span>
+        </span>
+      </button>
+    </span>
+  </span>
+</span>
+`;
 
+exports[`TextInput renders trailingVisual 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -2555,7 +3338,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 0;
-  padding-right: 0;
+  padding-right: 12px;
 }
 
 .c0 input,
@@ -2583,6 +3366,12 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   color: #6e7781;
 }
 
+.c0:focus-within {
+  border-color: #0969da;
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
+}
+
 .c0 > textarea {
   padding: 12px;
 }
@@ -2622,249 +3411,294 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   outline: 0;
 }
 
-.c3 {
-  position: relative;
-  display: inline-block;
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
 }
 
-.c3::before {
-  position: absolute;
-  z-index: 1000001;
-  display: none;
-  width: 0px;
-  height: 0px;
-  color: #24292f;
-  pointer-events: none;
-  content: '';
-  border: 6px solid transparent;
-  opacity: 0;
+<span
+  aria-busy={false}
+  className="c0 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="TextInput-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-search"
+      fill="currentColor"
+      focusable="false"
+      height={16}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    >
+      <path
+        d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextInput renders trailingVisual 2`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #1F2328;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
 }
 
-.c3::after {
-  position: absolute;
-  z-index: 1000000;
-  display: none;
-  padding: 0.5em 0.75em;
-  font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-  -webkit-font-smoothing: subpixel-antialiased;
-  color: #ffffff;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  word-wrap: break-word;
-  white-space: pre;
-  pointer-events: none;
-  content: attr(aria-label);
-  background: #24292f;
-  border-radius: 3px;
-  opacity: 0;
+.c0 input,
+.c0 textarea {
+  cursor: text;
 }
 
-.c3:hover::before,
-.c3:active::before,
-.c3:focus::before,
-.c3:focus-within::before,
-.c3:hover::after,
-.c3:active::after,
-.c3:focus::after,
-.c3:focus-within::after {
-  display: inline-block;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-animation-name: tooltip-appear;
-  animation-name: tooltip-appear;
-  -webkit-animation-duration: 0.1s;
-  animation-duration: 0.1s;
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-  -webkit-animation-timing-function: ease-in;
-  animation-timing-function: ease-in;
-  -webkit-animation-delay: 0.4s;
-  animation-delay: 0.4s;
+.c0 select {
+  cursor: pointer;
 }
 
-.c3.tooltipped-no-delay:hover::before,
-.c3.tooltipped-no-delay:active::before,
-.c3.tooltipped-no-delay:focus::before,
-.c3.tooltipped-no-delay:focus-within::before,
-.c3.tooltipped-no-delay:hover::after,
-.c3.tooltipped-no-delay:active::after,
-.c3.tooltipped-no-delay:focus::after,
-.c3.tooltipped-no-delay:focus-within::after {
-  -webkit-animation-delay: 0s;
-  animation-delay: 0s;
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-multiline:hover::after,
-.c3.tooltipped-multiline:active::after,
-.c3.tooltipped-multiline:focus::after,
-.c3.tooltipped-multiline:focus-within::after {
-  display: table-cell;
+.c0::-moz-placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-s::after,
-.c3.tooltipped-se::after,
-.c3.tooltipped-sw::after {
-  top: 100%;
-  right: 50%;
-  margin-top: 6px;
+.c0:-ms-input-placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-s::before,
-.c3.tooltipped-se::before,
-.c3.tooltipped-sw::before {
-  top: auto;
-  right: 50%;
-  bottom: -7px;
-  margin-right: -6px;
-  border-bottom-color: #24292f;
+.c0::placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-se::after {
-  right: auto;
-  left: 50%;
-  margin-left: -16px;
+.c0:focus-within {
+  border-color: #0969da;
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
-.c3.tooltipped-sw::after {
-  margin-right: -16px;
+.c0 > textarea {
+  padding: 12px;
 }
 
-.c3.tooltipped-n::after,
-.c3.tooltipped-ne::after,
-.c3.tooltipped-nw::after {
-  right: 50%;
-  bottom: 100%;
-  margin-bottom: 6px;
+.c0 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #656d76;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
 }
 
-.c3.tooltipped-n::before,
-.c3.tooltipped-ne::before,
-.c3.tooltipped-nw::before {
-  top: -7px;
-  right: 50%;
-  bottom: auto;
-  margin-right: -6px;
-  border-top-color: #24292f;
+.c1:focus {
+  outline: 0;
 }
 
-.c3.tooltipped-ne::after {
-  right: auto;
-  left: 50%;
-  margin-left: -16px;
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
 }
 
-.c3.tooltipped-nw::after {
-  margin-right: -16px;
-}
+<span
+  aria-busy={false}
+  className="c0 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c1"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="TextInput-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-search"
+      fill="currentColor"
+      focusable="false"
+      height={16}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    >
+      <path
+        d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+      />
+    </svg>
+  </span>
+</span>
+`;
 
-.c3.tooltipped-s::after,
-.c3.tooltipped-n::after {
-  -webkit-transform: translateX(50%);
-  -ms-transform: translateX(50%);
-  transform: translateX(50%);
+exports[`TextInput renders trailingVisual 3`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #1F2328;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
 }
 
-.c3.tooltipped-w::after {
-  right: 100%;
-  bottom: 50%;
-  margin-right: 6px;
-  -webkit-transform: translateY(50%);
-  -ms-transform: translateY(50%);
-  transform: translateY(50%);
+.c0 input,
+.c0 textarea {
+  cursor: text;
 }
 
-.c3.tooltipped-w::before {
-  top: 50%;
-  bottom: 50%;
-  left: -7px;
-  margin-top: -6px;
-  border-left-color: #24292f;
+.c0 select {
+  cursor: pointer;
 }
 
-.c3.tooltipped-e::after {
-  bottom: 50%;
-  left: 100%;
-  margin-left: 6px;
-  -webkit-transform: translateY(50%);
-  -ms-transform: translateY(50%);
-  transform: translateY(50%);
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-e::before {
-  top: 50%;
-  right: -7px;
-  bottom: 50%;
-  margin-top: -6px;
-  border-right-color: #24292f;
+.c0::-moz-placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-multiline::after {
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
-  max-width: 250px;
-  word-wrap: break-word;
-  white-space: pre-line;
-  border-collapse: separate;
+.c0:-ms-input-placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-multiline.tooltipped-s::after,
-.c3.tooltipped-multiline.tooltipped-n::after {
-  right: auto;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
+.c0::placeholder {
+  color: #6e7781;
 }
 
-.c3.tooltipped-multiline.tooltipped-w::after,
-.c3.tooltipped-multiline.tooltipped-e::after {
-  right: 100%;
+.c0:focus-within {
+  border-color: #0969da;
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
-.c3.tooltipped-align-right-2::after {
-  right: 0;
-  margin-right: 0;
+.c0 > textarea {
+  padding: 12px;
 }
 
-.c3.tooltipped-align-right-2::before {
-  right: 15px;
+.c0 > :not(:last-child) {
+  margin-right: 8px;
 }
 
-.c3.tooltipped-align-left-2::after {
-  left: 0;
-  margin-left: 0;
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #656d76;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
-.c3.tooltipped-align-left-2::before {
-  left: 10px;
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
 }
 
-@media (forced-colors:active) {
-  .c4:focus {
-    outline: solid 1px transparent;
-  }
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
 }
 
-@media (pointer:coarse) {
-  .c4[data-no-visuals="true"]:after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
-    top: 50%;
-    min-height: 44px;
-  }
+.c1:focus {
+  outline: 0;
 }
 
 @media (min-width:768px) {
@@ -2888,37 +3722,16 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
     type="text"
   />
   <span
-    className="c2 TextInput-action"
+    className="TextInput-icon"
   >
-    <span
-      aria-label="Clear input"
-      className="c3 tooltipped-n"
-      role="tooltip"
-    >
-      <button
-        className="c4"
-        data-block={null}
-        data-no-visuals={true}
-        onClick={[MockFunction]}
-        type="button"
-      >
-        <span
-          className="c5"
-          data-component="buttonContent"
-        >
-          <span
-            data-component="text"
-          >
-            Clear
-          </span>
-        </span>
-      </button>
-    </span>
+    <div>
+      Trailing
+    </div>
   </span>
 </span>
 `;
 
-exports[`TextInput renders trailingVisual 1`] = `
+exports[`TextInput renders trailingVisual 4`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -3037,28 +3850,9 @@ exports[`TextInput renders trailingVisual 1`] = `
   <span
     className="TextInput-icon"
   >
-    <svg
-      aria-hidden="true"
-      className="octicon octicon-search"
-      fill="currentColor"
-      focusable="false"
-      height={16}
-      role="img"
-      style={
-        {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
-          "verticalAlign": "text-bottom",
-        }
-      }
-      viewBox="0 0 16 16"
-      width={16}
-    >
-      <path
-        d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
-      />
-    </svg>
+    <div>
+      Trailing
+    </div>
   </span>
 </span>
 `;
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index f2119138454..bd1f7ba606b 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -2469,11 +2469,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={12}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -2520,11 +2520,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={12}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -2571,11 +2571,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={12}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -2622,11 +2622,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={12}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -2673,11 +2673,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={12}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -2724,11 +2724,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={12}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -2775,11 +2775,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={12}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -2826,11 +2826,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={12}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -3194,11 +3194,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={15}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -3245,11 +3245,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={15}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -3296,11 +3296,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={15}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -3347,11 +3347,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={15}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -3398,11 +3398,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={15}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -3449,11 +3449,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={15}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -3500,11 +3500,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={15}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -3551,11 +3551,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
+          viewBox="0 0 12 12"
           width={15}
         >
           <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+            d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
           />
         </svg>
       </span>
@@ -14718,11 +14718,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
                 "verticalAlign": "text-bottom",
               }
             }
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width={12}
           >
             <path
-              d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+              d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
             />
           </svg>
         </span>
@@ -14769,11 +14769,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
                 "verticalAlign": "text-bottom",
               }
             }
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width={12}
           >
             <path
-              d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+              d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
             />
           </svg>
         </span>
@@ -14820,11 +14820,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
                 "verticalAlign": "text-bottom",
               }
             }
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width={12}
           >
             <path
-              d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+              d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
             />
           </svg>
         </span>
@@ -14871,11 +14871,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
                 "verticalAlign": "text-bottom",
               }
             }
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width={12}
           >
             <path
-              d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+              d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
             />
           </svg>
         </span>
@@ -14922,11 +14922,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
                 "verticalAlign": "text-bottom",
               }
             }
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width={12}
           >
             <path
-              d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+              d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
             />
           </svg>
         </span>
@@ -14973,11 +14973,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
                 "verticalAlign": "text-bottom",
               }
             }
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width={12}
           >
             <path
-              d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+              d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
             />
           </svg>
         </span>
@@ -15024,11 +15024,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
                 "verticalAlign": "text-bottom",
               }
             }
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width={12}
           >
             <path
-              d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+              d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
             />
           </svg>
         </span>
@@ -15075,11 +15075,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
                 "verticalAlign": "text-bottom",
               }
             }
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width={12}
           >
             <path
-              d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+              d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
             />
           </svg>
         </span>
diff --git a/src/deprecated/ActionList/Item.tsx b/src/deprecated/ActionList/Item.tsx
index 755a78be028..573a4da70f5 100644
--- a/src/deprecated/ActionList/Item.tsx
+++ b/src/deprecated/ActionList/Item.tsx
@@ -1,5 +1,6 @@
-import {CheckIcon, IconProps} from '@primer/octicons-react'
+import {CheckIcon} from '@primer/octicons-react'
 import React, {useCallback} from 'react'
+import {isValidElementType} from 'react-is'
 import {get} from '../../constants'
 import sx, {SxProp} from '../../sx'
 import Truncate from '../../Truncate'
@@ -42,13 +43,13 @@ export interface ItemProps extends SxProp {
   /**
    * Icon (or similar) positioned before `Item` text.
    */
-  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  leadingVisual?: React.ElementType
 
   /**
    * @deprecated Use `trailingVisual` instead
    * Icon (or similar) positioned after `Item` text.
    */
-  trailingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  trailingIcon?: React.ElementType
 
   /**
    * @deprecated Use `trailingVisual` instead
@@ -59,7 +60,7 @@ export interface ItemProps extends SxProp {
   /**
    * Icon or text positioned after `Item` text.
    */
-  trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactNode
+  trailingVisual?: React.ElementType | React.ReactNode
 
   /**
    * Style variations associated with various `Item` types.
@@ -465,7 +466,11 @@ export const Item = React.forwardRef((itemProps, ref) => {
         {/* backward compatibility: prefer TrailingVisual but fallback to TrailingIcon */}
         {TrailingVisual ? (
           <TrailingContent variant={variant} disabled={disabled}>
-            {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+            {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? (
+              <TrailingVisual />
+            ) : (
+              TrailingVisual
+            )}
           </TrailingContent>
         ) : TrailingIcon || trailingText ? (
           <TrailingContent variant={variant} disabled={disabled}>
diff --git a/src/drafts/Button2/types.ts b/src/drafts/Button2/types.ts
index 7c92531816b..2d689771362 100644
--- a/src/drafts/Button2/types.ts
+++ b/src/drafts/Button2/types.ts
@@ -42,19 +42,19 @@ export type ButtonProps = {
   /**
    * The icon for the IconButton
    */
-  icon?: React.ComponentType | null | undefined
+  icon?: React.ElementType | null | undefined
   /**
    * The leading icon comes before button content
    */
-  leadingIcon?: React.ComponentType | null | undefined
+  leadingIcon?: React.ElementType | null | undefined
   /**
    * The trailing icon comes after button content
    */
-  trailingIcon?: React.ComponentType | null | undefined
+  trailingIcon?: React.ElementType | null | undefined
   /**
    * Trailing action appears to the right of the trailing visual and is always locked to the end
    */
-  trailingAction?: React.ComponentType | null | undefined
+  trailingAction?: React.ElementType | null | undefined
   children: React.ReactNode
   /**
    * Content alignment for when visuals are present
diff --git a/src/hooks/useSlots.ts b/src/hooks/useSlots.ts
index 42fe382e629..6d880fa9268 100644
--- a/src/hooks/useSlots.ts
+++ b/src/hooks/useSlots.ts
@@ -2,7 +2,7 @@ import React from 'react'
 import {warning} from '../utils/warning'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type SlotConfig = Record<string, React.ComponentType<any>>
+export type SlotConfig = Record<string, React.ElementType<any>>
 
 type SlotElements<Type extends SlotConfig> = {
   [Property in keyof Type]: React.ReactElement<React.ComponentPropsWithoutRef<Type[Property]>, Type[Property]>
diff --git a/src/internal/components/InputValidation.tsx b/src/internal/components/InputValidation.tsx
index 50848204a87..624cf414433 100644
--- a/src/internal/components/InputValidation.tsx
+++ b/src/internal/components/InputValidation.tsx
@@ -12,7 +12,7 @@ type Props = {
 
 const validationIconMap: Record<
   NonNullable<Props['validationStatus']>,
-  React.ComponentType<React.PropsWithChildren<IconProps>>
+  React.ElementType<React.PropsWithChildren<IconProps>>
 > = {
   success: CheckCircleFillIcon,
   error: AlertFillIcon,