From 47419e6f9c7651e66c35d484eb31c4850b018d04 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 9 Jun 2023 11:27:15 -0400
Subject: [PATCH 1/6] upgrade styled-components to v5

---
 package-lock.json                             |  228 +-
 package.json                                  |    8 +-
 .../__snapshots__/NavList.test.tsx.snap       |  369 +-
 .../__snapshots__/PageLayout.test.tsx.snap    |  322 +-
 .../__snapshots__/SelectPanel.test.tsx.snap   |   25 +-
 .../SplitPageLayout.test.tsx.snap             |   20 +
 .../__snapshots__/Pagination.test.tsx.snap    |    9 +-
 .../AnchoredOverlay.test.tsx.snap             |   50 +-
 .../__snapshots__/Autocomplete.test.tsx.snap  |  333 +-
 src/__tests__/__snapshots__/Box.test.tsx.snap |   24 +
 .../__snapshots__/Button.test.tsx.snap        |    3 +-
 .../__snapshots__/CircleBadge.test.tsx.snap   |    2 +-
 .../ConfirmationDialog.test.tsx.snap          |   21 +-
 .../__snapshots__/Dialog.test.tsx.snap        |   50 +-
 .../__snapshots__/Dropdown.test.tsx.snap      |   37 +-
 .../__snapshots__/Popover.test.tsx.snap       | 3648 +++++------------
 .../__snapshots__/SelectMenu.test.tsx.snap    |   99 +-
 .../__snapshots__/SideNav.test.tsx.snap       |   82 -
 .../__snapshots__/TextInput.test.tsx.snap     | 1593 +++----
 .../TextInputWithTokens.test.tsx.snap         | 3386 +++++++--------
 .../__snapshots__/ToggleSwitch.test.tsx.snap  |   28 +-
 .../__snapshots__/ActionList.test.tsx.snap    |   82 +-
 .../__snapshots__/ActionMenu.test.tsx.snap    |   21 +-
 .../__snapshots__/Button.test.tsx.snap        |  198 +-
 .../ChoiceFieldset.test.tsx.snap              |  164 +-
 .../__snapshots__/DropdownMenu.test.tsx.snap  |   25 +-
 26 files changed, 4683 insertions(+), 6144 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d3603d550a2..e74d4147ab7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "@styled-system/css": "^5.1.5",
         "@styled-system/props": "^5.1.5",
         "@styled-system/theme-get": "^5.1.2",
-        "@types/styled-components": "^5.1.11",
+        "@types/styled-components": "5.1.26",
         "@types/styled-system": "^5.1.12",
         "@types/styled-system__css": "^5.0.16",
         "@types/styled-system__theme-get": "^5.0.1",
@@ -97,7 +97,7 @@
         "babel-plugin-dev-expression": "0.2.3",
         "babel-plugin-macros": "3.1.0",
         "babel-plugin-open-source": "1.3.4",
-        "babel-plugin-styled-components": "2.1.1",
+        "babel-plugin-styled-components": "2.1.3",
         "babel-plugin-transform-replace-expressions": "0.2.0",
         "babel-polyfill": "6.26.0",
         "change-case": "4.1.2",
@@ -130,7 +130,7 @@
         "jest-environment-jsdom": "29.4.3",
         "jest-fail-on-console": "3.1.1",
         "jest-matchmedia-mock": "1.1.0",
-        "jest-styled-components": "6.3.4",
+        "jest-styled-components": "7.1.1",
         "jest-watch-typeahead": "2.2.2",
         "jscodeshift": "0.14.0",
         "lint-staged": "13.2.2",
@@ -161,7 +161,7 @@
         "storybook": "7.0.12",
         "storybook-addon-turbo-build": "2.0.1",
         "storybook-css-modules": "1.0.8",
-        "styled-components": "4.4.1",
+        "styled-components": "5.3.11",
         "terser": "5.17.6",
         "ts-node": "10.9.1",
         "ts-toolbelt": "9.6.0",
@@ -2962,18 +2962,24 @@
       }
     },
     "node_modules/@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
       "dev": true,
       "dependencies": {
-        "@emotion/memoize": "0.7.4"
+        "@emotion/memoize": "^0.8.1"
       }
     },
     "node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+      "dev": true
+    },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
       "dev": true
     },
     "node_modules/@emotion/unitless": {
@@ -15756,9 +15762,9 @@
       "dev": true
     },
     "node_modules/@types/styled-components": {
-      "version": "5.1.11",
-      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.11.tgz",
-      "integrity": "sha512-u8g3bSw9KUiZY+S++gh+LlURGraqBe3MC5I5dygrNjGDHWWQfsmZZRTJ9K9oHU2CqWtxChWmJkDI/gp+TZPQMw==",
+      "version": "5.1.26",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz",
+      "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==",
       "dependencies": {
         "@types/hoist-non-react-statics": "*",
         "@types/react": "*",
@@ -16781,18 +16787,6 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
       "dev": true
     },
-    "node_modules/atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true,
-      "bin": {
-        "atob": "bin/atob.js"
-      },
-      "engines": {
-        "node": ">= 4.5.0"
-      }
-    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -17405,16 +17399,16 @@
       }
     },
     "node_modules/babel-plugin-styled-components": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz",
-      "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.3.tgz",
+      "integrity": "sha512-jBioLwBVHpOMU4NsueH/ADcHrjS0Y/WTpt2eGVmmuSFNEv2DF3XhcMncuZlbbjxQ4vzxg+yEr6E6TNjrIQbsJQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.16.0",
-        "@babel/helper-module-imports": "^7.16.0",
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-module-imports": "^7.21.4",
         "babel-plugin-syntax-jsx": "^6.18.0",
         "lodash": "^4.17.21",
-        "picomatch": "^2.3.0"
+        "picomatch": "^2.3.1"
       },
       "peerDependencies": {
         "styled-components": ">= 2"
@@ -18289,10 +18283,13 @@
       }
     },
     "node_modules/camelize": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
-      "dev": true
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/can-bind-to-host": {
       "version": "1.1.2",
@@ -19464,22 +19461,10 @@
         "node": ">=8"
       }
     },
-    "node_modules/css": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
-      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
-      "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "source-map": "^0.6.1",
-        "source-map-resolve": "^0.5.2",
-        "urix": "^0.1.0"
-      }
-    },
     "node_modules/css-color-keywords": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -19540,22 +19525,16 @@
       }
     },
     "node_modules/css-to-react-native": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
-      "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
       "dev": true,
       "dependencies": {
         "camelize": "^1.0.0",
         "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^3.3.0"
+        "postcss-value-parser": "^4.0.2"
       }
     },
-    "node_modules/css-to-react-native/node_modules/postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "dev": true
-    },
     "node_modules/css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -19879,15 +19858,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/decode-uri-component": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
-      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/dedent": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -29656,15 +29626,18 @@
       }
     },
     "node_modules/jest-styled-components": {
-      "version": "6.3.4",
-      "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-6.3.4.tgz",
-      "integrity": "sha512-dc32l0/6n3FtsILODpvKNz6SLg50OmbJ/3r3oRh9jc2VIPPGZT5jWv7BKIcNCYH7E38ZK7uejNl3zJsCOIenng==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-7.1.1.tgz",
+      "integrity": "sha512-OUq31R5CivBF8oy81dnegNQrRW13TugMol/Dz6ZnFfEyo03exLASod7YGwyHGuayYlKmCstPtz0RQ1+NrAbIIA==",
       "dev": true,
       "dependencies": {
-        "css": "^2.2.4"
+        "@adobe/css-tools": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 12"
       },
       "peerDependencies": {
-        "styled-components": "^2 || ^3 || ^4"
+        "styled-components": ">= 5"
       }
     },
     "node_modules/jest-util": {
@@ -31983,12 +31956,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/memoize-one": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
-      "dev": true
-    },
     "node_modules/memoizerific": {
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
@@ -32023,15 +31990,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/merge-anything": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz",
-      "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==",
-      "dev": true,
-      "dependencies": {
-        "is-what": "^3.3.1"
-      }
-    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -36033,13 +35991,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/resolve-url": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
-      "deprecated": "https://github.com/lydell/resolve-url#deprecated",
-      "dev": true
-    },
     "node_modules/resolve.exports": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz",
@@ -36654,6 +36605,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "dev": true
+    },
     "node_modules/shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -36896,20 +36853,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/source-map-resolve": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
-      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
-      "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
-      "dev": true,
-      "dependencies": {
-        "atob": "^2.1.2",
-        "decode-uri-component": "^0.2.0",
-        "resolve-url": "^0.2.1",
-        "source-map-url": "^0.4.0",
-        "urix": "^0.1.0"
-      }
-    },
     "node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -36920,13 +36863,6 @@
         "source-map": "^0.6.0"
       }
     },
-    "node_modules/source-map-url": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
-      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
-      "deprecated": "See https://github.com/lydell/source-map-url#deprecated",
-      "dev": true
-    },
     "node_modules/space-separated-tokens": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
@@ -37348,29 +37284,33 @@
       }
     },
     "node_modules/styled-components": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz",
-      "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==",
+      "version": "5.3.11",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
+      "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
       "dev": true,
-      "hasInstallScript": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.0.0",
-        "@babel/traverse": "^7.0.0",
-        "@emotion/is-prop-valid": "^0.8.1",
-        "@emotion/unitless": "^0.7.0",
-        "babel-plugin-styled-components": ">= 1",
-        "css-to-react-native": "^2.2.2",
-        "memoize-one": "^5.0.0",
-        "merge-anything": "^2.2.4",
-        "prop-types": "^15.5.4",
-        "react-is": "^16.6.0",
-        "stylis": "^3.5.0",
-        "stylis-rule-sheet": "^0.0.10",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
         "supports-color": "^5.5.0"
       },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
       "peerDependencies": {
-        "react": ">= 16.3.0",
-        "react-dom": ">= 16.3.0"
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
       }
     },
     "node_modules/styled-system": {
@@ -37409,21 +37349,6 @@
         "postcss": "^8.2.15"
       }
     },
-    "node_modules/stylis": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
-      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==",
-      "dev": true
-    },
-    "node_modules/stylis-rule-sheet": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
-      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
-      "dev": true,
-      "peerDependencies": {
-        "stylis": "^3.5.0"
-      }
-    },
     "node_modules/stylus": {
       "version": "0.59.0",
       "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz",
@@ -38779,13 +38704,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/urix": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
-      "deprecated": "Please see https://github.com/lydell/urix#deprecated",
-      "dev": true
-    },
     "node_modules/url-parse": {
       "version": "1.5.10",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
diff --git a/package.json b/package.json
index f29551f451f..b45389085f5 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
-    "@types/styled-components": "^5.1.11",
+    "@types/styled-components": "5.1.26",
     "@types/styled-system": "^5.1.12",
     "@types/styled-system__css": "^5.0.16",
     "@types/styled-system__theme-get": "^5.0.1",
@@ -181,7 +181,7 @@
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-open-source": "1.3.4",
-    "babel-plugin-styled-components": "2.1.1",
+    "babel-plugin-styled-components": "2.1.3",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
     "change-case": "4.1.2",
@@ -214,7 +214,7 @@
     "jest-environment-jsdom": "29.4.3",
     "jest-fail-on-console": "3.1.1",
     "jest-matchmedia-mock": "1.1.0",
-    "jest-styled-components": "6.3.4",
+    "jest-styled-components": "7.1.1",
     "jest-watch-typeahead": "2.2.2",
     "jscodeshift": "0.14.0",
     "lint-staged": "13.2.2",
@@ -245,7 +245,7 @@
     "storybook": "7.0.12",
     "storybook-addon-turbo-build": "2.0.1",
     "storybook-css-modules": "1.0.8",
-    "styled-components": "4.4.1",
+    "styled-components": "5.3.11",
     "terser": "5.17.6",
     "ts-node": "10.9.1",
     "ts-toolbelt": "9.6.0",
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index 3fa5bca0e78..c5d45a0915e 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -102,18 +102,16 @@ exports[`NavList renders a simple list 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c2 {
   --divider-color: transparent !important;
 }
 
-.c3:hover:not([aria-disabled]),
-.c3:focus:not([aria-disabled]),
+.c3:hover:not([aria-disabled]),.c3:focus:not([aria-disabled]),
 .c3[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c3:hover:not([aria-disabled]) + .c2,
-.c3:focus:not([aria-disabled]) + .c3,
+.c3:hover:not([aria-disabled]) + .c2,.c3:focus:not([aria-disabled]) + .c3,
 .c3[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -189,18 +187,16 @@ exports[`NavList renders a simple list 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c7 {
+[data-component="ActionList.Divider"] + .c2 {
   --divider-color: transparent !important;
 }
 
-.c7:hover:not([aria-disabled]),
-.c7:focus:not([aria-disabled]),
+.c7:hover:not([aria-disabled]),.c7:focus:not([aria-disabled]),
 .c7[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c7:hover:not([aria-disabled]) + .c2,
-.c7:focus:not([aria-disabled]) + .c7,
+.c7:hover:not([aria-disabled]) + .c2,.c7:focus:not([aria-disabled]) + .c7,
 .c7[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -392,35 +388,6 @@ exports[`NavList renders with groups 1`] = `
   padding-bottom: 8px;
 }
 
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-width: 0;
-  border-style: none;
-  background-color: transparent;
-  cursor: inherit;
-  font-size: inherit;
-  color: #1F2328;
-  line-height: 20px;
-}
-
-.c10 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  font-weight: 400;
-}
-
 .c2 {
   height: 1px;
   background-color: rgba(208,215,222,0.48);
@@ -455,6 +422,35 @@ exports[`NavList renders with groups 1`] = `
   padding-inline-start: 0;
 }
 
+.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  border-style: none;
+  background-color: transparent;
+  cursor: inherit;
+  font-size: inherit;
+  color: #1F2328;
+  line-height: 20px;
+}
+
+.c10 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  font-weight: 400;
+}
+
 .c1 {
   margin: 0;
   padding-inline-start: 0;
@@ -522,18 +518,16 @@ exports[`NavList renders with groups 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c7 {
+[data-component="ActionList.Divider"] + .c6 {
   --divider-color: transparent !important;
 }
 
-.c7:hover:not([aria-disabled]),
-.c7:focus:not([aria-disabled]),
+.c7:hover:not([aria-disabled]),.c7:focus:not([aria-disabled]),
 .c7[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c7:hover:not([aria-disabled]) + .c6,
-.c7:focus:not([aria-disabled]) + .c7,
+.c7:hover:not([aria-disabled]) + .c6,.c7:focus:not([aria-disabled]) + .c7,
 .c7[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -609,18 +603,16 @@ exports[`NavList renders with groups 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c11 {
+[data-component="ActionList.Divider"] + .c6 {
   --divider-color: transparent !important;
 }
 
-.c11:hover:not([aria-disabled]),
-.c11:focus:not([aria-disabled]),
+.c11:hover:not([aria-disabled]),.c11:focus:not([aria-disabled]),
 .c11[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c11:hover:not([aria-disabled]) + .c6,
-.c11:focus:not([aria-disabled]) + .c11,
+.c11:hover:not([aria-disabled]) + .c6,.c11:focus:not([aria-disabled]) + .c11,
 .c11[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -838,6 +830,25 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   padding-bottom: 8px;
 }
 
+.c2 {
+  list-style: none;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
 .c6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -859,48 +870,23 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   line-height: 20px;
 }
 
-.c8 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  font-weight: 400;
-}
-
-.c2 {
-  list-style: none;
-}
-
-.c5 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
 }
 
-.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-}
-
-.c11 {
-  padding: 0;
-  margin: 0;
-  display: block;
+  font-weight: 400;
 }
 
 .c9 {
@@ -913,6 +899,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: initial;
 }
 
+.c11 {
+  padding: 0;
+  margin: 0;
+  display: block;
+}
+
 .c10 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
@@ -924,6 +916,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   padding-inline-start: 0;
 }
 
+[data-component="ActionList.Divider"] + .c3 {
+  --divider-color: transparent !important;
+}
+
+.c14:hover:not([aria-disabled]) + .c3,.c14:focus:not([aria-disabled]) + .c14,
+.c14[data-focus-visible-added] + li {
+  --divider-color: transparent;
+}
+
 .c12 {
   position: relative;
   display: -webkit-box;
@@ -986,18 +987,16 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c12 {
+[data-component="ActionList.Divider"] + .c3 {
   --divider-color: transparent !important;
 }
 
-.c12:hover:not([aria-disabled]),
-.c12:focus:not([aria-disabled]),
+.c12:hover:not([aria-disabled]),.c12:focus:not([aria-disabled]),
 .c12[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c12:hover:not([aria-disabled]) + .c3,
-.c12:focus:not([aria-disabled]) + .c12,
+.c12:hover:not([aria-disabled]) + .c3,.c12:focus:not([aria-disabled]) + .c12,
 .c12[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -1013,48 +1012,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
 }
 
-.c14:hover:not([aria-disabled]) + .c3,
-.c14:focus:not([aria-disabled]) + .c14,
-.c14[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c15:hover:not([aria-disabled]) + .c3,
-.c15:focus:not([aria-disabled]) + .c15,
-.c15[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c16:hover:not([aria-disabled]) + .c3,
-.c16:focus:not([aria-disabled]) + .c16,
-.c16[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c17:hover:not([aria-disabled]) + .c3,
-.c17:focus:not([aria-disabled]) + .c17,
-.c17[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c18:hover:not([aria-disabled]) + .c3,
-.c18:focus:not([aria-disabled]) + .c18,
-.c18[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c19:hover:not([aria-disabled]) + .c3,
-.c19:focus:not([aria-disabled]) + .c19,
-.c19[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c20:hover:not([aria-disabled]) + .c3,
-.c20:focus:not([aria-disabled]) + .c20,
-.c20[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
 .c4 {
   position: relative;
   display: -webkit-box;
@@ -1115,28 +1072,20 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c4 {
+[data-component="ActionList.Divider"] + .c3 {
   --divider-color: transparent !important;
 }
 
-.c4:hover:not([aria-disabled]),
-.c4:focus:not([aria-disabled]),
+.c4:hover:not([aria-disabled]),.c4:focus:not([aria-disabled]),
 .c4[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c4:hover:not([aria-disabled]) + .c3,
-.c4:focus:not([aria-disabled]) + .c4,
+.c4:hover:not([aria-disabled]) + .c3,.c4:focus:not([aria-disabled]) + .c4,
 .c4[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c21:hover:not([aria-disabled]) + .c3,
-.c21:focus:not([aria-disabled]) + .c21,
-.c21[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
 .c13 {
   color: #0969da;
   -webkit-text-decoration: none;
@@ -1187,6 +1136,14 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   text-decoration: none;
 }
 
+@media (hover:hover) and (pointer:fine) {
+
+}
+
+@media (forced-colors:active) {
+
+}
+
 @media (hover:hover) and (pointer:fine) {
   .c12:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
@@ -1341,6 +1298,25 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   padding-bottom: 8px;
 }
 
+.c2 {
+  list-style: none;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
 .c6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1362,48 +1338,23 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   line-height: 20px;
 }
 
-.c8 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  font-weight: 400;
-}
-
-.c2 {
-  list-style: none;
-}
-
-.c5 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
 }
 
-.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-}
-
-.c11 {
-  padding: 0;
-  margin: 0;
-  display: none;
+  font-weight: 400;
 }
 
 .c9 {
@@ -1416,6 +1367,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: initial;
 }
 
+.c11 {
+  padding: 0;
+  margin: 0;
+  display: none;
+}
+
 .c10 {
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
@@ -1427,6 +1384,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   padding-inline-start: 0;
 }
 
+[data-component="ActionList.Divider"] + .c3 {
+  --divider-color: transparent !important;
+}
+
+.c14:hover:not([aria-disabled]) + .c3,.c14:focus:not([aria-disabled]) + .c14,
+.c14[data-focus-visible-added] + li {
+  --divider-color: transparent;
+}
+
 .c12 {
   position: relative;
   display: -webkit-box;
@@ -1489,18 +1455,16 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c12 {
+[data-component="ActionList.Divider"] + .c3 {
   --divider-color: transparent !important;
 }
 
-.c12:hover:not([aria-disabled]),
-.c12:focus:not([aria-disabled]),
+.c12:hover:not([aria-disabled]),.c12:focus:not([aria-disabled]),
 .c12[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c12:hover:not([aria-disabled]) + .c3,
-.c12:focus:not([aria-disabled]) + .c12,
+.c12:hover:not([aria-disabled]) + .c3,.c12:focus:not([aria-disabled]) + .c12,
 .c12[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -1516,54 +1480,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-.c14:hover:not([aria-disabled]) + .c3,
-.c14:focus:not([aria-disabled]) + .c14,
-.c14[data-focus-visible-added] + li {
-  --divider-color: transparent;
+[data-component="ActionList.Divider"] + .c3 {
+  --divider-color: transparent !important;
 }
 
-.c15:hover:not([aria-disabled]) + .c3,
-.c15:focus:not([aria-disabled]) + .c15,
+.c15:hover:not([aria-disabled]) + .c3,.c15:focus:not([aria-disabled]) + .c15,
 .c15[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c16:hover:not([aria-disabled]) + .c3,
-.c16:focus:not([aria-disabled]) + .c16,
-.c16[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c17:hover:not([aria-disabled]) + .c3,
-.c17:focus:not([aria-disabled]) + .c17,
-.c17[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c18:hover:not([aria-disabled]) + .c3,
-.c18:focus:not([aria-disabled]) + .c18,
-.c18[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c19:hover:not([aria-disabled]) + .c3,
-.c19:focus:not([aria-disabled]) + .c19,
-.c19[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c20:hover:not([aria-disabled]) + .c3,
-.c20:focus:not([aria-disabled]) + .c20,
-.c20[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c21:hover:not([aria-disabled]) + .c3,
-.c21:focus:not([aria-disabled]) + .c21,
-.c21[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
 .c4 {
   position: relative;
   display: -webkit-box;
@@ -1625,18 +1550,16 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c4 {
+[data-component="ActionList.Divider"] + .c3 {
   --divider-color: transparent !important;
 }
 
-.c4:hover:not([aria-disabled]),
-.c4:focus:not([aria-disabled]),
+.c4:hover:not([aria-disabled]),.c4:focus:not([aria-disabled]),
 .c4[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c4:hover:not([aria-disabled]) + .c3,
-.c4:focus:not([aria-disabled]) + .c4,
+.c4:hover:not([aria-disabled]) + .c3,.c4:focus:not([aria-disabled]) + .c4,
 .c4[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -1702,6 +1625,14 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   text-decoration: none;
 }
 
+@media (hover:hover) and (pointer:fine) {
+
+}
+
+@media (forced-colors:active) {
+
+}
+
 @media (hover:hover) and (pointer:fine) {
   .c12:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
@@ -1727,6 +1658,14 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   }
 }
 
+@media (hover:hover) and (pointer:fine) {
+
+}
+
+@media (forced-colors:active) {
+
+}
+
 @media (hover:hover) and (pointer:fine) {
   .c4:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
index 30144461b0c..687bcfa61e8 100644
--- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
+++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageLayout renders condensed layout 1`] = `
+.c0 {
+  padding: 16px;
+}
+
 .c1 {
   max-width: 1280px;
   margin-left: auto;
@@ -14,10 +18,22 @@ exports[`PageLayout renders condensed layout 1`] = `
   flex-wrap: wrap;
 }
 
+.c2 {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
 .c3 {
   padding: 0;
 }
 
+.c4 {
+  margin-left: -16px;
+  margin-right: -16px;
+  display: none;
+  margin-top: 16px;
+}
+
 .c5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -68,30 +84,6 @@ exports[`PageLayout renders condensed layout 1`] = `
   padding: 0;
 }
 
-.c11 {
-  --pane-min-width: 256px;
-  --pane-max-width-diff: 511px;
-  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
-  width: 100%;
-  padding: 0;
-}
-
-.c0 {
-  padding: 16px;
-}
-
-.c2 {
-  width: 100%;
-  margin-bottom: 16px;
-}
-
-.c4 {
-  margin-left: -16px;
-  margin-right: -16px;
-  display: none;
-  margin-top: 16px;
-}
-
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -123,6 +115,14 @@ exports[`PageLayout renders condensed layout 1`] = `
   margin-right: 16px;
 }
 
+.c11 {
+  --pane-min-width: 256px;
+  --pane-max-width-diff: 511px;
+  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
+  width: 100%;
+  padding: 0;
+}
+
 .c12 {
   -webkit-order: 4;
   -ms-flex-order: 4;
@@ -131,25 +131,6 @@ exports[`PageLayout renders condensed layout 1`] = `
   margin-top: 16px;
 }
 
-@media screen and (min-width:768px) {
-  .c11 {
-    width: 256px;
-    overflow: auto;
-  }
-}
-
-@media screen and (min-width:1012px) {
-  .c11 {
-    width: 296px;
-  }
-}
-
-@media screen and (min-width:1280px) {
-  .c11 {
-    --pane-max-width-diff: 959px;
-  }
-}
-
 @media screen and (min-width:768px) {
   .c4 {
     margin-left: 0 !important;
@@ -176,6 +157,29 @@ exports[`PageLayout renders condensed layout 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+  .c11 {
+    width: 256px;
+    overflow: auto;
+  }
+}
+
+@media screen and (min-width:1012px) {
+  .c11 {
+    width: 296px;
+  }
+}
+
+@media screen and (min-width:1280px) {
+  .c11 {
+    --pane-max-width-diff: 959px;
+  }
+}
+
 <div>
   <div
     class="c0"
@@ -379,18 +383,38 @@ exports[`PageLayout renders default layout 1`] = `
   margin-top: 16px;
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c0 {
     padding: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c2 {
     margin-bottom: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c4 {
     margin-left: 0 !important;
@@ -406,6 +430,10 @@ exports[`PageLayout renders default layout 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c8 {
     width: auto;
@@ -424,6 +452,10 @@ exports[`PageLayout renders default layout 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c9 {
     margin-left: 0 !important;
@@ -439,12 +471,24 @@ exports[`PageLayout renders default layout 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c10 {
     margin-right: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c11 {
     width: 256px;
@@ -464,6 +508,14 @@ exports[`PageLayout renders default layout 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c12 {
     margin-top: 24px;
@@ -673,18 +725,38 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   margin-top: 16px;
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c0 {
     padding: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c2 {
     margin-bottom: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c4 {
     margin-left: 0 !important;
@@ -700,6 +772,10 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c8 {
     width: auto;
@@ -718,6 +794,10 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c9 {
     margin-left: 0 !important;
@@ -733,12 +813,24 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c10 {
     margin-right: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c11 {
     width: 256px;
@@ -758,6 +850,14 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c12 {
     margin-top: 24px;
@@ -920,29 +1020,6 @@ exports[`PageLayout renders with dividers 1`] = `
   padding: 0;
 }
 
-.c12 {
-  margin-left: -16px;
-  margin-right: -16px;
-  display: none;
-  margin-bottom: 16px;
-}
-
-.c10 {
-  --pane-min-width: 256px;
-  --pane-max-width-diff: 511px;
-  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
-  width: 100%;
-  padding: 0;
-}
-
-.c11 {
-  -webkit-order: 4;
-  -ms-flex-order: 4;
-  order: 4;
-  width: 100%;
-  margin-top: 16px;
-}
-
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -967,18 +1044,61 @@ exports[`PageLayout renders with dividers 1`] = `
   margin-left: 16px;
 }
 
+.c10 {
+  --pane-min-width: 256px;
+  --pane-max-width-diff: 511px;
+  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
+  width: 100%;
+  padding: 0;
+}
+
+.c11 {
+  -webkit-order: 4;
+  -ms-flex-order: 4;
+  order: 4;
+  width: 100%;
+  margin-top: 16px;
+}
+
+.c12 {
+  margin-left: -16px;
+  margin-right: -16px;
+  display: none;
+  margin-bottom: 16px;
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c0 {
     padding: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c2 {
     margin-bottom: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c4 {
     margin-left: 0 !important;
@@ -994,21 +1114,46 @@ exports[`PageLayout renders with dividers 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
-  .c12 {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+  .c8 {
+    width: auto;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    -webkit-flex-direction: row-reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+    margin-right: 16px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c12 {
-    margin-left: -24px;
-    margin-right: -24px;
+  .c8 {
     margin-bottom: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media screen and (min-width:1012px) {
+  .c9 {
+    margin-left: 24px;
+  }
+}
+
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c10 {
     width: 256px;
@@ -1028,33 +1173,36 @@ exports[`PageLayout renders with dividers 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c11 {
     margin-top: 24px;
   }
 }
 
-@media screen and (min-width:768px) {
-  .c8 {
-    width: auto;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    -webkit-flex-direction: row-reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-    margin-right: 16px;
-  }
+@media screen and (min-width:544px) {
+
 }
 
-@media screen and (min-width:1012px) {
-  .c8 {
-    margin-bottom: 24px;
+@media screen and (min-width:768px) {
+  .c12 {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c9 {
-    margin-left: 24px;
+  .c12 {
+    margin-left: -24px;
+    margin-right: -24px;
+    margin-bottom: 24px;
   }
 }
 
diff --git a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
index 1c2aff6eeb8..83a5483cf47 100644
--- a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
+++ b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
@@ -29,10 +29,6 @@ exports[`SelectPanel renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -52,26 +48,33 @@ exports[`SelectPanel renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c1:hover {
+.c2 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c2:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c2:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c2:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c2:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c2 {
+.c3 {
   margin-left: 4px;
 }
 
@@ -86,7 +89,7 @@ exports[`SelectPanel renders consistently 1`] = `
 >
   <button
     aria-haspopup="true"
-    className="c1"
+    className="c1 c2"
     id="react-aria-3"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -96,7 +99,7 @@ exports[`SelectPanel renders consistently 1`] = `
     Select Items
     <svg
       aria-hidden="true"
-      className="c2"
+      className="c3"
       fill="currentColor"
       focusable="false"
       height={16}
diff --git a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
index 1486e3792bb..1d925820f01 100644
--- a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
+++ b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
@@ -142,6 +142,14 @@ exports[`SplitPageLayout renders default layout 1`] = `
   margin-bottom: 0;
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c3 {
     padding: 24px;
@@ -155,6 +163,14 @@ exports[`SplitPageLayout renders default layout 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c7 {
     padding: 24px;
@@ -184,6 +200,10 @@ exports[`SplitPageLayout renders default layout 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c11 {
     width: 256px;
diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
index b3b1834f906..f7de2abfc3d 100644
--- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -64,8 +64,7 @@ exports[`Pagination renders consistently 1`] = `
   border-color: hsla(210,18%,87%,1);
 }
 
-.c2[rel='prev'],
-.c2[rel='next'] {
+.c2[rel='prev'],.c2[rel='next'] {
   color: #0969da;
 }
 
@@ -90,8 +89,7 @@ exports[`Pagination renders consistently 1`] = `
 
 .c2[aria-disabled],
 .c2[aria-disabled]:hover,
-.c2[role='presentation'],
-.c2[role='presentation']:hover {
+.c2[role='presentation'],.c2[role='presentation']:hover {
   color: #8c959f;
   cursor: default;
   background-color: transparent;
@@ -104,8 +102,7 @@ exports[`Pagination renders consistently 1`] = `
 }
 
 @supports (-webkit-clip-path:polygon(50% 0,100% 50%,50% 100%)) or (clip-path:polygon(50% 0,100% 50%,50% 100%)) {
-  .c2[rel='prev']::before,
-  .c2[rel='next']::after {
+  .c2[rel='prev']::before,.c2[rel='next']::after {
     display: inline-block;
     width: 16px;
     height: 16px;
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index c01e1a5cfaf..7f82e04bf1f 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -29,10 +29,6 @@ exports[`AnchoredOverlay renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -52,20 +48,27 @@ exports[`AnchoredOverlay renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c1:hover {
+.c2 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c2:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c2:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c2:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c2:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
@@ -82,7 +85,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 >
   <button
     aria-haspopup="true"
-    className="c1"
+    className="c1 c2"
     id="react-aria-1"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -122,10 +125,6 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -145,26 +144,33 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   opacity: 0.6;
 }
 
-.c1:hover {
+.c2 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c2:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c2:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c2:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c2:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c2 {
+.c3 {
   background-color: #ffffff;
   box-shadow: 0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12);
   position: absolute;
@@ -179,12 +185,12 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   visibility: var(--styled-overlay-visibility);
 }
 
-.c2:focus {
+.c3:focus {
   outline: none;
 }
 
 @media (forced-colors:active) {
-  .c2 {
+  .c3 {
     outline: solid 1px transparent;
   }
 }
@@ -202,7 +208,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
     <button
       aria-expanded="true"
       aria-haspopup="true"
-      class="c1"
+      class="c1 c2"
       id="react-aria-1"
       tabindex="0"
     >
@@ -216,7 +222,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
         style="position: relative; z-index: 1;"
       >
         <div
-          class="c2"
+          class="c3"
           data-focus-trap="active"
           height="auto"
           role="none"
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 263505f77a8..615c3980336 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -21,10 +21,6 @@ exports[`snapshots renders a custom empty state message 1`] = `
   -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,
@@ -62,12 +58,19 @@ exports[`snapshots renders a custom empty state message 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -77,13 +80,13 @@ exports[`snapshots renders a custom empty state message 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -93,7 +96,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -105,7 +108,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
 
 <span
     aria-busy={false}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -115,7 +118,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c1"
+      className="c2"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -145,6 +148,10 @@ exports[`snapshots renders a custom empty state message 1`] = `
   border-width: 0;
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
     className="c0"
   >
@@ -180,10 +187,6 @@ exports[`snapshots renders a loading state 1`] = `
   -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,
@@ -221,12 +224,19 @@ exports[`snapshots renders a loading state 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -236,13 +246,13 @@ exports[`snapshots renders a loading state 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -252,7 +262,7 @@ exports[`snapshots renders a loading state 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -264,7 +274,7 @@ exports[`snapshots renders a loading state 1`] = `
 
 <span
     aria-busy={false}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -274,7 +284,7 @@ exports[`snapshots renders a loading state 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c1"
+      className="c2"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -317,6 +327,10 @@ exports[`snapshots renders a loading state 1`] = `
   animation: rotate-keyframes 1s linear infinite;
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
     className="c0"
   >
@@ -374,10 +388,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -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,
@@ -415,12 +425,19 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -430,13 +447,13 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -446,7 +463,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -456,9 +473,13 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   }
 }
 
+@media (hover:hover) and (pointer:fine) {
+
+}
+
 <span
     aria-busy={false}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -468,7 +489,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c1"
+      className="c2"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -547,11 +568,11 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   margin-right: 8px;
 }
 
-.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) {
+.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) {
   margin-top: 0;
 }
 
-.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) .c7::before {
+.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) .c7::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -611,25 +632,12 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   flex-shrink: 0;
 }
 
-.c10 {
-  height: 20px;
-  width: 16px;
-  margin-right: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
+.c10 svg {
+  fill: #656d76;
+  font-size: 12px;
+}
+
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -643,11 +651,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   justify-content: center;
 }
 
-.c10 svg {
-  fill: #656d76;
-  font-size: 12px;
-}
-
 .c6 rect {
   fill: #ffffff;
   stroke: #d0d7de;
@@ -670,6 +673,10 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
 }
 
+@media (min-width:768px) {
+
+}
+
 @media (hover:hover) and (pointer:fine) {
   .c4:hover {
     background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
@@ -1258,7 +1265,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             tabIndex={-1}
           >
             <div
-              className="c10"
+              className="c5 c10 c11"
             >
               <svg
                 aria-hidden="true"
@@ -1331,10 +1338,6 @@ exports[`snapshots renders a multiselect input 1`] = `
   -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,
@@ -1372,12 +1375,19 @@ exports[`snapshots renders a multiselect input 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1387,13 +1397,13 @@ exports[`snapshots renders a multiselect input 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1403,7 +1413,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -1413,9 +1423,13 @@ exports[`snapshots renders a multiselect input 1`] = `
   }
 }
 
+@media (hover:hover) and (pointer:fine) {
+
+}
+
 <span
     aria-busy={false}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -1425,7 +1439,7 @@ exports[`snapshots renders a multiselect input 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c1"
+      className="c2"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -1504,11 +1518,11 @@ exports[`snapshots renders a multiselect input 1`] = `
   margin-right: 8px;
 }
 
-.c4:not(:first-of-type):not(.c11 + .c3):not(.c10 + .c3) {
+.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) {
   margin-top: 0;
 }
 
-.c4:not(:first-of-type):not(.c11 + .c3):not(.c10 + .c3) .c7::before {
+.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) .c7::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -1590,6 +1604,10 @@ exports[`snapshots renders a multiselect input 1`] = `
   --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
 }
 
+@media (min-width:768px) {
+
+}
+
 @media (hover:hover) and (pointer:fine) {
   .c4:hover {
     background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
@@ -2198,10 +2216,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -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,
@@ -2239,12 +2253,19 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -2254,13 +2275,13 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2270,7 +2291,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -2280,9 +2301,13 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   }
 }
 
+@media (hover:hover) and (pointer:fine) {
+
+}
+
 <span
     aria-busy={false}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -2292,7 +2317,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c1"
+      className="c2"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -2371,11 +2396,11 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   margin-right: 8px;
 }
 
-.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) {
+.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) {
   margin-top: 0;
 }
 
-.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) .c7::before {
+.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) .c7::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -2435,26 +2460,26 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   flex-shrink: 0;
 }
 
-.c10 rect {
-  fill: #ffffff;
-  stroke: #d0d7de;
+.c6 rect {
+  fill: #0969da;
+  stroke: #0969da;
   shape-rendering: auto;
 }
 
-.c10 path {
+.c6 path {
   fill: #ffffff;
-  opacity: 0;
+  opacity: 1;
 }
 
-.c6 rect {
-  fill: #0969da;
-  stroke: #0969da;
+.c10 rect {
+  fill: #ffffff;
+  stroke: #d0d7de;
   shape-rendering: auto;
 }
 
-.c6 path {
+.c10 path {
   fill: #ffffff;
-  opacity: 1;
+  opacity: 0;
 }
 
 .c1 {
@@ -2468,6 +2493,10 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
 }
 
+@media (min-width:768px) {
+
+}
+
 @media (hover:hover) and (pointer:fine) {
   .c4:hover {
     background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
@@ -3076,10 +3105,6 @@ exports[`snapshots renders a single select input 1`] = `
   -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,
@@ -3117,12 +3142,19 @@ exports[`snapshots renders a single select input 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3132,13 +3164,13 @@ exports[`snapshots renders a single select input 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3148,7 +3180,7 @@ exports[`snapshots renders a single select input 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -3158,9 +3190,13 @@ exports[`snapshots renders a single select input 1`] = `
   }
 }
 
+@media (hover:hover) and (pointer:fine) {
+
+}
+
 <span
     aria-busy={false}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -3170,7 +3206,7 @@ exports[`snapshots renders a single select input 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c1"
+      className="c2"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -3249,11 +3285,11 @@ exports[`snapshots renders a single select input 1`] = `
   margin-right: 8px;
 }
 
-.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) {
+.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) {
   margin-top: 0;
 }
 
-.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) .c5::before {
+.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) .c5::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -3303,6 +3339,10 @@ exports[`snapshots renders a single select input 1`] = `
   --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
 }
 
+@media (min-width:768px) {
+
+}
+
 @media (hover:hover) and (pointer:fine) {
   .c4:hover {
     background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
@@ -3622,7 +3662,11 @@ exports[`snapshots renders a single select input 1`] = `
 
 exports[`snapshots renders with a custom text input component 1`] = `
 [
-  <input
+  @media (hover:hover) and (pointer:fine) {
+
+}
+
+<input
     id="customInput"
     type="text"
   />,
@@ -3692,11 +3736,11 @@ exports[`snapshots renders with a custom text input component 1`] = `
   margin-right: 8px;
 }
 
-.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) {
+.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) {
   margin-top: 0;
 }
 
-.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) .c5::before {
+.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) .c5::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -4084,10 +4128,6 @@ exports[`snapshots renders with an input value 1`] = `
   -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,
@@ -4125,12 +4165,19 @@ exports[`snapshots renders with an input value 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4140,13 +4187,13 @@ exports[`snapshots renders with an input value 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4156,7 +4203,7 @@ exports[`snapshots renders with an input value 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -4166,9 +4213,13 @@ exports[`snapshots renders with an input value 1`] = `
   }
 }
 
+@media (hover:hover) and (pointer:fine) {
+
+}
+
 <span
     aria-busy={false}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -4178,7 +4229,7 @@ exports[`snapshots renders with an input value 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c1"
+      className="c2"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -4208,6 +4259,14 @@ exports[`snapshots renders with an input value 1`] = `
   border-width: 0;
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (hover:hover) and (pointer:fine) {
+
+}
+
 <span
     className="c0"
   >
diff --git a/src/__tests__/__snapshots__/Box.test.tsx.snap b/src/__tests__/__snapshots__/Box.test.tsx.snap
index 24a4cb58a42..84b403a631a 100644
--- a/src/__tests__/__snapshots__/Box.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Box.test.tsx.snap
@@ -49,6 +49,18 @@ exports[`Box renders margin 3`] = `
   margin: 4px;
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media screen and (min-width:1012px) {
+
+}
+
 @media screen and (min-width:544px) {
   .c0 {
     margin: 4px;
@@ -115,6 +127,18 @@ exports[`Box renders padding 3`] = `
   padding: 4px;
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media screen and (min-width:1012px) {
+
+}
+
 @media screen and (min-width:544px) {
   .c0 {
     padding: 4px;
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 463dd0f2a73..6d5d6a44339 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1505,8 +1505,7 @@ exports[`Button styles invisible button appropriately 1`] = `
 }
 
 .c0:disabled [data-component=ButtonCounter],
-.c0:disabled [data-component="leadingVisual"],
-.c0:disabled [data-component="trailingAction"] {
+.c0:disabled [data-component="leadingVisual"],.c0:disabled [data-component="trailingAction"] {
   color: inherit;
 }
 
diff --git a/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap b/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap
index b3bc7d8935e..faadaa00060 100644
--- a/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`CircleBadge CircleBadge.Icon renders consistently 1`] = `
 
 <svg
   aria-hidden="true"
-  className="c0"
+  className=" c0"
   fill="currentColor"
   focusable="false"
   height={16}
diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
index 1d33d06ccb4..d79269a8efe 100644
--- a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
@@ -29,10 +29,6 @@ exports[`ConfirmationDialog renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -52,20 +48,27 @@ exports[`ConfirmationDialog renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c1:hover {
+.c2 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c2:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c2:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c2:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c2:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
@@ -81,7 +84,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
   fontFamily="normal"
 >
   <button
-    className="c1"
+    className="c1 c2"
     onClick={[Function]}
   >
     Show dialog
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
index 62d088691e3..1251815cce8 100644
--- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -1,16 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dialog Dialog.Header renders consistently 1`] = `
-.c1 {
+.c0 {
+  padding: 16px;
+  background-color: #f6f8fa;
+}
+
+.c2 {
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
   color: #1F2328;
 }
 
-.c0 {
-  padding: 16px;
-  background-color: #f6f8fa;
+.c1 {
   border-radius: 6px 6px 0px 0px;
   border-bottom: 1px solid #d0d7de;
   display: -webkit-box;
@@ -20,16 +23,16 @@ exports[`Dialog Dialog.Header renders consistently 1`] = `
 }
 
 @media screen and (max-width:750px) {
-  .c0 {
+  .c1 {
     border-radius: 0px;
   }
 }
 
 <div
-  className="c0"
+  className="c0 c1"
 >
   <span
-    className="c1"
+    className="c2"
     color="fg.default"
     fontFamily="sans-serif"
     fontSize={1}
@@ -54,10 +57,23 @@ exports[`Dialog renders consistently 1`] = `
   background: rgba(31,35,40,0.5);
 }
 
+@media screen and (max-width:750px) {
+
+}
+
+@media screen and (max-width:750px) {
+
+}
+
 <span
     className="c0"
   />,
-  .c4 {
+  .c2 {
+  padding: 16px;
+  background-color: #f6f8fa;
+}
+
+.c5 {
   padding: 16px;
 }
 
@@ -81,14 +97,14 @@ exports[`Dialog renders consistently 1`] = `
   color: #0969da;
 }
 
-.c3 {
+.c4 {
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
   color: #1F2328;
 }
 
-.c5 {
+.c6 {
   font-family: sans-serif;
 }
 
@@ -109,9 +125,7 @@ exports[`Dialog renders consistently 1`] = `
   outline: none;
 }
 
-.c2 {
-  padding: 16px;
-  background-color: #f6f8fa;
+.c3 {
   border-radius: 6px 6px 0px 0px;
   border-bottom: 1px solid #d0d7de;
   display: -webkit-box;
@@ -130,7 +144,7 @@ exports[`Dialog renders consistently 1`] = `
 }
 
 @media screen and (max-width:750px) {
-  .c2 {
+  .c3 {
     border-radius: 0px;
   }
 }
@@ -172,11 +186,11 @@ exports[`Dialog renders consistently 1`] = `
       </svg>
     </button>
     <div
-      className="c2"
+      className="c2 c3"
       id="header"
     >
       <span
-        className="c3"
+        className="c4"
         color="fg.default"
         fontFamily="sans-serif"
         fontSize={1}
@@ -186,10 +200,10 @@ exports[`Dialog renders consistently 1`] = `
       </span>
     </div>
     <div
-      className="c4"
+      className="c5"
     >
       <span
-        className="c5"
+        className="c6"
         fontFamily="sans-serif"
       >
         Some content
diff --git a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
index 5fc9fbc3644..56843570766 100644
--- a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -1,11 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown renders consistently 1`] = `
-.c0 {
-  position: relative;
-  display: inline-block;
-}
-
 .c0 > summary {
   list-style: none;
 }
@@ -14,8 +9,13 @@ exports[`Dropdown renders consistently 1`] = `
   display: none;
 }
 
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 <details
-  className="c0"
+  className="c0 c1"
   onToggle={[Function]}
 >
   Hello!
@@ -45,10 +45,6 @@ exports[`Dropdown.Button renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -68,26 +64,33 @@ exports[`Dropdown.Button renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c0:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1 {
+.c2 {
   border: 4px solid transparent;
   margin-left: 12px;
   border-top-color: currentcolor;
@@ -101,11 +104,11 @@ exports[`Dropdown.Button renders consistently 1`] = `
 
 <summary
   aria-haspopup="true"
-  className="c0"
+  className="c0 c1"
 >
   Hello!
   <div
-    className="c1"
+    className="c2"
   />
 </summary>
 `;
diff --git a/src/__tests__/__snapshots__/Popover.test.tsx.snap b/src/__tests__/__snapshots__/Popover.test.tsx.snap
index 07ec53303e0..c524d5caae9 100644
--- a/src/__tests__/__snapshots__/Popover.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Popover.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Popover Popover.Content renders consistently 1`] = `
   display: block;
 }
 
-.c2 {
+.c3 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -18,22 +18,22 @@ exports[`Popover Popover.Content renders consistently 1`] = `
   background-color: #ffffff;
 }
 
-.c2::before,
-.c2::after {
+.c3::before,
+.c3::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c2::before {
+.c3::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c2::after {
+.c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -41,84 +41,84 @@ exports[`Popover Popover.Content renders consistently 1`] = `
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   top: auto;
   border-bottom-color: transparent;
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
   border-top-color: #d0d7de;
 }
 
 .c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
   border-top-color: #ffffff;
 }
 
 .c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
+.c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--bottom-right .c3::after {
   left: auto;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
+.c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
+.c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   left: 24px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: 50%;
   left: auto;
   margin-left: 0;
@@ -126,72 +126,72 @@ exports[`Popover Popover.Content renders consistently 1`] = `
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   margin-top: calc((8px + 1px) * -1);
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   margin-top: -8px;
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before {
   right: -16px;
   border-left-color: #d0d7de;
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after {
   right: -14px;
   border-left-color: #ffffff;
 }
 
 .c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   left: -16px;
   border-right-color: #d0d7de;
 }
 
 .c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   left: -14px;
   border-right-color: #ffffff;
 }
 
 .c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
@@ -200,7 +200,7 @@ exports[`Popover Popover.Content renders consistently 1`] = `
   open={true}
 >
   <div
-    className="c2"
+    className="c2 c3"
   >
     Hello!
   </div>
@@ -214,7 +214,7 @@ exports[`Popover renders consistently 1`] = `
   display: block;
 }
 
-.c2 {
+.c3 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -225,22 +225,22 @@ exports[`Popover renders consistently 1`] = `
   background-color: #ffffff;
 }
 
-.c2::before,
-.c2::after {
+.c3::before,
+.c3::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c2::before {
+.c3::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c2::after {
+.c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -248,84 +248,84 @@ exports[`Popover renders consistently 1`] = `
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   top: auto;
   border-bottom-color: transparent;
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
   border-top-color: #d0d7de;
 }
 
 .c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
   border-top-color: #ffffff;
 }
 
 .c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
+.c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--bottom-right .c3::after {
   left: auto;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
+.c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
+.c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   left: 24px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: 50%;
   left: auto;
   margin-left: 0;
@@ -333,72 +333,72 @@ exports[`Popover renders consistently 1`] = `
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   margin-top: calc((8px + 1px) * -1);
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   margin-top: -8px;
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before {
   right: -16px;
   border-left-color: #d0d7de;
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after {
   right: -14px;
   border-left-color: #ffffff;
 }
 
 .c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   left: -16px;
   border-right-color: #d0d7de;
 }
 
 .c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   left: -14px;
   border-right-color: #ffffff;
 }
 
 .c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
@@ -407,7 +407,7 @@ exports[`Popover renders consistently 1`] = `
   open={true}
 >
   <div
-    className="c2"
+    className="c2 c3"
   >
     Hello!
   </div>
@@ -421,7 +421,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
   display: block;
 }
 
-.c2 {
+.c3 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -432,22 +432,22 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
   background-color: #ffffff;
 }
 
-.c2::before,
-.c2::after {
+.c3::before,
+.c3::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c2::before {
+.c3::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c2::after {
+.c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -455,84 +455,84 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   top: auto;
   border-bottom-color: transparent;
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
   border-top-color: #d0d7de;
 }
 
 .c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
   border-top-color: #ffffff;
 }
 
 .c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
+.c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--bottom-right .c3::after {
   left: auto;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
+.c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
+.c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   left: 24px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: 50%;
   left: auto;
   margin-left: 0;
@@ -540,104 +540,158 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   margin-top: calc((8px + 1px) * -1);
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   margin-top: -8px;
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before {
   right: -16px;
   border-left-color: #d0d7de;
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after {
   right: -14px;
   border-left-color: #ffffff;
 }
 
 .c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   left: -16px;
   border-right-color: #d0d7de;
 }
 
 .c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   left: -14px;
   border-right-color: #ffffff;
 }
 
 .c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
+<div
+  className="c0 c1 caret-pos--bottom"
+  open={true}
+>
+  <div
+    className="c2 c3"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
 }
 
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
+.c3 {
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #ffffff;
 }
 
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
+.c3::before,
+.c3::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c3::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: #d0d7de;
+}
+
+.c3::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #ffffff;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
+
+.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before {
+  bottom: -16px;
+  border-top-color: #d0d7de;
+}
+
+.c0.caret-pos--bottom .c2::after,
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
+  border-top-color: #ffffff;
 }
 
-.c0.caret-pos--top-right .c3,
+.c0.caret-pos--top-right .c2,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
@@ -645,23 +699,23 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--top-right .c2::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c3,
+.c0.caret-pos--top-left .c2,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::before,
+.c0.caret-pos--top-left .c2::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
@@ -669,12 +723,12 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--top-left .c2::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -692,7 +746,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -701,7 +755,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left .c3::after,
@@ -710,74 +764,78 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
+  border-left-color: #d0d7de;
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
+  border-left-color: #ffffff;
 }
 
-.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
+  border-right-color: #d0d7de;
 }
 
-.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
+  border-right-color: #ffffff;
 }
 
-.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-top .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--right-bottom .c2::after,
 .c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
 <div
-  className="c0 c1 caret-pos--bottom"
+  className="c0 c1 caret-pos--bottom-left"
   open={true}
 >
   <div
-    className="c2"
+    className="c2 c3"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
+exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c2 {
+.c3 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -788,22 +846,22 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   background-color: #ffffff;
 }
 
-.c2::before,
-.c2::after {
+.c3::before,
+.c3::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c2::before {
+.c3::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c2::after {
+.c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -811,84 +869,84 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   top: auto;
   border-bottom-color: transparent;
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
   border-top-color: #d0d7de;
 }
 
 .c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
   border-top-color: #ffffff;
 }
 
 .c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
+.c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--bottom-right .c3::after {
   left: auto;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
+.c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
+.c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   left: 24px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: 50%;
   left: auto;
   margin-left: 0;
@@ -896,76 +954,128 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   margin-top: calc((8px + 1px) * -1);
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   margin-top: -8px;
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before {
   right: -16px;
   border-left-color: #d0d7de;
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after {
   right: -14px;
   border-left-color: #ffffff;
 }
 
 .c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   left: -16px;
   border-right-color: #d0d7de;
 }
 
 .c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   left: -14px;
   border-right-color: #ffffff;
 }
 
 .c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
-.c0.caret-pos--bottom .c3::before,
+<div
+  className="c0 c1 caret-pos--bottom-right"
+  open={true}
+>
+  <div
+    className="c2 c3"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover renders correctly for a caret position of left 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c3 {
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #ffffff;
+}
+
+.c3::before,
+.c3::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c3::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: #d0d7de;
+}
+
+.c3::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #ffffff;
+}
+
+.c0.caret-pos--bottom .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--bottom .c3::after,
@@ -975,25 +1085,27 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--bottom .c3::before,
+.c0.caret-pos--bottom .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
+  border-top-color: #d0d7de;
 }
 
-.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
+  border-top-color: #ffffff;
 }
 
-.c0.caret-pos--top-right .c3,
+.c0.caret-pos--top-right .c2,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
@@ -1001,23 +1113,23 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--top-right .c2::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c3,
+.c0.caret-pos--top-left .c2,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::before,
+.c0.caret-pos--top-left .c2::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
@@ -1025,12 +1137,12 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--top-left .c2::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -1048,7 +1160,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -1057,7 +1169,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left .c3::after,
@@ -1066,74 +1178,78 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
+  border-left-color: #d0d7de;
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
+  border-left-color: #ffffff;
 }
 
-.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
+  border-right-color: #d0d7de;
 }
 
-.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
+  border-right-color: #ffffff;
 }
 
-.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-top .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--right-bottom .c2::after,
 .c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
 <div
-  className="c0 c1 caret-pos--bottom-left"
+  className="c0 c1 caret-pos--left"
   open={true}
 >
   <div
-    className="c2"
+    className="c2 c3"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
+exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c2 {
+.c3 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -1144,22 +1260,22 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
   background-color: #ffffff;
 }
 
-.c2::before,
-.c2::after {
+.c3::before,
+.c3::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c2::before {
+.c3::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c2::after {
+.c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -1167,1993 +1283,60 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   top: auto;
   border-bottom-color: transparent;
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
   border-top-color: #d0d7de;
 }
 
 .c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
   border-top-color: #ffffff;
 }
 
 .c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
+.c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--bottom-right .c3::after {
   left: auto;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
+.c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
+.c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
-  right: -16px;
-  border-left-color: #d0d7de;
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
-  right: -14px;
-  border-left-color: #ffffff;
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  left: -16px;
-  border-right-color: #d0d7de;
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  left: -14px;
-  border-right-color: #ffffff;
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  bottom: calc(16px + 1px);
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-}
-
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-}
-
-.c0.caret-pos--top-right .c3,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c3,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-}
-
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-}
-
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-}
-
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-}
-
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--bottom-right"
-  open={true}
->
-  <div
-    className="c2"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of left 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c2 {
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: #ffffff;
-}
-
-.c2::before,
-.c2::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c2::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
-}
-
-.c2::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: #ffffff;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
-  bottom: -16px;
-  border-top-color: #d0d7de;
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  bottom: -14px;
-  border-top-color: #ffffff;
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
-  right: -16px;
-  border-left-color: #d0d7de;
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
-  right: -14px;
-  border-left-color: #ffffff;
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  left: -16px;
-  border-right-color: #d0d7de;
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  left: -14px;
-  border-right-color: #ffffff;
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  bottom: calc(16px + 1px);
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-}
-
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-}
-
-.c0.caret-pos--top-right .c3,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c3,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-}
-
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-}
-
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-}
-
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-}
-
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--left"
-  open={true}
->
-  <div
-    className="c2"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c2 {
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: #ffffff;
-}
-
-.c2::before,
-.c2::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c2::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
-}
-
-.c2::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: #ffffff;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
-  bottom: -16px;
-  border-top-color: #d0d7de;
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  bottom: -14px;
-  border-top-color: #ffffff;
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
-  right: -16px;
-  border-left-color: #d0d7de;
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
-  right: -14px;
-  border-left-color: #ffffff;
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  left: -16px;
-  border-right-color: #d0d7de;
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  left: -14px;
-  border-right-color: #ffffff;
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  bottom: calc(16px + 1px);
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-}
-
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-}
-
-.c0.caret-pos--top-right .c3,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c3,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-}
-
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-}
-
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-}
-
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-}
-
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--left-bottom"
-  open={true}
->
-  <div
-    className="c2"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of left-top 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c2 {
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: #ffffff;
-}
-
-.c2::before,
-.c2::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c2::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
-}
-
-.c2::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: #ffffff;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
-  bottom: -16px;
-  border-top-color: #d0d7de;
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  bottom: -14px;
-  border-top-color: #ffffff;
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
-  right: -16px;
-  border-left-color: #d0d7de;
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
-  right: -14px;
-  border-left-color: #ffffff;
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  left: -16px;
-  border-right-color: #d0d7de;
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  left: -14px;
-  border-right-color: #ffffff;
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  bottom: calc(16px + 1px);
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-}
-
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-}
-
-.c0.caret-pos--top-right .c3,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c3,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-}
-
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-}
-
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-}
-
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-}
-
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--left-top"
-  open={true}
->
-  <div
-    className="c2"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of right 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c2 {
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: #ffffff;
-}
-
-.c2::before,
-.c2::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c2::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
-}
-
-.c2::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: #ffffff;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
-  bottom: -16px;
-  border-top-color: #d0d7de;
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  bottom: -14px;
-  border-top-color: #ffffff;
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
-  right: -16px;
-  border-left-color: #d0d7de;
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
-  right: -14px;
-  border-left-color: #ffffff;
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  left: -16px;
-  border-right-color: #d0d7de;
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  left: -14px;
-  border-right-color: #ffffff;
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  bottom: calc(16px + 1px);
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-}
-
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-}
-
-.c0.caret-pos--top-right .c3,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c3,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c3::before,
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--right-bottom .c3::before {
-  right: -16px;
-}
-
-.c0.caret-pos--right .c3::after,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--right-bottom .c3::after {
-  right: -14px;
-}
-
-.c0.caret-pos--left .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  left: -16px;
-}
-
-.c0.caret-pos--left .c3::after,
-.c0.caret-pos--left-top .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  left: -14px;
-}
-
-.c0.caret-pos--right-top .c3::before,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left-bottom .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c3::before,
-.c0.caret-pos--left-bottom .c3::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
-  bottom: calc(16px + 1px);
-}
-
-<div
-  className="c0 c1 caret-pos--right"
-  open={true}
->
-  <div
-    className="c2"
-  >
-    Hello!
-  </div>
-</div>
-`;
-
-exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
-.c1 {
-  position: absolute;
-  z-index: 100;
-  display: block;
-}
-
-.c2 {
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 24px;
-  background-color: #ffffff;
-}
-
-.c2::before,
-.c2::after {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  content: '';
-}
-
-.c2::before {
-  top: -16px;
-  margin-left: -9px;
-  border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
-}
-
-.c2::after {
-  top: -14px;
-  margin-left: -8px;
-  border: 7px solid transparent;
-  border-bottom-color: #ffffff;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
-  bottom: -16px;
-  border-top-color: #d0d7de;
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  bottom: -14px;
-  border-top-color: #ffffff;
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
-  right: -16px;
-  border-left-color: #d0d7de;
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
-  right: -14px;
-  border-left-color: #ffffff;
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  left: -16px;
-  border-right-color: #d0d7de;
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  left: -14px;
-  border-right-color: #ffffff;
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  bottom: calc(16px + 1px);
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before,
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--bottom-left .c3::before {
-  bottom: -16px;
-}
-
-.c0.caret-pos--bottom .c3::after,
-.c0.caret-pos--bottom-right .c3::after,
-.c0.caret-pos--bottom-left .c3::after {
-  bottom: -14px;
-}
-
-.c0.caret-pos--top-right .c3,
-.c0.caret-pos--bottom-right .c3 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before,
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c3::before,
-.c0.caret-pos--bottom-right .c3::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c3::after,
-.c0.caret-pos--bottom-right .c3::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c3,
-.c0.caret-pos--bottom-left .c3 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c3::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
@@ -3161,12 +1344,12 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--top-left .c2::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -3184,7 +1367,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -3193,7 +1376,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left .c3::after,
@@ -3202,74 +1385,78 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
+  border-left-color: #d0d7de;
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
+  border-left-color: #ffffff;
 }
 
-.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
+  border-right-color: #d0d7de;
 }
 
-.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
+  border-right-color: #ffffff;
 }
 
-.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-top .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--right-bottom .c2::after,
 .c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
 <div
-  className="c0 c1 caret-pos--right-bottom"
+  className="c0 c1 caret-pos--left-bottom"
   open={true}
 >
   <div
-    className="c2"
+    className="c2 c3"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of right-top 1`] = `
+exports[`Popover renders correctly for a caret position of left-top 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c2 {
+.c3 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -3280,22 +1467,22 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
   background-color: #ffffff;
 }
 
-.c2::before,
-.c2::after {
+.c3::before,
+.c3::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c2::before {
+.c3::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c2::after {
+.c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -3303,161 +1490,6 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  top: auto;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
-  bottom: -16px;
-  border-top-color: #d0d7de;
-}
-
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  bottom: -14px;
-  border-top-color: #ffffff;
-}
-
-.c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
-  right: -9px;
-  margin-right: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  left: auto;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
-  right: 20px;
-}
-
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
-  right: 21px;
-}
-
-.c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
-  left: -9px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: 24px;
-  margin-left: 0;
-}
-
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
-  left: calc(24px + 1px);
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: 50%;
-  left: auto;
-  margin-left: 0;
-  border-bottom-color: transparent;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  margin-top: calc((8px + 1px) * -1);
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  margin-top: -8px;
-}
-
-.c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
-  right: -16px;
-  border-left-color: #d0d7de;
-}
-
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
-  right: -14px;
-  border-left-color: #ffffff;
-}
-
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  left: -16px;
-  border-right-color: #d0d7de;
-}
-
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  left: -14px;
-  border-right-color: #ffffff;
-}
-
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
-  top: 24px;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  top: auto;
-}
-
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
-  bottom: 16px;
-}
-
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
-  bottom: calc(16px + 1px);
-}
-
-.c0.caret-pos--bottom .c3::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--bottom .c3::after,
@@ -3467,25 +1499,27 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--bottom .c3::before,
+.c0.caret-pos--bottom .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
+  border-top-color: #d0d7de;
 }
 
-.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
+  border-top-color: #ffffff;
 }
 
-.c0.caret-pos--top-right .c3,
+.c0.caret-pos--top-right .c2,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
@@ -3493,23 +1527,23 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--top-right .c2::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c3,
+.c0.caret-pos--top-left .c2,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::before,
+.c0.caret-pos--top-left .c2::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
@@ -3517,12 +1551,12 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--top-left .c2::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -3540,7 +1574,7 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -3549,7 +1583,7 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left .c3::after,
@@ -3558,74 +1592,78 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
+  border-left-color: #d0d7de;
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
+  border-left-color: #ffffff;
 }
 
-.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
+  border-right-color: #d0d7de;
 }
 
-.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
+  border-right-color: #ffffff;
 }
 
-.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-top .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--right-bottom .c2::after,
 .c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
 <div
-  className="c0 c1 caret-pos--right-top"
+  className="c0 c1 caret-pos--left-top"
   open={true}
 >
   <div
-    className="c2"
+    className="c2 c3"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of top 1`] = `
+exports[`Popover renders correctly for a caret position of right 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c2 {
+.c3 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -3636,22 +1674,22 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   background-color: #ffffff;
 }
 
-.c2::before,
-.c2::after {
+.c3::before,
+.c3::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c2::before {
+.c3::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c2::after {
+.c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -3659,84 +1697,84 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   top: auto;
   border-bottom-color: transparent;
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
   border-top-color: #d0d7de;
 }
 
 .c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
   border-top-color: #ffffff;
 }
 
 .c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
+.c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--bottom-right .c3::after {
   left: auto;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
+.c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
+.c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   left: 24px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: 50%;
   left: auto;
   margin-left: 0;
@@ -3744,76 +1782,128 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   margin-top: calc((8px + 1px) * -1);
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   margin-top: -8px;
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before {
   right: -16px;
   border-left-color: #d0d7de;
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after {
   right: -14px;
   border-left-color: #ffffff;
 }
 
 .c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   left: -16px;
   border-right-color: #d0d7de;
 }
 
 .c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   left: -14px;
   border-right-color: #ffffff;
 }
 
 .c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
-.c0.caret-pos--bottom .c3::before,
+<div
+  className="c0 c1 caret-pos--right"
+  open={true}
+>
+  <div
+    className="c2 c3"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c3 {
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #ffffff;
+}
+
+.c3::before,
+.c3::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c3::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: #d0d7de;
+}
+
+.c3::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #ffffff;
+}
+
+.c0.caret-pos--bottom .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--bottom .c3::after,
@@ -3823,25 +1913,27 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--bottom .c3::before,
+.c0.caret-pos--bottom .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
+  border-top-color: #d0d7de;
 }
 
-.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
+  border-top-color: #ffffff;
 }
 
-.c0.caret-pos--top-right .c3,
+.c0.caret-pos--top-right .c2,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
@@ -3849,23 +1941,23 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--top-right .c2::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c3,
+.c0.caret-pos--top-left .c2,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::before,
+.c0.caret-pos--top-left .c2::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
@@ -3873,12 +1965,12 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--top-left .c2::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -3896,7 +1988,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -3905,7 +1997,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left .c3::after,
@@ -3914,74 +2006,78 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
+  border-left-color: #d0d7de;
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
+  border-left-color: #ffffff;
 }
 
-.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
+  border-right-color: #d0d7de;
 }
 
-.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
+  border-right-color: #ffffff;
 }
 
-.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-top .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--right-bottom .c2::after,
 .c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
 <div
-  className="c0 c1 caret-pos--top"
+  className="c0 c1 caret-pos--right-bottom"
   open={true}
 >
   <div
-    className="c2"
+    className="c2 c3"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of top-left 1`] = `
+exports[`Popover renders correctly for a caret position of right-top 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c2 {
+.c3 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -3992,22 +2088,22 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
   background-color: #ffffff;
 }
 
-.c2::before,
-.c2::after {
+.c3::before,
+.c3::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c2::before {
+.c3::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c2::after {
+.c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -4015,84 +2111,84 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   top: auto;
   border-bottom-color: transparent;
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
   border-top-color: #d0d7de;
 }
 
 .c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
   border-top-color: #ffffff;
 }
 
 .c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
+.c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--bottom-right .c3::after {
   left: auto;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
+.c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
+.c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   left: 24px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: 50%;
   left: auto;
   margin-left: 0;
@@ -4100,76 +2196,128 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   margin-top: calc((8px + 1px) * -1);
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   margin-top: -8px;
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before {
   right: -16px;
   border-left-color: #d0d7de;
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after {
   right: -14px;
   border-left-color: #ffffff;
 }
 
 .c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   left: -16px;
   border-right-color: #d0d7de;
 }
 
 .c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   left: -14px;
   border-right-color: #ffffff;
 }
 
 .c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
-.c0.caret-pos--bottom .c3::before,
+<div
+  className="c0 c1 caret-pos--right-top"
+  open={true}
+>
+  <div
+    className="c2 c3"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover renders correctly for a caret position of top 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c3 {
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #ffffff;
+}
+
+.c3::before,
+.c3::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c3::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: #d0d7de;
+}
+
+.c3::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #ffffff;
+}
+
+.c0.caret-pos--bottom .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--bottom .c3::after,
@@ -4179,25 +2327,27 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--bottom .c3::before,
+.c0.caret-pos--bottom .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
+  border-top-color: #d0d7de;
 }
 
-.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
+  border-top-color: #ffffff;
 }
 
-.c0.caret-pos--top-right .c3,
+.c0.caret-pos--top-right .c2,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
@@ -4205,23 +2355,23 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--top-right .c2::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c3,
+.c0.caret-pos--top-left .c2,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::before,
+.c0.caret-pos--top-left .c2::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
@@ -4229,12 +2379,12 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--top-left .c2::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -4252,7 +2402,7 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -4261,7 +2411,7 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left .c3::after,
@@ -4270,74 +2420,78 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
+  border-left-color: #d0d7de;
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
+  border-left-color: #ffffff;
 }
 
-.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
+  border-right-color: #d0d7de;
 }
 
-.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
+  border-right-color: #ffffff;
 }
 
-.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-top .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--right-bottom .c2::after,
 .c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
 <div
-  className="c0 c1 caret-pos--top-left"
+  className="c0 c1 caret-pos--top"
   open={true}
 >
   <div
-    className="c2"
+    className="c2 c3"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of top-right 1`] = `
+exports[`Popover renders correctly for a caret position of top-left 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c2 {
+.c3 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -4348,22 +2502,22 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   background-color: #ffffff;
 }
 
-.c2::before,
-.c2::after {
+.c3::before,
+.c3::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c2::before {
+.c3::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c2::after {
+.c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -4371,84 +2525,84 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   top: auto;
   border-bottom-color: transparent;
 }
 
 .c0.caret-pos--bottom .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--bottom-left .c2::before {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
   border-top-color: #d0d7de;
 }
 
 .c0.caret-pos--bottom .c2::after,
-.c0.caret-pos--bottom-right .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-right .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
   border-top-color: #ffffff;
 }
 
 .c0.caret-pos--top-right .c2,
-.c0.caret-pos--bottom-right .c2 {
+.c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before,
-.c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--bottom-right .c3::after {
   left: auto;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-right .c2::before,
-.c0.caret-pos--bottom-right .c2::before {
+.c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c2::after {
+.c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c2 {
+.c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::before,
-.c0.caret-pos--bottom-left .c2::before,
-.c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::before,
+.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--bottom-left .c3::after {
   left: 24px;
   margin-left: 0;
 }
 
 .c0.caret-pos--top-left .c2::after,
-.c0.caret-pos--bottom-left .c2::after {
+.c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: 50%;
   left: auto;
   margin-left: 0;
@@ -4456,76 +2610,128 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   margin-top: calc((8px + 1px) * -1);
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   margin-top: -8px;
 }
 
 .c0.caret-pos--right .c2::before,
-.c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--right-bottom .c2::before {
+.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-bottom .c3::before {
   right: -16px;
   border-left-color: #d0d7de;
 }
 
 .c0.caret-pos--right .c2::after,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--right-bottom .c2::after {
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--right-bottom .c3::after {
   right: -14px;
   border-left-color: #ffffff;
 }
 
 .c0.caret-pos--left .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--left-bottom .c3::before {
   left: -16px;
   border-right-color: #d0d7de;
 }
 
 .c0.caret-pos--left .c2::after,
-.c0.caret-pos--left-top .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-top .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   left: -14px;
   border-right-color: #ffffff;
 }
 
 .c0.caret-pos--right-top .c2::before,
-.c0.caret-pos--left-top .c2::before,
-.c0.caret-pos--right-top .c2::after,
-.c0.caret-pos--left-top .c2::after {
+.c0.caret-pos--left-top .c3::before,
+.c0.caret-pos--right-top .c3::after,
+.c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before,
-.c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::before,
+.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
 .c0.caret-pos--right-bottom .c2::before,
-.c0.caret-pos--left-bottom .c2::before {
+.c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c2::after {
+.c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
-.c0.caret-pos--bottom .c3::before,
+<div
+  className="c0 c1 caret-pos--top-left"
+  open={true}
+>
+  <div
+    className="c2 c3"
+  >
+    Hello!
+  </div>
+</div>
+`;
+
+exports[`Popover renders correctly for a caret position of top-right 1`] = `
+.c1 {
+  position: absolute;
+  z-index: 100;
+  display: block;
+}
+
+.c3 {
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 24px;
+  background-color: #ffffff;
+}
+
+.c3::before,
+.c3::after {
+  position: absolute;
+  left: 50%;
+  display: inline-block;
+  content: '';
+}
+
+.c3::before {
+  top: -16px;
+  margin-left: -9px;
+  border: 8px solid transparent;
+  border-bottom-color: #d0d7de;
+}
+
+.c3::after {
+  top: -14px;
+  margin-left: -8px;
+  border: 7px solid transparent;
+  border-bottom-color: #ffffff;
+}
+
+.c0.caret-pos--bottom .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--bottom .c3::after,
@@ -4535,25 +2741,27 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--bottom .c3::before,
+.c0.caret-pos--bottom .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
+  border-top-color: #d0d7de;
 }
 
-.c0.caret-pos--bottom .c3::after,
+.c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
+  border-top-color: #ffffff;
 }
 
-.c0.caret-pos--top-right .c3,
+.c0.caret-pos--top-right .c2,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
@@ -4561,23 +2769,23 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c3::before,
+.c0.caret-pos--top-right .c2::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c3::after,
+.c0.caret-pos--top-right .c2::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c3,
+.c0.caret-pos--top-left .c2,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::before,
+.c0.caret-pos--top-left .c2::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
@@ -4585,12 +2793,12 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c3::after,
+.c0.caret-pos--top-left .c2::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -4608,7 +2816,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left .c3::before,
@@ -4617,7 +2825,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left .c3::after,
@@ -4626,50 +2834,54 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c3::before,
+.c0.caret-pos--right .c2::before,
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
+  border-left-color: #d0d7de;
 }
 
-.c0.caret-pos--right .c3::after,
+.c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
+  border-left-color: #ffffff;
 }
 
-.c0.caret-pos--left .c3::before,
+.c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
+  border-right-color: #d0d7de;
 }
 
-.c0.caret-pos--left .c3::after,
+.c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
+  border-right-color: #ffffff;
 }
 
-.c0.caret-pos--right-top .c3::before,
+.c0.caret-pos--right-top .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--left-top .c3::after {
   top: 24px;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before,
 .c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   top: auto;
 }
 
-.c0.caret-pos--right-bottom .c3::before,
+.c0.caret-pos--right-bottom .c2::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c3::after,
+.c0.caret-pos--right-bottom .c2::after,
 .c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
@@ -4679,7 +2891,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   open={true}
 >
   <div
-    className="c2"
+    className="c2 c3"
   >
     Hello!
   </div>
diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
index 3fd7842da9c..d67c681a05a 100644
--- a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
@@ -23,10 +23,6 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -46,26 +42,33 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   opacity: 0.6;
 }
 
-.c1:hover {
+.c2 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c2:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c2:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c2:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c2:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c6 {
+.c7 {
   padding: 4px 16px;
   margin: 0;
   font-size: 12px;
@@ -75,7 +78,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   border-bottom: 1px solid hsla(210,18%,87%,1);
 }
 
-.c7 {
+.c8 {
   margin-top: -1px;
   padding: 8px 16px;
   font-size: 12px;
@@ -84,7 +87,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   border-top: 1px solid hsla(210,18%,87%,1);
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -108,20 +111,20 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   width: 100%;
 }
 
-.c5:hover {
+.c6:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c5:focus {
+.c6:focus {
   outline: none;
 }
 
-.c5[hidden] {
+.c6[hidden] {
   display: none !important;
 }
 
-.c5 .SelectMenu-icon {
+.c6 .SelectMenu-icon {
   width: 16px;
   margin-right: 8px;
   -webkit-flex-shrink: 0;
@@ -129,7 +132,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   flex-shrink: 0;
 }
 
-.c5 .SelectMenu-selected-icon {
+.c6 .SelectMenu-selected-icon {
   visibility: hidden;
   -webkit-transition: -webkit-transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear;
   -webkit-transition: transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear;
@@ -139,12 +142,12 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   transform: scale(0);
 }
 
-.c5[aria-checked='true'] {
+.c6[aria-checked='true'] {
   font-weight: 500;
   color: #1F2328;
 }
 
-.c5[aria-checked='true'] .SelectMenu-selected-icon {
+.c6[aria-checked='true'] .SelectMenu-selected-icon {
   visibility: visible;
   -webkit-transition: -webkit-transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear;
   -webkit-transition: transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear;
@@ -154,7 +157,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   transform: scale(1);
 }
 
-.c4 {
+.c5 {
   position: relative;
   padding: 0;
   margin: 0;
@@ -167,7 +170,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   -webkit-overflow-scrolling: touch;
 }
 
-.c3 {
+.c4 {
   position: relative;
   z-index: 99;
   display: -webkit-box;
@@ -184,12 +187,12 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   background-color: #ffffff;
   border-radius: 6px;
   box-shadow: 0 1px 0 rgba(31,35,40,0.04);
-  -webkit-animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
-  animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
+  -webkit-animation: dlgnuT 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
+  animation: dlgnuT 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
   width: 300px;
 }
 
-.c2 {
+.c3 {
   position: fixed;
   top: 0;
   right: 0;
@@ -207,7 +210,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   flex-direction: column;
 }
 
-.c2::before {
+.c3::before {
   position: absolute;
   top: 0;
   right: 0;
@@ -231,55 +234,55 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 }
 
 @media (min-width:544px) {
-  .c7 {
+  .c8 {
     padding: 4px 8px;
   }
 }
 
 @media (min-width:544px) {
-  .c5 {
+  .c6 {
     padding-top: 8px;
     padding-bottom: 8px;
   }
 }
 
 @media (hover:hover) {
-  .c5:hover,
-  .c5:active,
-  .c5:focus {
+  .c6:hover,
+  .c6:active,
+  .c6:focus {
     background-color: rgba(234,238,242,0.5);
   }
 }
 
 @media (hover:none) {
-  .c5 {
+  .c6 {
     -webkit-tap-highlight-color: rgba(175,184,193,0.5);
   }
 
-  .c5:focus,
-  .c5:active {
+  .c6:focus,
+  .c6:active {
     background-color: #f6f8fa;
   }
 }
 
 @media (hover:hover) {
-  .c4 .SelectMenuTab:focus {
+  .c5 .SelectMenuTab:focus {
     background-color: #b6e3ff;
   }
 
-  .c4 .SelectMenuTab:not([aria-checked='true']):hover {
+  .c5 .SelectMenuTab:not([aria-checked='true']):hover {
     color: #1F2328;
     background-color: #f6f8fa;
   }
 
-  .c4 .SelectMenuTab:not([aria-checked='true']):active {
+  .c5 .SelectMenuTab:not([aria-checked='true']):active {
     color: #1F2328;
     background-color: #f6f8fa;
   }
 }
 
 @media (min-width:544px) {
-  .c3 {
+  .c4 {
     height: auto;
     max-height: 350px;
     margin: 4px 0 16px 0;
@@ -291,13 +294,13 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 }
 
 @media (min-width:544px) {
-  .c2::before {
+  .c3::before {
     display: none;
   }
 }
 
 @media (min-width:544px) {
-  .c2 {
+  .c3 {
     position: absolute;
     top: auto;
     right: 0;
@@ -313,25 +316,25 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   open={false}
 >
   <summary
-    className="c1"
+    className="c1 c2"
   >
     Projects
   </summary>
   <div
-    className="c2"
+    className="c3"
     role="menu"
     title="Projects"
   >
     <div
-      className="c3"
+      className="c4"
       width="300px"
     >
       <div
-        className="c4"
+        className="c5"
       >
         <a
           aria-checked={true}
-          className="c5"
+          className="c6"
           href="#"
           onClick={[Function]}
           role="menuitemcheckbox"
@@ -362,7 +365,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
         </a>
         <a
           aria-checked={false}
-          className="c5"
+          className="c6"
           data-test="menu-item"
           href="#"
           onClick={[Function]}
@@ -393,13 +396,13 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
           Primer Components roadmap
         </a>
         <div
-          className="c6"
+          className="c7"
         >
           stuff
         </div>
         <a
           aria-checked={false}
-          className="c5"
+          className="c6"
           href="#"
           onClick={[Function]}
           role="menuitemcheckbox"
@@ -430,7 +433,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
         </a>
         <a
           aria-checked={false}
-          className="c5"
+          className="c6"
           href="#"
           onClick={[Function]}
           role="menuitemcheckbox"
@@ -460,7 +463,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
           Project 4
         </a>
         <footer
-          className="c7"
+          className="c8"
         >
           footer
         </footer>
diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
index d54bec24567..d26dbaf999a 100644
--- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
@@ -37,88 +37,6 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
   font-size: 14px;
 }
 
-.c1 > .c2 {
-  border-bottom: none;
-}
-
-.c2.variant-normal > .c1 {
-  color: #1F2328;
-  padding: 16px;
-  border: 0;
-  border-top: 1px solid hsla(210,18%,87%,1);
-}
-
-.c2.variant-normal > .c1:first-child {
-  border-top: 0;
-  border-top-right-radius: 6px;
-  border-top-left-radius: 6px;
-}
-
-.c2.variant-normal > .c1:last-child {
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
-.c2.variant-normal > .c1::before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  width: 3px;
-  pointer-events: none;
-  content: '';
-}
-
-.c2.variant-normal > .c1:hover {
-  background-color: rgba(234,238,242,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c2.variant-normal > .c1:focus {
-  background-color: rgba(234,238,242,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: solid 2px #0969da;
-  z-index: 1;
-}
-
-.c2.variant-normal > .c1[aria-current='page'],
-.c2.variant-normal > .c1[aria-selected='true'] {
-  background-color: #ffffff;
-}
-
-.c2.variant-normal > .c1[aria-current='page']::before,
-.c2.variant-normal > .c1[aria-selected='true']::before {
-  background-color: #fd8c73;
-}
-
-.c2.variant-lightweight > .c1 {
-  padding: 4px 0;
-  color: #0969da;
-}
-
-.c2.variant-lightweight > .c1:hover {
-  color: #1F2328;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c2.variant-lightweight > .c1:focus {
-  color: #1F2328;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: solid 1px #0969da;
-  z-index: 1;
-}
-
-.c2.variant-lightweight > .c1[aria-current='page'],
-.c2.variant-lightweight > .c1[aria-selected='true'] {
-  color: #1F2328;
-  font-weight: 500;
-}
-
 <a
   className="c0 c1"
 />
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 12f447b6d76..275bd917d42 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -20,10 +20,6 @@ exports[`TextInput renders 1`] = `
   -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,
@@ -61,12 +57,19 @@ exports[`TextInput renders 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -76,13 +79,13 @@ exports[`TextInput renders 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -92,7 +95,7 @@ exports[`TextInput renders 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -104,11 +107,11 @@ exports[`TextInput renders 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -146,10 +149,6 @@ exports[`TextInput renders block 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
 }
 
 .c0 input,
@@ -187,12 +186,19 @@ exports[`TextInput renders block 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -202,13 +208,13 @@ exports[`TextInput renders block 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -218,7 +224,7 @@ exports[`TextInput renders block 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -230,11 +236,11 @@ exports[`TextInput renders block 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -264,10 +270,6 @@ exports[`TextInput renders consistently 1`] = `
   -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,
@@ -305,12 +307,19 @@ exports[`TextInput renders consistently 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -320,13 +329,13 @@ exports[`TextInput renders consistently 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -336,7 +345,7 @@ exports[`TextInput renders consistently 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -348,11 +357,11 @@ exports[`TextInput renders consistently 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     onBlur={[Function]}
     onFocus={[Function]}
@@ -382,10 +391,6 @@ exports[`TextInput renders contrast 1`] = `
   align-items: stretch;
   min-height: 32px;
   background-color: #f6f8fa;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
 }
 
 .c0 input,
@@ -423,12 +428,19 @@ exports[`TextInput renders contrast 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -438,13 +450,13 @@ exports[`TextInput renders contrast 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -454,7 +466,7 @@ exports[`TextInput renders contrast 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -466,11 +478,11 @@ exports[`TextInput renders contrast 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -501,10 +513,6 @@ exports[`TextInput renders error 1`] = `
   align-items: stretch;
   min-height: 32px;
   border-color: #cf222e;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
 }
 
 .c0 input,
@@ -548,12 +556,19 @@ exports[`TextInput renders error 1`] = `
   box-shadow: inset 0 0 0 1px #0969da;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -563,13 +578,13 @@ exports[`TextInput renders error 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -579,7 +594,7 @@ exports[`TextInput renders error 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -591,11 +606,11 @@ exports[`TextInput renders error 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -631,10 +646,6 @@ exports[`TextInput renders large 1`] = `
   padding-top: 10px;
   padding-bottom: 10px;
   height: 40px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
 }
 
 .c0 input,
@@ -672,12 +683,19 @@ exports[`TextInput renders large 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -687,13 +705,13 @@ exports[`TextInput renders large 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -703,7 +721,7 @@ exports[`TextInput renders large 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -715,12 +733,12 @@ exports[`TextInput renders large 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
   size="large"
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -750,10 +768,6 @@ exports[`TextInput renders leadingVisual 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
 }
 
 .c0 input,
@@ -791,12 +805,19 @@ exports[`TextInput renders leadingVisual 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -806,13 +827,13 @@ exports[`TextInput renders leadingVisual 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -822,7 +843,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -834,7 +855,7 @@ exports[`TextInput renders leadingVisual 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <span
@@ -864,7 +885,7 @@ exports[`TextInput renders leadingVisual 1`] = `
     </svg>
   </span>
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -896,10 +917,6 @@ exports[`TextInput renders monospace 1`] = `
   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;
 }
 
 .c0 input,
@@ -937,12 +954,19 @@ exports[`TextInput renders monospace 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -952,13 +976,13 @@ exports[`TextInput renders monospace 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -968,7 +992,7 @@ exports[`TextInput renders monospace 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -980,11 +1004,11 @@ exports[`TextInput renders monospace 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -1014,10 +1038,6 @@ exports[`TextInput renders placeholder 1`] = `
   -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,
@@ -1055,12 +1075,19 @@ exports[`TextInput renders placeholder 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1070,13 +1097,13 @@ exports[`TextInput renders placeholder 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1086,7 +1113,7 @@ exports[`TextInput renders placeholder 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -1098,11 +1125,11 @@ exports[`TextInput renders placeholder 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -1141,10 +1168,6 @@ exports[`TextInput renders small 1`] = `
   padding-bottom: 3px;
   font-size: 12px;
   line-height: 20px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
 }
 
 .c0 input,
@@ -1182,12 +1205,19 @@ exports[`TextInput renders small 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1197,13 +1227,13 @@ exports[`TextInput renders small 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1213,7 +1243,7 @@ exports[`TextInput renders small 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -1225,12 +1255,12 @@ exports[`TextInput renders small 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
   size="small"
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -1241,13 +1271,13 @@ exports[`TextInput renders small 1`] = `
 `;
 
 exports[`TextInput renders trailingAction icon button 1`] = `
-.c2 {
+.c3 {
   margin-left: 4px;
   margin-right: 4px;
   line-height: 0;
 }
 
-.c4 {
+.c5 {
   border-radius: 6px;
   border: 1px solid;
   border-color: transparent;
@@ -1292,61 +1322,60 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   box-shadow: none;
 }
 
-.c4:focus:not(:disabled) {
+.c5:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c4:focus:not(:disabled):not(:focus-visible) {
+.c5:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c4:focus-visible:not(:disabled) {
+.c5:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c4[href] {
+.c5[href] {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c4[href]:hover {
+.c5[href]:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c4:hover {
+.c5:hover {
   -webkit-transition-duration: 80ms;
   transition-duration: 80ms;
 }
 
-.c4:active {
+.c5:active {
   -webkit-transition: none;
   transition: none;
 }
 
-.c4:disabled {
+.c5:disabled {
   cursor: not-allowed;
   box-shadow: none;
   color: #8c959f;
 }
 
-.c4:disabled [data-component=ButtonCounter],
-.c4:disabled [data-component="leadingVisual"],
-.c4:disabled [data-component="trailingAction"] {
+.c5:disabled [data-component=ButtonCounter],
+.c5:disabled [data-component="leadingVisual"],.c5:disabled [data-component="trailingAction"] {
   color: inherit;
 }
 
-.c4 [data-component=ButtonCounter] {
+.c5 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
-.c4[data-component=IconButton] {
+.c5[data-component=IconButton] {
   display: inline-grid;
   padding: unset;
   place-content: center;
@@ -1354,70 +1383,70 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   min-width: unset;
 }
 
-.c4[data-size="small"] {
+.c5[data-size="small"] {
   padding: 0 8px;
   height: 28px;
   gap: 4px;
   font-size: 12px;
 }
 
-.c4[data-size="small"] [data-component="text"] {
+.c5[data-size="small"] [data-component="text"] {
   line-height: calc(20 / 12);
 }
 
-.c4[data-size="small"] [data-component=ButtonCounter] {
+.c5[data-size="small"] [data-component=ButtonCounter] {
   font-size: 12px;
 }
 
-.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+.c5[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 4px;
 }
 
-.c4[data-size="small"][data-component=IconButton] {
+.c5[data-size="small"][data-component=IconButton] {
   width: 28px;
   padding: unset;
 }
 
-.c4[data-size="large"] {
+.c5[data-size="large"] {
   padding: 0 16px;
   height: 40px;
   gap: 8px;
 }
 
-.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+.c5[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c4[data-size="large"][data-component=IconButton] {
+.c5[data-size="large"][data-component=IconButton] {
   width: 40px;
   padding: unset;
 }
 
-.c4[data-block="block"] {
+.c5[data-block="block"] {
   width: 100%;
 }
 
-.c4 [data-component="leadingVisual"] {
+.c5 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
   color: #656d76;
 }
 
-.c4 [data-component="text"] {
+.c5 [data-component="text"] {
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
 }
 
-.c4 [data-component="trailingVisual"] {
+.c5 [data-component="trailingVisual"] {
   grid-area: trailingVisual;
 }
 
-.c4 [data-component="trailingAction"] {
+.c5 [data-component="trailingAction"] {
   margin-right: -4px;
   color: #656d76;
 }
 
-.c4 [data-component="buttonContent"] {
+.c5 [data-component="buttonContent"] {
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
@@ -1433,43 +1462,43 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   align-content: center;
 }
 
-.c4 [data-component="buttonContent"] > :not(:last-child) {
+.c5 [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c4:hover:not([disabled]) {
+.c5:hover:not([disabled]) {
   background-color: #f3f4f6;
 }
 
-.c4:active:not([disabled]) {
+.c5:active:not([disabled]) {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c4[aria-expanded=true] {
+.c5[aria-expanded=true] {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c4[data-component="IconButton"][data-no-visuals] {
+.c5[data-component="IconButton"][data-no-visuals] {
   color: #656d76;
 }
 
-.c4[data-no-visuals] {
+.c5[data-no-visuals] {
   color: #0969da;
 }
 
-.c4:has([data-component="ButtonCounter"]) {
+.c5:has([data-component="ButtonCounter"]) {
   color: #0969da;
 }
 
-.c4:disabled[data-no-visuals] {
+.c5:disabled[data-no-visuals] {
   color: #8c959f;
 }
 
-.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
+.c5:disabled[data-no-visuals] [data-component=ButtonCounter] {
   color: inherit;
 }
 
-.c4[data-size="small"][data-no-visuals="true"] {
+.c5[data-size="small"][data-no-visuals="true"] {
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
@@ -1477,7 +1506,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   position: relative;
 }
 
-.c4[data-size="small"][data-no-visuals="true"][data-component="IconButton"] {
+.c5[data-size="small"][data-no-visuals="true"][data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);
 }
@@ -1501,10 +1530,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -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,
@@ -1536,12 +1561,19 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1551,13 +1583,13 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1567,15 +1599,15 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
-.c3 {
+.c4 {
   position: relative;
 }
 
-.c3::before {
+.c4::before {
   position: absolute;
   z-index: 1000001;
   display: none;
@@ -1588,7 +1620,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   opacity: 0;
 }
 
-.c3::after {
+.c4::after {
   position: absolute;
   z-index: 1000000;
   display: none;
@@ -1614,14 +1646,14 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   opacity: 0;
 }
 
-.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 {
+.c4:hover::before,
+.c4:active::before,
+.c4:focus::before,
+.c4:focus-within::before,
+.c4:hover::after,
+.c4:active::after,
+.c4:focus::after,
+.c4:focus-within::after {
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1637,36 +1669,36 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   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 {
+.c4.tooltipped-no-delay:hover::before,
+.c4.tooltipped-no-delay:active::before,
+.c4.tooltipped-no-delay:focus::before,
+.c4.tooltipped-no-delay:focus-within::before,
+.c4.tooltipped-no-delay:hover::after,
+.c4.tooltipped-no-delay:active::after,
+.c4.tooltipped-no-delay:focus::after,
+.c4.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 {
+.c4.tooltipped-multiline:hover::after,
+.c4.tooltipped-multiline:active::after,
+.c4.tooltipped-multiline:focus::after,
+.c4.tooltipped-multiline:focus-within::after {
   display: table-cell;
 }
 
-.c3.tooltipped-s::after,
-.c3.tooltipped-se::after,
-.c3.tooltipped-sw::after {
+.c4.tooltipped-s::after,
+.c4.tooltipped-se::after,
+.c4.tooltipped-sw::after {
   top: 100%;
   right: 50%;
   margin-top: 6px;
 }
 
-.c3.tooltipped-s::before,
-.c3.tooltipped-se::before,
-.c3.tooltipped-sw::before {
+.c4.tooltipped-s::before,
+.c4.tooltipped-se::before,
+.c4.tooltipped-sw::before {
   top: auto;
   right: 50%;
   bottom: -7px;
@@ -1674,27 +1706,27 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   border-bottom-color: #24292f;
 }
 
-.c3.tooltipped-se::after {
+.c4.tooltipped-se::after {
   right: auto;
   left: 50%;
   margin-left: -16px;
 }
 
-.c3.tooltipped-sw::after {
+.c4.tooltipped-sw::after {
   margin-right: -16px;
 }
 
-.c3.tooltipped-n::after,
-.c3.tooltipped-ne::after,
-.c3.tooltipped-nw::after {
+.c4.tooltipped-n::after,
+.c4.tooltipped-ne::after,
+.c4.tooltipped-nw::after {
   right: 50%;
   bottom: 100%;
   margin-bottom: 6px;
 }
 
-.c3.tooltipped-n::before,
-.c3.tooltipped-ne::before,
-.c3.tooltipped-nw::before {
+.c4.tooltipped-n::before,
+.c4.tooltipped-ne::before,
+.c4.tooltipped-nw::before {
   top: -7px;
   right: 50%;
   bottom: auto;
@@ -1702,24 +1734,24 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   border-top-color: #24292f;
 }
 
-.c3.tooltipped-ne::after {
+.c4.tooltipped-ne::after {
   right: auto;
   left: 50%;
   margin-left: -16px;
 }
 
-.c3.tooltipped-nw::after {
+.c4.tooltipped-nw::after {
   margin-right: -16px;
 }
 
-.c3.tooltipped-s::after,
-.c3.tooltipped-n::after {
+.c4.tooltipped-s::after,
+.c4.tooltipped-n::after {
   -webkit-transform: translateX(50%);
   -ms-transform: translateX(50%);
   transform: translateX(50%);
 }
 
-.c3.tooltipped-w::after {
+.c4.tooltipped-w::after {
   right: 100%;
   bottom: 50%;
   margin-right: 6px;
@@ -1728,7 +1760,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   transform: translateY(50%);
 }
 
-.c3.tooltipped-w::before {
+.c4.tooltipped-w::before {
   top: 50%;
   bottom: 50%;
   left: -7px;
@@ -1736,7 +1768,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   border-left-color: #24292f;
 }
 
-.c3.tooltipped-e::after {
+.c4.tooltipped-e::after {
   bottom: 50%;
   left: 100%;
   margin-left: 6px;
@@ -1745,7 +1777,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   transform: translateY(50%);
 }
 
-.c3.tooltipped-e::before {
+.c4.tooltipped-e::before {
   top: 50%;
   right: -7px;
   bottom: 50%;
@@ -1753,7 +1785,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   border-right-color: #24292f;
 }
 
-.c3.tooltipped-multiline::after {
+.c4.tooltipped-multiline::after {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
@@ -1763,8 +1795,8 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   border-collapse: separate;
 }
 
-.c3.tooltipped-multiline.tooltipped-s::after,
-.c3.tooltipped-multiline.tooltipped-n::after {
+.c4.tooltipped-multiline.tooltipped-s::after,
+.c4.tooltipped-multiline.tooltipped-n::after {
   right: auto;
   left: 50%;
   -webkit-transform: translateX(-50%);
@@ -1772,37 +1804,37 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   transform: translateX(-50%);
 }
 
-.c3.tooltipped-multiline.tooltipped-w::after,
-.c3.tooltipped-multiline.tooltipped-e::after {
+.c4.tooltipped-multiline.tooltipped-w::after,
+.c4.tooltipped-multiline.tooltipped-e::after {
   right: 100%;
 }
 
-.c3.tooltipped-align-right-2::after {
+.c4.tooltipped-align-right-2::after {
   right: 0;
   margin-right: 0;
 }
 
-.c3.tooltipped-align-right-2::before {
+.c4.tooltipped-align-right-2::before {
   right: 15px;
 }
 
-.c3.tooltipped-align-left-2::after {
+.c4.tooltipped-align-left-2::after {
   left: 0;
   margin-left: 0;
 }
 
-.c3.tooltipped-align-left-2::before {
+.c4.tooltipped-align-left-2::before {
   left: 10px;
 }
 
 @media (forced-colors:active) {
-  .c4:focus {
+  .c5:focus {
     outline: solid 1px transparent;
   }
 }
 
 @media (pointer:coarse) {
-  .c4[data-size="small"][data-no-visuals="true"]:after {
+  .c5[data-size="small"][data-no-visuals="true"]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -1823,11 +1855,11 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -1836,16 +1868,16 @@ exports[`TextInput renders trailingAction icon button 1`] = `
     type="text"
   />
   <span
-    className="c2 TextInput-action"
+    className="c3 TextInput-action"
   >
     <span
       aria-label="iconLabel"
-      className="c3 tooltipped-n"
+      className="c4 tooltipped-n"
       role="tooltip"
     >
       <button
         aria-label="iconLabel"
-        className="c4"
+        className="c5"
         data-block={null}
         data-component="IconButton"
         data-no-visuals={true}
@@ -1882,20 +1914,20 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 `;
 
 exports[`TextInput renders trailingAction text button 1`] = `
-.c2 {
+.c3 {
   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 +1972,60 @@ 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 +2033,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 +2112,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 +2156,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);
 }
@@ -2149,10 +2180,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -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,
@@ -2184,12 +2211,19 @@ exports[`TextInput renders trailingAction text button 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -2199,13 +2233,13 @@ exports[`TextInput renders trailingAction text button 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2215,18 +2249,18 @@ exports[`TextInput renders trailingAction text button 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
 @media (forced-colors:active) {
-  .c3:focus {
+  .c4:focus {
     outline: solid 1px transparent;
   }
 }
 
 @media (pointer:coarse) {
-  .c3[data-no-visuals="true"]:after {
+  .c4[data-no-visuals="true"]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -2247,11 +2281,11 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -2260,17 +2294,17 @@ exports[`TextInput renders trailingAction text button 1`] = `
     type="text"
   />
   <span
-    className="c2 TextInput-action"
+    className="c3 TextInput-action"
   >
     <button
-      className="c3"
+      className="c4"
       data-block={null}
       data-no-visuals={true}
       onClick={[MockFunction]}
       type="button"
     >
       <span
-        className="c4"
+        className="c5"
         data-component="buttonContent"
       >
         <span
@@ -2285,20 +2319,20 @@ exports[`TextInput renders trailingAction text button 1`] = `
 `;
 
 exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
-.c2 {
+.c3 {
   margin-left: 4px;
   margin-right: 4px;
   line-height: 0;
 }
 
-.c5 {
+.c6 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
 }
 
-.c4 {
+.c5 {
   border-radius: 6px;
   border: 1px solid;
   border-color: transparent;
@@ -2343,61 +2377,60 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   box-shadow: none;
 }
 
-.c4:focus:not(:disabled) {
+.c5:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c4:focus:not(:disabled):not(:focus-visible) {
+.c5:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c4:focus-visible:not(:disabled) {
+.c5:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c4[href] {
+.c5[href] {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c4[href]:hover {
+.c5[href]:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c4:hover {
+.c5:hover {
   -webkit-transition-duration: 80ms;
   transition-duration: 80ms;
 }
 
-.c4:active {
+.c5:active {
   -webkit-transition: none;
   transition: none;
 }
 
-.c4:disabled {
+.c5:disabled {
   cursor: not-allowed;
   box-shadow: none;
   color: #8c959f;
 }
 
-.c4:disabled [data-component=ButtonCounter],
-.c4:disabled [data-component="leadingVisual"],
-.c4:disabled [data-component="trailingAction"] {
+.c5:disabled [data-component=ButtonCounter],
+.c5:disabled [data-component="leadingVisual"],.c5:disabled [data-component="trailingAction"] {
   color: inherit;
 }
 
-.c4 [data-component=ButtonCounter] {
+.c5 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
-.c4[data-component=IconButton] {
+.c5[data-component=IconButton] {
   display: inline-grid;
   padding: unset;
   place-content: center;
@@ -2405,70 +2438,70 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   min-width: unset;
 }
 
-.c4[data-size="small"] {
+.c5[data-size="small"] {
   padding: 0 8px;
   height: 28px;
   gap: 4px;
   font-size: 12px;
 }
 
-.c4[data-size="small"] [data-component="text"] {
+.c5[data-size="small"] [data-component="text"] {
   line-height: calc(20 / 12);
 }
 
-.c4[data-size="small"] [data-component=ButtonCounter] {
+.c5[data-size="small"] [data-component=ButtonCounter] {
   font-size: 12px;
 }
 
-.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+.c5[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 4px;
 }
 
-.c4[data-size="small"][data-component=IconButton] {
+.c5[data-size="small"][data-component=IconButton] {
   width: 28px;
   padding: unset;
 }
 
-.c4[data-size="large"] {
+.c5[data-size="large"] {
   padding: 0 16px;
   height: 40px;
   gap: 8px;
 }
 
-.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+.c5[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c4[data-size="large"][data-component=IconButton] {
+.c5[data-size="large"][data-component=IconButton] {
   width: 40px;
   padding: unset;
 }
 
-.c4[data-block="block"] {
+.c5[data-block="block"] {
   width: 100%;
 }
 
-.c4 [data-component="leadingVisual"] {
+.c5 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
   color: #656d76;
 }
 
-.c4 [data-component="text"] {
+.c5 [data-component="text"] {
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
 }
 
-.c4 [data-component="trailingVisual"] {
+.c5 [data-component="trailingVisual"] {
   grid-area: trailingVisual;
 }
 
-.c4 [data-component="trailingAction"] {
+.c5 [data-component="trailingAction"] {
   margin-right: -4px;
   color: #656d76;
 }
 
-.c4 [data-component="buttonContent"] {
+.c5 [data-component="buttonContent"] {
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
@@ -2484,43 +2517,43 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   align-content: center;
 }
 
-.c4 [data-component="buttonContent"] > :not(:last-child) {
+.c5 [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c4:hover:not([disabled]) {
+.c5:hover:not([disabled]) {
   background-color: #f3f4f6;
 }
 
-.c4:active:not([disabled]) {
+.c5:active:not([disabled]) {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c4[aria-expanded=true] {
+.c5[aria-expanded=true] {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c4[data-component="IconButton"][data-no-visuals] {
+.c5[data-component="IconButton"][data-no-visuals] {
   color: #656d76;
 }
 
-.c4[data-no-visuals] {
+.c5[data-no-visuals] {
   color: #0969da;
 }
 
-.c4:has([data-component="ButtonCounter"]) {
+.c5:has([data-component="ButtonCounter"]) {
   color: #0969da;
 }
 
-.c4:disabled[data-no-visuals] {
+.c5:disabled[data-no-visuals] {
   color: #8c959f;
 }
 
-.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
+.c5:disabled[data-no-visuals] [data-component=ButtonCounter] {
   color: inherit;
 }
 
-.c4[data-no-visuals="true"] {
+.c5[data-no-visuals="true"] {
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
@@ -2528,7 +2561,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   position: relative;
 }
 
-.c4[data-no-visuals="true"][data-component="IconButton"] {
+.c5[data-no-visuals="true"][data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);
 }
@@ -2552,10 +2585,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   -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,
@@ -2587,12 +2616,19 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -2602,13 +2638,13 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2618,16 +2654,16 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
-.c3 {
+.c4 {
   position: relative;
   display: inline-block;
 }
 
-.c3::before {
+.c4::before {
   position: absolute;
   z-index: 1000001;
   display: none;
@@ -2640,7 +2676,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   opacity: 0;
 }
 
-.c3::after {
+.c4::after {
   position: absolute;
   z-index: 1000000;
   display: none;
@@ -2666,14 +2702,14 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   opacity: 0;
 }
 
-.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 {
+.c4:hover::before,
+.c4:active::before,
+.c4:focus::before,
+.c4:focus-within::before,
+.c4:hover::after,
+.c4:active::after,
+.c4:focus::after,
+.c4:focus-within::after {
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2689,36 +2725,36 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   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 {
+.c4.tooltipped-no-delay:hover::before,
+.c4.tooltipped-no-delay:active::before,
+.c4.tooltipped-no-delay:focus::before,
+.c4.tooltipped-no-delay:focus-within::before,
+.c4.tooltipped-no-delay:hover::after,
+.c4.tooltipped-no-delay:active::after,
+.c4.tooltipped-no-delay:focus::after,
+.c4.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 {
+.c4.tooltipped-multiline:hover::after,
+.c4.tooltipped-multiline:active::after,
+.c4.tooltipped-multiline:focus::after,
+.c4.tooltipped-multiline:focus-within::after {
   display: table-cell;
 }
 
-.c3.tooltipped-s::after,
-.c3.tooltipped-se::after,
-.c3.tooltipped-sw::after {
+.c4.tooltipped-s::after,
+.c4.tooltipped-se::after,
+.c4.tooltipped-sw::after {
   top: 100%;
   right: 50%;
   margin-top: 6px;
 }
 
-.c3.tooltipped-s::before,
-.c3.tooltipped-se::before,
-.c3.tooltipped-sw::before {
+.c4.tooltipped-s::before,
+.c4.tooltipped-se::before,
+.c4.tooltipped-sw::before {
   top: auto;
   right: 50%;
   bottom: -7px;
@@ -2726,27 +2762,27 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   border-bottom-color: #24292f;
 }
 
-.c3.tooltipped-se::after {
+.c4.tooltipped-se::after {
   right: auto;
   left: 50%;
   margin-left: -16px;
 }
 
-.c3.tooltipped-sw::after {
+.c4.tooltipped-sw::after {
   margin-right: -16px;
 }
 
-.c3.tooltipped-n::after,
-.c3.tooltipped-ne::after,
-.c3.tooltipped-nw::after {
+.c4.tooltipped-n::after,
+.c4.tooltipped-ne::after,
+.c4.tooltipped-nw::after {
   right: 50%;
   bottom: 100%;
   margin-bottom: 6px;
 }
 
-.c3.tooltipped-n::before,
-.c3.tooltipped-ne::before,
-.c3.tooltipped-nw::before {
+.c4.tooltipped-n::before,
+.c4.tooltipped-ne::before,
+.c4.tooltipped-nw::before {
   top: -7px;
   right: 50%;
   bottom: auto;
@@ -2754,24 +2790,24 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   border-top-color: #24292f;
 }
 
-.c3.tooltipped-ne::after {
+.c4.tooltipped-ne::after {
   right: auto;
   left: 50%;
   margin-left: -16px;
 }
 
-.c3.tooltipped-nw::after {
+.c4.tooltipped-nw::after {
   margin-right: -16px;
 }
 
-.c3.tooltipped-s::after,
-.c3.tooltipped-n::after {
+.c4.tooltipped-s::after,
+.c4.tooltipped-n::after {
   -webkit-transform: translateX(50%);
   -ms-transform: translateX(50%);
   transform: translateX(50%);
 }
 
-.c3.tooltipped-w::after {
+.c4.tooltipped-w::after {
   right: 100%;
   bottom: 50%;
   margin-right: 6px;
@@ -2780,7 +2816,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   transform: translateY(50%);
 }
 
-.c3.tooltipped-w::before {
+.c4.tooltipped-w::before {
   top: 50%;
   bottom: 50%;
   left: -7px;
@@ -2788,7 +2824,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   border-left-color: #24292f;
 }
 
-.c3.tooltipped-e::after {
+.c4.tooltipped-e::after {
   bottom: 50%;
   left: 100%;
   margin-left: 6px;
@@ -2797,7 +2833,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   transform: translateY(50%);
 }
 
-.c3.tooltipped-e::before {
+.c4.tooltipped-e::before {
   top: 50%;
   right: -7px;
   bottom: 50%;
@@ -2805,7 +2841,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   border-right-color: #24292f;
 }
 
-.c3.tooltipped-multiline::after {
+.c4.tooltipped-multiline::after {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
@@ -2815,8 +2851,8 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   border-collapse: separate;
 }
 
-.c3.tooltipped-multiline.tooltipped-s::after,
-.c3.tooltipped-multiline.tooltipped-n::after {
+.c4.tooltipped-multiline.tooltipped-s::after,
+.c4.tooltipped-multiline.tooltipped-n::after {
   right: auto;
   left: 50%;
   -webkit-transform: translateX(-50%);
@@ -2824,37 +2860,37 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   transform: translateX(-50%);
 }
 
-.c3.tooltipped-multiline.tooltipped-w::after,
-.c3.tooltipped-multiline.tooltipped-e::after {
+.c4.tooltipped-multiline.tooltipped-w::after,
+.c4.tooltipped-multiline.tooltipped-e::after {
   right: 100%;
 }
 
-.c3.tooltipped-align-right-2::after {
+.c4.tooltipped-align-right-2::after {
   right: 0;
   margin-right: 0;
 }
 
-.c3.tooltipped-align-right-2::before {
+.c4.tooltipped-align-right-2::before {
   right: 15px;
 }
 
-.c3.tooltipped-align-left-2::after {
+.c4.tooltipped-align-left-2::after {
   left: 0;
   margin-left: 0;
 }
 
-.c3.tooltipped-align-left-2::before {
+.c4.tooltipped-align-left-2::before {
   left: 10px;
 }
 
 @media (forced-colors:active) {
-  .c4:focus {
+  .c5:focus {
     outline: solid 1px transparent;
   }
 }
 
 @media (pointer:coarse) {
-  .c4[data-no-visuals="true"]:after {
+  .c5[data-no-visuals="true"]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -2875,11 +2911,11 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -2888,22 +2924,22 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
     type="text"
   />
   <span
-    className="c2 TextInput-action"
+    className="c3 TextInput-action"
   >
     <span
       aria-label="Clear input"
-      className="c3 tooltipped-n"
+      className="c4 tooltipped-n"
       role="tooltip"
     >
       <button
-        className="c4"
+        className="c5"
         data-block={null}
         data-no-visuals={true}
         onClick={[MockFunction]}
         type="button"
       >
         <span
-          className="c5"
+          className="c6"
           data-component="buttonContent"
         >
           <span
@@ -2938,10 +2974,6 @@ exports[`TextInput renders trailingVisual 1`] = `
   -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;
 }
 
 .c0 input,
@@ -2979,12 +3011,19 @@ exports[`TextInput renders trailingVisual 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -2994,13 +3033,13 @@ exports[`TextInput renders trailingVisual 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3010,7 +3049,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -3022,11 +3061,11 @@ exports[`TextInput renders trailingVisual 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -3083,11 +3122,6 @@ exports[`TextInput renders warning 1`] = `
   -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;
-  border-color: #9a6700;
 }
 
 .c0 input,
@@ -3125,12 +3159,20 @@ exports[`TextInput renders warning 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  border-color: #9a6700;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3140,19 +3182,19 @@ exports[`TextInput renders warning 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c0:focus-within {
+.c1:focus-within {
   border-color: #0969da;
   outline: none;
   box-shadow: inset 0 0 0 1px #0969da;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3162,7 +3204,7 @@ exports[`TextInput renders warning 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -3174,11 +3216,11 @@ exports[`TextInput renders warning 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -3190,7 +3232,7 @@ exports[`TextInput renders warning 1`] = `
 
 exports[`TextInput renders with a loading indicator 1`] = `
 [
-  .c2 {
+  .c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3198,7 +3240,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -3223,10 +3265,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -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;
 }
 
 .c0 input,
@@ -3264,12 +3302,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3279,13 +3324,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3295,7 +3340,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -3305,13 +3350,21 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
-      className="c1"
+      className="c2"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -3321,11 +3374,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c3"
         display="flex"
       >
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="16px"
           sx={
@@ -3356,7 +3409,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3364,13 +3417,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c4 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -3395,10 +3448,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
 }
 
 .c0 input,
@@ -3436,12 +3485,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3451,13 +3507,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3467,7 +3523,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -3477,20 +3533,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c2"
+          className="c3"
           fill="none"
           height="16px"
           sx={
@@ -3521,7 +3585,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c3"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -3531,11 +3595,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c4"
+          className="c5"
           fill="none"
           height="16px"
           sx={
@@ -3566,7 +3630,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3574,7 +3638,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -3599,10 +3663,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -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;
 }
 
 .c0 input,
@@ -3640,12 +3700,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3655,13 +3722,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3671,7 +3738,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -3681,13 +3748,21 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
-      className="c1"
+      className="c2"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -3697,11 +3772,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c3"
         display="flex"
       >
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="16px"
           sx={
@@ -3732,7 +3807,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3740,17 +3815,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   visibility: hidden;
 }
 
-.c5 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -3780,10 +3855,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
 }
 
 .c0 input,
@@ -3821,12 +3892,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3836,13 +3914,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c4 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3852,7 +3930,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -3862,20 +3940,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -3901,7 +3987,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -3937,7 +4023,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -3947,11 +4033,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c5"
+          className="c6"
           fill="none"
           height="16px"
           sx={
@@ -3982,7 +4068,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3990,17 +4076,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   visibility: hidden;
 }
 
-.c5 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -4030,10 +4116,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
 }
 
 .c0 input,
@@ -4071,12 +4153,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4086,13 +4175,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c4 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4102,7 +4191,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -4112,20 +4201,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -4151,7 +4248,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -4187,7 +4284,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4197,11 +4294,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c5"
+          className="c6"
           fill="none"
           height="16px"
           sx={
@@ -4232,7 +4329,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4240,17 +4337,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   visibility: visible;
 }
 
-.c5 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -4280,10 +4377,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
 }
 
 .c0 input,
@@ -4321,12 +4414,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4336,13 +4436,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c4 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4352,7 +4452,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -4362,20 +4462,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -4401,7 +4509,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -4437,7 +4545,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4447,11 +4555,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c5"
+          className="c6"
           fill="none"
           height="16px"
           sx={
@@ -4482,7 +4590,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4490,11 +4598,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c4 {
   visibility: hidden;
 }
 
-.c4 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -4524,10 +4632,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -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;
 }
 
 .c0 input,
@@ -4565,12 +4669,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4580,13 +4691,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4596,7 +4707,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -4606,13 +4717,21 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
-      className="c1"
+      className="c2"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4622,11 +4741,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c3"
         display="flex"
       >
         <div
-          className="c3"
+          className="c4"
         >
           <svg
             aria-hidden="true"
@@ -4652,7 +4771,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c5"
           fill="none"
           height="32px"
           sx={
@@ -4688,7 +4807,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4696,17 +4815,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
+.c5 {
   visibility: visible;
 }
 
-.c2 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c5 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -4736,10 +4855,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
 }
 
 .c0 input,
@@ -4777,12 +4892,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4792,13 +4914,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4808,7 +4930,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -4818,20 +4940,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c2"
+          className="c3"
           fill="none"
           height="16px"
           sx={
@@ -4862,7 +4992,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c3"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4872,11 +5002,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c4"
+          className="c5"
         >
           <svg
             aria-hidden="true"
@@ -4902,7 +5032,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c5"
+          className="c6"
           fill="none"
           height="32px"
           sx={
@@ -4938,7 +5068,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4946,11 +5076,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c4 {
   visibility: hidden;
 }
 
-.c4 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -4980,10 +5110,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -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;
 }
 
 .c0 input,
@@ -5021,12 +5147,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5036,13 +5169,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5052,7 +5185,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -5062,13 +5195,21 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
-      className="c1"
+      className="c2"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5078,11 +5219,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c3"
         display="flex"
       >
         <div
-          className="c3"
+          className="c4"
         >
           <svg
             aria-hidden="true"
@@ -5108,7 +5249,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c5"
           fill="none"
           height="32px"
           sx={
@@ -5144,7 +5285,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5152,15 +5293,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   visibility: hidden;
 }
 
-.c5 {
+.c6 {
   visibility: visible;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5171,7 +5312,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c6 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5209,10 +5350,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-bottom: 3px;
   font-size: 12px;
   line-height: 20px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
 }
 
 .c0 input,
@@ -5250,12 +5387,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5265,13 +5409,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c4 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5281,19 +5425,27 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c5:focus {
   outline: 0;
 }
 
+@media (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
     size="small"
   >
@@ -5301,11 +5453,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -5331,7 +5483,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -5367,7 +5519,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5377,11 +5529,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c5"
+          className="c6"
         >
           <svg
             aria-hidden="true"
@@ -5407,7 +5559,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c6"
+          className="c7"
           fill="none"
           height="32px"
           sx={
@@ -5443,7 +5595,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5451,15 +5603,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   visibility: hidden;
 }
 
-.c5 {
+.c6 {
   visibility: visible;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5470,7 +5622,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c6 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5500,10 +5652,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
 }
 
 .c0 input,
@@ -5541,12 +5689,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5556,13 +5711,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c4 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5572,7 +5727,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -5582,20 +5737,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -5621,7 +5784,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -5657,7 +5820,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5667,11 +5830,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c5"
+          className="c6"
         >
           <svg
             aria-hidden="true"
@@ -5697,7 +5860,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c6"
+          className="c7"
           fill="none"
           height="32px"
           sx={
@@ -5733,7 +5896,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5741,15 +5904,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c5 {
+.c6 {
   visibility: hidden;
 }
 
-.c2 {
+.c3 {
   visibility: visible;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5760,7 +5923,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c6 {
+.c7 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5796,10 +5959,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding-top: 10px;
   padding-bottom: 10px;
   height: 40px;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
 }
 
 .c0 input,
@@ -5837,12 +5996,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5852,13 +6018,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c4 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5868,10 +6034,18 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c5:focus {
   outline: 0;
 }
 
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -5880,7 +6054,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    className="c0 TextInput-wrapper"
+    className="c0 c1 TextInput-wrapper"
     onClick={[Function]}
     size="large"
   >
@@ -5888,11 +6062,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -5918,7 +6092,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -5954,7 +6128,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5964,11 +6138,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c5"
+          className="c6"
         >
           <svg
             aria-hidden="true"
@@ -5994,7 +6168,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c6"
+          className="c7"
           fill="none"
           height="32px"
           sx={
@@ -6053,10 +6227,6 @@ exports[`TextInput should render a password input 1`] = `
   -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,
@@ -6094,12 +6264,19 @@ exports[`TextInput should render a password input 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -6109,13 +6286,13 @@ exports[`TextInput should render a password input 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6125,7 +6302,7 @@ exports[`TextInput should render a password input 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -6137,11 +6314,11 @@ exports[`TextInput should render a password input 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="password"
     onBlur={[Function]}
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index bd1f7ba606b..ff172981e77 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -21,7 +21,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -29,7 +29,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -39,7 +39,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   flex-grow: 1;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -75,13 +75,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -119,12 +112,22 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -134,13 +137,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -151,11 +154,11 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -188,13 +191,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -234,16 +237,16 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -268,11 +271,11 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -288,7 +291,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
@@ -319,15 +322,15 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
     </svg>
   </span>
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -335,7 +338,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -344,19 +347,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -386,7 +389,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -395,19 +398,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -437,7 +440,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -446,19 +449,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -488,7 +491,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -497,19 +500,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -539,7 +542,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -548,19 +551,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -590,7 +593,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -599,19 +602,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -641,7 +644,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -650,19 +653,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -692,7 +695,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -701,19 +704,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -773,7 +776,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 `;
 
 exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -793,7 +796,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -801,7 +804,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -811,7 +814,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   flex-grow: 1;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -824,7 +827,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   border-width: 0;
 }
 
-.c8 {
+.c9 {
   font-size: 16px;
   color: #656d76;
 }
@@ -852,13 +855,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -896,12 +892,22 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -911,13 +917,13 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -928,11 +934,11 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -965,13 +971,13 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -1011,16 +1017,16 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1045,11 +1051,11 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -1065,20 +1071,20 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -1086,7 +1092,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1095,19 +1101,19 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1137,7 +1143,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1146,19 +1152,19 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1188,7 +1194,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       </span>
     </span>
     <span
-      className="c8"
+      className="c9"
       color="fg.muted"
       fontSize={2}
     >
@@ -1200,7 +1206,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 `;
 
 exports[`TextInputWithTokens renders as block layout 1`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1220,7 +1226,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1228,7 +1234,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -1274,18 +1280,6 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
 }
 
 .c0 input,
@@ -1323,12 +1317,27 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1338,13 +1347,13 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1355,7 +1364,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -1366,20 +1375,20 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -1391,7 +1400,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 `;
 
 exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1411,7 +1420,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1419,7 +1428,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -1429,7 +1438,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   flex-grow: 1;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -1467,15 +1476,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding-bottom: calc(12px / 2);
   max-height: 20px;
   overflow: auto;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  max-height: 20px;
-  overflow: auto;
 }
 
 .c0 input,
@@ -1513,12 +1513,24 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  max-height: 20px;
+  overflow: auto;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1528,13 +1540,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1545,11 +1557,11 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1582,13 +1594,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -1628,16 +1640,16 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1662,11 +1674,11 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -1682,20 +1694,20 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -1703,7 +1715,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1712,19 +1724,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1754,7 +1766,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1763,19 +1775,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1805,7 +1817,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1814,19 +1826,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1856,7 +1868,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1865,19 +1877,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1907,7 +1919,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1916,19 +1928,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1958,7 +1970,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1967,19 +1979,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -2009,7 +2021,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2018,19 +2030,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -2060,7 +2072,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2069,19 +2081,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -2115,7 +2127,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2135,7 +2147,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2143,7 +2155,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -2153,7 +2165,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   flex-grow: 1;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2196,13 +2208,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -2240,12 +2245,22 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -2255,13 +2270,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2272,11 +2287,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2307,13 +2322,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -2353,16 +2368,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   width: 16px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -2387,11 +2402,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -2407,20 +2422,20 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="small"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -2428,7 +2443,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2437,19 +2452,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2479,7 +2494,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2488,19 +2503,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2530,7 +2545,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2539,19 +2554,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2581,7 +2596,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2590,19 +2605,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2632,7 +2647,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2641,19 +2656,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2683,7 +2698,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2692,19 +2707,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2734,7 +2749,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2743,19 +2758,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2785,7 +2800,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2794,19 +2809,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2840,7 +2855,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2860,7 +2875,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2868,7 +2883,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -2878,7 +2893,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   flex-grow: 1;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2921,13 +2936,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -2965,12 +2973,22 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -2980,13 +2998,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2997,11 +3015,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3032,13 +3050,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -3078,16 +3096,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   width: 20px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3112,11 +3130,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -3132,20 +3150,20 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="small"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -3153,7 +3171,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3162,19 +3180,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3204,7 +3222,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3213,19 +3231,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3255,7 +3273,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3264,19 +3282,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3306,7 +3324,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3315,19 +3333,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3357,7 +3375,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3366,19 +3384,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3408,7 +3426,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3417,19 +3435,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3459,7 +3477,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3468,19 +3486,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3510,7 +3528,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3519,19 +3537,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3565,7 +3583,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3585,7 +3603,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3593,7 +3611,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -3603,7 +3621,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   flex-grow: 1;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -3639,13 +3657,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -3683,12 +3694,22 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3698,13 +3719,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3715,11 +3736,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3750,13 +3771,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -3796,16 +3817,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   width: 24px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3830,11 +3851,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -3843,6 +3864,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   bottom: 0;
 }
 
+@media (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -3850,20 +3875,20 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -3871,7 +3896,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3880,19 +3905,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -3922,7 +3947,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3931,19 +3956,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -3973,7 +3998,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3982,19 +4007,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4024,7 +4049,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4033,19 +4058,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4075,7 +4100,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4084,19 +4109,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4126,7 +4151,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4135,19 +4160,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4177,7 +4202,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4186,19 +4211,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4228,7 +4253,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4237,19 +4262,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4283,7 +4308,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4303,7 +4328,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4311,7 +4336,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -4321,7 +4346,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   flex-grow: 1;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4357,13 +4382,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -4401,12 +4419,22 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4416,13 +4444,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4433,11 +4461,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -4470,13 +4498,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -4516,16 +4544,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -4550,11 +4578,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -4563,6 +4591,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   bottom: 0;
 }
 
+@media (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -4570,20 +4602,20 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -4591,7 +4623,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4600,19 +4632,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4642,7 +4674,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4651,19 +4683,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4693,7 +4725,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4702,19 +4734,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4744,7 +4776,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4753,19 +4785,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4795,7 +4827,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4804,19 +4836,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4846,7 +4878,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4855,19 +4887,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4897,7 +4929,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4906,19 +4938,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4948,7 +4980,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4957,19 +4989,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -5003,7 +5035,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5023,7 +5055,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5031,7 +5063,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -5041,7 +5073,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   flex-grow: 1;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5077,13 +5109,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -5121,12 +5146,22 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5136,13 +5171,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5153,11 +5188,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -5190,13 +5225,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -5236,16 +5271,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -5270,11 +5305,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -5283,6 +5318,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   bottom: 0;
 }
 
+@media (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -5290,20 +5329,20 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -5311,7 +5350,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5320,19 +5359,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5362,7 +5401,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5371,19 +5410,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5413,7 +5452,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5422,19 +5461,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5464,7 +5503,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5473,19 +5512,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5515,7 +5554,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5524,19 +5563,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5566,7 +5605,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5575,19 +5614,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5617,7 +5656,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5626,19 +5665,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5668,7 +5707,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5677,19 +5716,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5724,16 +5763,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
 
 exports[`TextInputWithTokens renders tokens on a single line when specified 1`] = `
 .c2 {
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5753,7 +5782,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5761,7 +5790,17 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c3 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5798,14 +5837,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
   overflow: auto;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  overflow: auto;
 }
 
 .c0 input,
@@ -5843,12 +5874,23 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  overflow: auto;
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5858,13 +5900,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5875,11 +5917,11 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -5912,13 +5954,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -5958,16 +6000,16 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -5992,11 +6034,11 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -6012,20 +6054,20 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -6033,7 +6075,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6042,19 +6084,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6084,7 +6126,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6093,19 +6135,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6135,7 +6177,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6144,19 +6186,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6186,7 +6228,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6195,19 +6237,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6237,7 +6279,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6246,19 +6288,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6288,7 +6330,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6297,19 +6339,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6339,7 +6381,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6348,19 +6390,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6390,7 +6432,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6399,19 +6441,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6445,7 +6487,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 `;
 
 exports[`TextInputWithTokens renders tokens without a remove button when specified 1`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6465,7 +6507,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6473,7 +6515,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -6483,7 +6525,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   flex-grow: 1;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6519,13 +6561,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -6563,12 +6598,22 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -6578,13 +6623,13 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6595,11 +6640,11 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -6631,13 +6676,13 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   max-width: 100%;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -6662,11 +6707,11 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -6682,20 +6727,20 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -6703,7 +6748,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6713,18 +6758,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6734,18 +6779,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6755,18 +6800,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
       >
         two
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6776,18 +6821,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
       >
         three
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6797,18 +6842,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
       >
         four
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6818,18 +6863,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
       >
         five
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6839,18 +6884,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
       >
         six
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6860,12 +6905,12 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
       >
         seven
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
@@ -6876,7 +6921,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 
 exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 [
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6896,7 +6941,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6904,7 +6949,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -6914,7 +6959,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6922,7 +6967,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6935,7 +6980,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c9 {
+.c10 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -6964,13 +7009,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -7008,12 +7046,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -7023,13 +7071,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7040,11 +7088,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -7077,13 +7125,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -7123,16 +7171,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -7157,11 +7205,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -7176,21 +7224,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
     <div
-      className="c1"
+      className="c2"
       display="flex"
     >
       <div
-        className="c2"
+        className="c3"
       >
         <input
           aria-invalid="false"
-          className="c3"
+          className="c4"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -7198,7 +7250,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7207,19 +7259,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7249,7 +7301,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7258,19 +7310,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7300,7 +7352,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7309,19 +7361,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7351,7 +7403,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7360,19 +7412,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7402,7 +7454,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7411,19 +7463,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7453,7 +7505,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7462,19 +7514,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7504,7 +7556,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7513,19 +7565,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7555,7 +7607,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7564,19 +7616,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7610,11 +7662,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c8"
+        className="c9"
         display="flex"
       >
         <svg
-          className="c9"
+          className="c10"
           fill="none"
           height="16px"
           sx={
@@ -7645,7 +7697,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c3 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7665,7 +7717,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c3 > * {
+.c4 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7673,7 +7725,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c4 {
+.c5 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -7683,7 +7735,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7691,7 +7743,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c8 {
+.c9 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -7704,13 +7756,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c2 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c10 {
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -7739,13 +7791,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -7783,12 +7828,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -7798,13 +7853,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c5 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7815,11 +7870,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c5:focus {
+.c6:focus {
   outline: 0;
 }
 
-.c6 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -7852,13 +7907,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c6:hover {
+.c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c9 {
+.c10 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -7898,16 +7953,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c9:hover,
-.c9:focus {
+.c10:hover,
+.c10:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c9:active {
+.c10:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c7 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -7932,11 +7987,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c7:is(a,button,[tabIndex='0']) {
+.c8:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c7:is(a,button,[tabIndex='0']):after {
+.c8:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -7951,8 +8006,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
@@ -7960,11 +8019,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c2"
+          className="c3"
           fill="none"
           height="16px"
           sx={
@@ -7995,15 +8054,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c3"
+      className="c4"
       display="flex"
     >
       <div
-        className="c4"
+        className="c5"
       >
         <input
           aria-invalid="false"
-          className="c5"
+          className="c6"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -8011,7 +8070,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8020,19 +8079,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8062,7 +8121,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8071,19 +8130,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8113,7 +8172,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8122,19 +8181,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8164,7 +8223,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8173,19 +8232,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8215,7 +8274,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8224,19 +8283,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8266,7 +8325,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8275,19 +8334,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8317,7 +8376,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8326,19 +8385,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8368,7 +8427,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8377,19 +8436,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8423,11 +8482,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c10"
+          className="c11"
           fill="none"
           height="16px"
           sx={
@@ -8458,7 +8517,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8478,7 +8537,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -8486,7 +8545,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -8496,7 +8555,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8504,7 +8563,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -8517,7 +8576,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c9 {
+.c10 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -8546,13 +8605,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -8590,12 +8642,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -8605,13 +8667,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -8622,11 +8684,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -8659,13 +8721,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -8705,16 +8767,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -8739,11 +8801,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -8758,21 +8820,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
     <div
-      className="c1"
+      className="c2"
       display="flex"
     >
       <div
-        className="c2"
+        className="c3"
       >
         <input
           aria-invalid="false"
-          className="c3"
+          className="c4"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -8780,7 +8846,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8789,19 +8855,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8831,7 +8897,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8840,19 +8906,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8882,7 +8948,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8891,19 +8957,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8933,7 +8999,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8942,19 +9008,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8984,7 +9050,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8993,19 +9059,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9035,7 +9101,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9044,19 +9110,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9086,7 +9152,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9095,19 +9161,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9137,7 +9203,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9146,19 +9212,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9192,11 +9258,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c8"
+        className="c9"
         display="flex"
       >
         <svg
-          className="c9"
+          className="c10"
           fill="none"
           height="16px"
           sx={
@@ -9227,7 +9293,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c4 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9247,7 +9313,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c4 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -9255,7 +9321,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c5 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -9265,7 +9331,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9273,11 +9339,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   visibility: hidden;
 }
 
-.c9 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -9290,13 +9356,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c11 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -9326,14 +9392,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -9374,12 +9433,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -9389,13 +9458,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -9406,11 +9475,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -9443,13 +9512,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -9489,16 +9558,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c10:hover,
-.c10:focus {
+.c11:hover,
+.c11:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c10:active {
+.c11:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c8 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -9523,11 +9592,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c8:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c8:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -9542,8 +9611,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
@@ -9551,11 +9624,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -9581,7 +9654,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -9617,15 +9690,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c4"
+      className="c5"
       display="flex"
     >
       <div
-        className="c5"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c6"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -9633,7 +9706,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9642,19 +9715,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9684,7 +9757,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9693,19 +9766,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9735,7 +9808,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9744,19 +9817,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9786,7 +9859,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9795,19 +9868,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9837,7 +9910,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9846,19 +9919,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9888,7 +9961,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9897,19 +9970,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9939,7 +10012,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9948,19 +10021,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9990,7 +10063,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9999,19 +10072,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10045,11 +10118,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c11"
+          className="c12"
           fill="none"
           height="16px"
           sx={
@@ -10080,7 +10153,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c4 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10100,7 +10173,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c4 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -10108,7 +10181,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c5 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -10118,7 +10191,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10126,11 +10199,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   visibility: hidden;
 }
 
-.c9 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -10143,13 +10216,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c11 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -10183,13 +10256,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -10227,12 +10293,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -10242,13 +10318,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -10259,11 +10335,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -10296,13 +10372,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -10342,16 +10418,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c10:hover,
-.c10:focus {
+.c11:hover,
+.c11:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c10:active {
+.c11:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c8 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -10376,11 +10452,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c8:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c8:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -10395,8 +10471,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
@@ -10404,11 +10484,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -10434,7 +10514,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -10470,15 +10550,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c4"
+      className="c5"
       display="flex"
     >
       <div
-        className="c5"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c6"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -10486,7 +10566,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10495,19 +10575,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10537,7 +10617,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10546,19 +10626,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10588,7 +10668,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10597,19 +10677,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10639,7 +10719,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10648,19 +10728,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10690,7 +10770,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10699,19 +10779,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10741,7 +10821,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10750,19 +10830,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10792,7 +10872,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10801,19 +10881,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10843,7 +10923,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10852,19 +10932,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10898,11 +10978,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c11"
+          className="c12"
           fill="none"
           height="16px"
           sx={
@@ -10933,7 +11013,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c4 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10953,7 +11033,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c4 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -10961,7 +11041,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c5 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -10971,7 +11051,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10979,11 +11059,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   visibility: visible;
 }
 
-.c9 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -10996,13 +11076,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c11 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -11036,13 +11116,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -11080,12 +11153,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -11095,13 +11178,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c6 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -11112,11 +11195,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -11149,13 +11232,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -11195,16 +11278,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c10:hover,
-.c10:focus {
+.c11:hover,
+.c11:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c10:active {
+.c11:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c8 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -11229,11 +11312,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c8:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c8:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -11248,8 +11331,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
@@ -11257,11 +11344,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -11287,7 +11374,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -11323,15 +11410,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c4"
+      className="c5"
       display="flex"
     >
       <div
-        className="c5"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c6"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -11339,7 +11426,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11348,19 +11435,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11390,7 +11477,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11399,19 +11486,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11441,7 +11528,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11450,19 +11537,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11492,7 +11579,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11501,19 +11588,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11543,7 +11630,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11552,19 +11639,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11594,7 +11681,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11603,19 +11690,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11645,7 +11732,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11654,19 +11741,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11696,7 +11783,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11705,19 +11792,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11751,11 +11838,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c11"
+          className="c12"
           fill="none"
           height="16px"
           sx={
@@ -11786,7 +11873,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11806,7 +11893,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -11814,7 +11901,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -11824,7 +11911,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11832,11 +11919,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c9 {
+.c10 {
   visibility: hidden;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -11849,7 +11936,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c10 {
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -11883,13 +11970,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -11927,12 +12007,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -11942,13 +12032,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -11959,11 +12049,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -11996,13 +12086,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -12042,16 +12132,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -12076,11 +12166,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -12095,21 +12185,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
     <div
-      className="c1"
+      className="c2"
       display="flex"
     >
       <div
-        className="c2"
+        className="c3"
       >
         <input
           aria-invalid="false"
-          className="c3"
+          className="c4"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -12117,7 +12211,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12126,19 +12220,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12168,7 +12262,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12177,19 +12271,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12219,7 +12313,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12228,19 +12322,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12270,7 +12364,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12279,19 +12373,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12321,7 +12415,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12330,19 +12424,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12372,7 +12466,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12381,19 +12475,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12423,7 +12517,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12432,19 +12526,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12474,7 +12568,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12483,19 +12577,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12529,11 +12623,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c8"
+        className="c9"
         display="flex"
       >
         <div
-          className="c9"
+          className="c10"
         >
           <svg
             aria-hidden="true"
@@ -12559,7 +12653,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c10"
+          className="c11"
           fill="none"
           height="32px"
           sx={
@@ -12595,7 +12689,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c3 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12615,7 +12709,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c3 > * {
+.c4 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -12623,7 +12717,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c4 {
+.c5 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -12633,7 +12727,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12641,11 +12735,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c10 {
+.c11 {
   visibility: visible;
 }
 
-.c8 {
+.c9 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -12658,13 +12752,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c2 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c11 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -12698,13 +12792,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -12742,12 +12829,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -12757,13 +12854,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c5 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -12774,11 +12871,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c5:focus {
+.c6:focus {
   outline: 0;
 }
 
-.c6 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -12811,13 +12908,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c6:hover {
+.c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c9 {
+.c10 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -12857,16 +12954,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c9:hover,
-.c9:focus {
+.c10:hover,
+.c10:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c9:active {
+.c10:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c7 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -12891,11 +12988,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c7:is(a,button,[tabIndex='0']) {
+.c8:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c7:is(a,button,[tabIndex='0']):after {
+.c8:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -12910,8 +13007,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
@@ -12919,11 +13020,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c2"
+          className="c3"
           fill="none"
           height="16px"
           sx={
@@ -12954,15 +13055,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c3"
+      className="c4"
       display="flex"
     >
       <div
-        className="c4"
+        className="c5"
       >
         <input
           aria-invalid="false"
-          className="c5"
+          className="c6"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -12970,7 +13071,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12979,19 +13080,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13021,7 +13122,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13030,19 +13131,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13072,7 +13173,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13081,19 +13182,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13123,7 +13224,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13132,19 +13233,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13174,7 +13275,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13183,19 +13284,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13225,7 +13326,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13234,19 +13335,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13276,7 +13377,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13285,19 +13386,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13327,7 +13428,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c6"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13336,19 +13437,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c7"
+          className="c8"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c8"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c9"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13382,11 +13483,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c10"
+          className="c11"
         >
           <svg
             aria-hidden="true"
@@ -13412,7 +13513,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c11"
+          className="c12"
           fill="none"
           height="32px"
           sx={
@@ -13448,7 +13549,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13468,7 +13569,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -13476,7 +13577,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -13486,7 +13587,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13494,11 +13595,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c9 {
+.c10 {
   visibility: hidden;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -13511,7 +13612,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c10 {
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -13545,13 +13646,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -13589,12 +13683,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -13604,13 +13708,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -13621,11 +13725,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -13658,13 +13762,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -13704,16 +13808,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -13738,11 +13842,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -13757,21 +13861,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
     <div
-      className="c1"
+      className="c2"
       display="flex"
     >
       <div
-        className="c2"
+        className="c3"
       >
         <input
           aria-invalid="false"
-          className="c3"
+          className="c4"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -13779,7 +13887,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13788,19 +13896,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13830,7 +13938,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13839,19 +13947,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13881,7 +13989,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13890,19 +13998,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13932,7 +14040,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13941,19 +14049,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13983,7 +14091,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13992,19 +14100,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -14034,7 +14142,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14043,19 +14151,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -14085,7 +14193,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14094,19 +14202,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -14136,7 +14244,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c4"
+        className="c5"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14145,19 +14253,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c5"
+          className="c6"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c6"
+          className="c7"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c7"
+          className="c8"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -14191,11 +14299,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c8"
+        className="c9"
         display="flex"
       >
         <div
-          className="c9"
+          className="c10"
         >
           <svg
             aria-hidden="true"
@@ -14221,7 +14329,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c10"
+          className="c11"
           fill="none"
           height="32px"
           sx={
@@ -14257,7 +14365,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c4 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14277,7 +14385,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c4 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -14285,7 +14393,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c5 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -14295,7 +14403,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14303,15 +14411,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   visibility: hidden;
 }
 
-.c11 {
+.c12 {
   visibility: visible;
 }
 
-.c9 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -14324,7 +14432,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -14335,7 +14443,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c12 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -14376,13 +14484,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -14420,12 +14521,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -14435,13 +14546,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c6 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -14452,11 +14563,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -14487,13 +14598,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -14533,16 +14644,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 16px;
 }
 
-.c10:hover,
-.c10:focus {
+.c11:hover,
+.c11:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c10:active {
+.c11:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c8 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -14567,11 +14678,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c8:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c8:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -14580,6 +14691,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
+@media (min-width:768px) {
+
+}
+
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -14587,7 +14702,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="small"
   >
@@ -14595,11 +14710,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -14625,7 +14740,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -14661,15 +14776,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c4"
+      className="c5"
       display="flex"
     >
       <div
-        className="c5"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c6"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -14677,7 +14792,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14686,19 +14801,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14728,7 +14843,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14737,19 +14852,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14779,7 +14894,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14788,19 +14903,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14830,7 +14945,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14839,19 +14954,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14881,7 +14996,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14890,19 +15005,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14932,7 +15047,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14941,19 +15056,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14983,7 +15098,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14992,19 +15107,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -15034,7 +15149,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15043,19 +15158,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -15089,11 +15204,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c11"
+          className="c12"
         >
           <svg
             aria-hidden="true"
@@ -15119,7 +15234,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c12"
+          className="c13"
           fill="none"
           height="32px"
           sx={
@@ -15155,7 +15270,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c4 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15175,7 +15290,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c4 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -15183,7 +15298,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c5 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -15193,7 +15308,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15201,15 +15316,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c2 {
+.c3 {
   visibility: hidden;
 }
 
-.c11 {
+.c12 {
   visibility: visible;
 }
 
-.c9 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -15222,7 +15337,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -15233,7 +15348,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c12 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -15267,13 +15382,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -15311,12 +15419,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -15326,13 +15444,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c6 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -15343,11 +15461,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -15380,13 +15498,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -15426,16 +15544,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c10:hover,
-.c10:focus {
+.c11:hover,
+.c11:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c10:active {
+.c11:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c8 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -15460,11 +15578,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c8:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c8:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -15479,8 +15597,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
@@ -15488,11 +15610,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -15518,7 +15640,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -15554,15 +15676,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c4"
+      className="c5"
       display="flex"
     >
       <div
-        className="c5"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c6"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -15570,7 +15692,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15579,19 +15701,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15621,7 +15743,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15630,19 +15752,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15672,7 +15794,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15681,19 +15803,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15723,7 +15845,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15732,19 +15854,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15774,7 +15896,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15783,19 +15905,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15825,7 +15947,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15834,19 +15956,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15876,7 +15998,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15885,19 +16007,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15927,7 +16049,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15936,19 +16058,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15982,11 +16104,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c11"
+          className="c12"
         >
           <svg
             aria-hidden="true"
@@ -16012,7 +16134,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c12"
+          className="c13"
           fill="none"
           height="32px"
           sx={
@@ -16048,7 +16170,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c4 {
+  .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16068,7 +16190,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c4 > * {
+.c5 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -16076,7 +16198,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c5 {
+.c6 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -16086,7 +16208,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16094,15 +16216,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c11 {
+.c12 {
   visibility: hidden;
 }
 
-.c2 {
+.c3 {
   visibility: visible;
 }
 
-.c9 {
+.c10 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -16115,7 +16237,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -16126,7 +16248,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c12 {
+.c13 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -16160,13 +16282,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -16204,12 +16319,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -16219,13 +16344,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c6 {
+.c7 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -16236,11 +16361,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -16271,13 +16396,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -16317,16 +16442,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 24px;
 }
 
-.c10:hover,
-.c10:focus {
+.c11:hover,
+.c11:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c10:active {
+.c11:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c8 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -16351,11 +16476,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c8:is(a,button,[tabIndex='0']) {
+.c9:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c8:is(a,button,[tabIndex='0']):after {
+.c9:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -16370,8 +16495,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
+@media (min-width:768px) {
+
+}
+
 <span
-    className="c0"
+    className="c0 c1"
     onClick={[Function]}
     size="medium"
   >
@@ -16379,11 +16508,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c2"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -16409,7 +16538,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -16445,15 +16574,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c4"
+      className="c5"
       display="flex"
     >
       <div
-        className="c5"
+        className="c6"
       >
         <input
           aria-invalid="false"
-          className="c6"
+          className="c7"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -16461,7 +16590,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16470,19 +16599,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16512,7 +16641,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16521,19 +16650,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16563,7 +16692,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16572,19 +16701,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16614,7 +16743,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16623,19 +16752,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16665,7 +16794,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16674,19 +16803,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16716,7 +16845,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16725,19 +16854,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16767,7 +16896,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16776,19 +16905,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16818,7 +16947,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c8"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16827,19 +16956,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c9"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c9"
+          className="c10"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c11"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16873,11 +17002,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c1"
+        className="c2"
         display="flex"
       >
         <div
-          className="c11"
+          className="c12"
         >
           <svg
             aria-hidden="true"
@@ -16903,7 +17032,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c12"
+          className="c13"
           fill="none"
           height="32px"
           sx={
@@ -16943,7 +17072,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 `;
 
 exports[`TextInputWithTokens renders with tokens 1`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16963,7 +17092,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -16971,7 +17100,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -16981,7 +17110,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   flex-grow: 1;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -17017,13 +17146,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -17061,12 +17183,22 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -17076,13 +17208,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -17093,11 +17225,11 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -17130,13 +17262,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding-right: 0;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c7 {
+.c8 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -17176,16 +17308,16 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   width: 32px;
 }
 
-.c7:hover,
-.c7:focus {
+.c8:hover,
+.c8:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c8:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -17210,11 +17342,11 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -17230,20 +17362,20 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -17251,7 +17383,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17260,19 +17392,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17302,7 +17434,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17311,19 +17443,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17353,7 +17485,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17362,19 +17494,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17404,7 +17536,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17413,19 +17545,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17455,7 +17587,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17464,19 +17596,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17506,7 +17638,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17515,19 +17647,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17557,7 +17689,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17566,19 +17698,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17608,7 +17740,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17617,19 +17749,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c6"
+        className="c7"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c8"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17663,7 +17795,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 `;
 
 exports[`TextInputWithTokens renders with tokens using a custom token component 1`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17683,7 +17815,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -17691,7 +17823,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -17724,13 +17856,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -17768,12 +17893,22 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -17783,13 +17918,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -17800,11 +17935,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -17848,12 +17983,12 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
 }
 
-.c4:hover {
+.c5:hover {
   background-image: linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.15)),linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)),rgb(var(--label-r),var(--label-g),var(--label-b)));
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
 }
 
-.c6 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -17895,16 +18030,16 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   z-index: 1;
 }
 
-.c6:hover,
-.c6:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c6:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -17929,11 +18064,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   text-decoration: none;
 }
 
-.c5:is(a,button,[tabIndex='0']) {
+.c6:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c5:is(a,button,[tabIndex='0']):after {
+.c6:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -17949,20 +18084,20 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -17970,7 +18105,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       />
     </div>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17979,14 +18114,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         zero
       </span>
       <span
         aria-hidden="true"
-        className="c6"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18016,7 +18151,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18025,14 +18160,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         one
       </span>
       <span
         aria-hidden="true"
-        className="c6"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18062,7 +18197,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18071,14 +18206,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         two
       </span>
       <span
         aria-hidden="true"
-        className="c6"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18108,7 +18243,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18117,14 +18252,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         three
       </span>
       <span
         aria-hidden="true"
-        className="c6"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18154,7 +18289,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18163,14 +18298,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         four
       </span>
       <span
         aria-hidden="true"
-        className="c6"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18200,7 +18335,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18209,14 +18344,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         five
       </span>
       <span
         aria-hidden="true"
-        className="c6"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18246,7 +18381,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18255,14 +18390,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         six
       </span>
       <span
         aria-hidden="true"
-        className="c6"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18292,7 +18427,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c4"
+      className="c5"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18301,14 +18436,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c5"
+        className="c6"
         onClick={[Function]}
       >
         seven
       </span>
       <span
         aria-hidden="true"
-        className="c6"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18342,7 +18477,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 `;
 
 exports[`TextInputWithTokens renders without tokens 1`] = `
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -18362,7 +18497,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   flex-grow: 1;
 }
 
-.c1 > * {
+.c2 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -18370,7 +18505,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c2 {
+.c3 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -18403,13 +18538,6 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c0 input,
@@ -18447,12 +18575,22 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -18462,13 +18600,13 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c3 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -18479,7 +18617,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   height: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -18490,20 +18628,20 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 <span
-  className="c0"
+  className="c0 c1"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c1"
+    className="c2"
     display="flex"
   >
     <div
-      className="c2"
+      className="c3"
     >
       <input
         aria-invalid="false"
-        className="c3"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
index 764e81dd26d..53c59b16862 100644
--- a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders consistently 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
 .c2 {
   text-align: right;
   visibility: hidden;
@@ -71,20 +85,6 @@ exports[`renders consistently 1`] = `
   transition-duration: 80ms;
 }
 
-.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
 .c1 {
   font-size: 14px;
   color: #1F2328;
diff --git a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
index e261d464937..ed2dcc6d095 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
@@ -59,84 +59,6 @@ exports[`ActionList.Item renders consistently 1`] = `
   flex-grow: 1;
 }
 
-.c5:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) {
-  margin-top: 0;
-}
-
-.c5:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) .c2::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  top: -7px;
-  border: 0 solid hsla(210,18%,87%,1);
-  border-top-width: 0;
-}
-
-.c5:hover .c2::before,
-.c5:hover + * .c2::before {
-  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
-}
-
-.c5:focus .c2::before,
-.c5:focus + * .c2::before,
-.c5[data-is-active-descendant] .c2::before,
-[data-is-active-descendant] + .c5 .c2::before {
-  border-color: transparent !important;
-}
-
-.c6:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) {
-  margin-top: 0;
-}
-
-.c6:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) .c2::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  top: -7px;
-  border: 0 solid hsla(210,18%,87%,1);
-  border-top-width: 0;
-}
-
-.c6:hover .c2::before,
-.c6:hover + * .c2::before {
-  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
-}
-
-.c6:focus .c2::before,
-.c6:focus + * .c2::before,
-.c6[data-is-active-descendant] .c2::before,
-[data-is-active-descendant] + .c6 .c2::before {
-  border-color: transparent !important;
-}
-
-.c7:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) {
-  margin-top: 0;
-}
-
-.c7:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) .c2::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  top: -7px;
-  border: 0 solid hsla(210,18%,87%,1);
-  border-top-width: 0;
-}
-
-.c7:hover .c2::before,
-.c7:hover + * .c2::before {
-  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
-}
-
-.c7:focus .c2::before,
-.c7:focus + * .c2::before,
-.c7[data-is-active-descendant] .c2::before,
-[data-is-active-descendant] + .c7 .c2::before {
-  border-color: transparent !important;
-}
-
 .c1 {
   padding: 6px 8px;
   display: -webkit-box;
@@ -151,11 +73,11 @@ exports[`ActionList.Item renders consistently 1`] = `
   text-decoration: none;
 }
 
-.c1:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) {
+.c1:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c0):not(.Header__StyledHeader-sc-cjezay-0 + .c0) {
   margin-top: 0;
 }
 
-.c1:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) .c2::before {
+.c1:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c0):not(.Header__StyledHeader-sc-cjezay-0 + .c0) .c2::before {
   content: ' ';
   display: block;
   position: absolute;
diff --git a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
index 2b488c64daf..9de0af301c1 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
@@ -23,10 +23,6 @@ exports[`ActionMenu renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -46,20 +42,27 @@ exports[`ActionMenu renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c0:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
@@ -68,7 +71,7 @@ exports[`ActionMenu renders consistently 1`] = `
 <button
   aria-haspopup="true"
   aria-label="menu"
-  className="c0"
+  className="c0 c1"
   id="react-aria-1"
   onClick={[Function]}
   onKeyDown={[Function]}
diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
index 9c106f86e5a..412399621ca 100644
--- a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -23,10 +23,6 @@ exports[`Button renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -46,27 +42,34 @@ exports[`Button renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c0:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0"
+  className="c0 c1"
 />
 `;
 
@@ -93,10 +96,6 @@ exports[`Button respects the "disabled" prop 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -116,27 +115,34 @@ exports[`Button respects the "disabled" prop 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c0:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0"
+  className="c0 c1"
   disabled={true}
 />
 `;
@@ -164,10 +170,6 @@ exports[`ButtonDanger renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #cf222e;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
 }
 
 .c0:hover {
@@ -187,27 +189,34 @@ exports[`ButtonDanger renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #cf222e;
+  border: 1px solid rgba(31,35,40,0.15);
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+}
+
+.c1:hover {
   color: #ffffff;
   background-color: #a40e26;
   border-color: rgba(31,35,40,0.15);
   box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
-.c0:active {
+.c1:active {
   color: #ffffff;
   background-color: hsla(356,72%,44%,1);
   box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(207,34,46,0.5);
   background-color: #f6f8fa;
 }
 
 <button
-  className="c0"
+  className="c0 c1"
 />
 `;
 
@@ -234,10 +243,6 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #cf222e;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
 }
 
 .c0:hover {
@@ -257,27 +262,34 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #cf222e;
+  border: 1px solid rgba(31,35,40,0.15);
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+}
+
+.c1:hover {
   color: #ffffff;
   background-color: #a40e26;
   border-color: rgba(31,35,40,0.15);
   box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
-.c0:active {
+.c1:active {
   color: #ffffff;
   background-color: hsla(356,72%,44%,1);
   box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(207,34,46,0.5);
   background-color: #f6f8fa;
 }
 
 <button
-  className="c0"
+  className="c0 c1"
   disabled={true}
 />
 `;
@@ -342,10 +354,6 @@ exports[`ButtonInvisible renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #0969da;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
 }
 
 .c0:hover {
@@ -365,28 +373,35 @@ exports[`ButtonInvisible renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #0969da;
+  border: 1px solid rgba(31,35,40,0.15);
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+}
+
+.c1:hover {
   color: #ffffff;
   background-color: #0969da;
   border-color: rgba(31,35,40,0.15);
   box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
-.c0:active {
+.c1:active {
   color: #ffffff;
   background-color: hsla(212,92%,42%,1);
   box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0"
+  className="c0 c1"
 />
 `;
 
@@ -413,11 +428,6 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #0969da;
-  background-color: transparent;
-  border: 0;
-  border-radius: 6px;
-  box-shadow: none;
 }
 
 .c0:hover {
@@ -437,24 +447,32 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
   opacity: 0.6;
 }
 
-.c0:disabled {
+.c1 {
+  color: #0969da;
+  background-color: transparent;
+  border: 0;
+  border-radius: 6px;
+  box-shadow: none;
+}
+
+.c1:disabled {
   color: #8c959f;
 }
 
-.c0:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: #f3f4f6;
 }
 
-.c0:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
 <button
-  className="c0"
+  className="c0 c1"
   disabled={true}
 />
 `;
@@ -482,10 +500,6 @@ exports[`ButtonOutline renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #0969da;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
 }
 
 .c0:hover {
@@ -505,28 +519,35 @@ exports[`ButtonOutline renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #0969da;
+  border: 1px solid rgba(31,35,40,0.15);
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+}
+
+.c1:hover {
   color: #ffffff;
   background-color: #0969da;
   border-color: rgba(31,35,40,0.15);
   box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
-.c0:active {
+.c1:active {
   color: #ffffff;
   background-color: hsla(212,92%,42%,1);
   box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0"
+  className="c0 c1"
 />
 `;
 
@@ -553,10 +574,6 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #0969da;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
 }
 
 .c0:hover {
@@ -576,28 +593,35 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #0969da;
+  border: 1px solid rgba(31,35,40,0.15);
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+}
+
+.c1:hover {
   color: #ffffff;
   background-color: #0969da;
   border-color: rgba(31,35,40,0.15);
   box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
-.c0:active {
+.c1:active {
   color: #ffffff;
   background-color: hsla(212,92%,42%,1);
   box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0"
+  className="c0 c1"
   disabled={true}
 />
 `;
@@ -625,10 +649,6 @@ exports[`ButtonPrimary renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #ffffff;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #1f883d;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
 .c0:hover {
@@ -648,24 +668,31 @@ exports[`ButtonPrimary renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #ffffff;
+  border: 1px solid rgba(31,35,40,0.15);
+  background-color: #1f883d;
+  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+}
+
+.c1:hover {
   background-color: #1a7f37;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:active {
+.c1:active {
   background-color: hsla(137,66%,28%,1);
   box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(255,255,255,0.8);
   background-color: #94d3a2;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0"
+  className="c0 c1"
 />
 `;
 
@@ -692,10 +719,6 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #ffffff;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #1f883d;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
 .c0:hover {
@@ -715,24 +738,31 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #ffffff;
+  border: 1px solid rgba(31,35,40,0.15);
+  background-color: #1f883d;
+  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+}
+
+.c1:hover {
   background-color: #1a7f37;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:active {
+.c1:active {
   background-color: hsla(137,66%,28%,1);
   box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(255,255,255,0.8);
   background-color: #94d3a2;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0"
+  className="c0 c1"
   disabled={true}
 />
 `;
diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
index be01ca621c5..03542bc68c8 100644
--- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
@@ -461,17 +461,6 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
   margin-right: 0;
 }
 
-.c8 {
-  margin-left: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
 .c4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -494,6 +483,17 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
   fill: currentColor;
 }
 
+.c8 {
+  margin-left: 8px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
 .c2 {
   font-size: 16px;
   padding: 0;
@@ -1081,6 +1081,10 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = `
   display: flex;
 }
 
+.c4 {
+  margin-right: 4px;
+}
+
 .c6 > input {
   margin-left: 0;
   margin-right: 0;
@@ -1097,10 +1101,6 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = `
   flex-direction: column;
 }
 
-.c4 {
-  margin-right: 4px;
-}
-
 .c2 {
   font-size: 16px;
   padding: 0;
@@ -1755,17 +1755,6 @@ exports[`ChoiceFieldset renders with a hidden legend 1`] = `
   flex-direction: column;
 }
 
-.c7 {
-  font-weight: 600;
-  font-size: 14px;
-  display: block;
-  color: #1F2328;
-  cursor: pointer;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
-}
-
 .c1 {
   position: absolute;
   width: 1px;
@@ -1779,6 +1768,17 @@ exports[`ChoiceFieldset renders with a hidden legend 1`] = `
   border-width: 0;
 }
 
+.c7 {
+  font-weight: 600;
+  font-size: 14px;
+  display: block;
+  color: #1F2328;
+  cursor: pointer;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+}
+
 .c5 {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1951,6 +1951,32 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
   border: none;
 }
 
+.c9 {
+  margin-top: 16px;
+}
+
+.c10 {
+  height: auto;
+  overflow: hidden;
+}
+
+.c13 {
+  margin-right: 4px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 16px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c14 {
+  line-height: 1.3333333333333333;
+}
+
 .c1 {
   margin-bottom: 16px;
 }
@@ -1978,32 +2004,6 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
   flex-direction: column;
 }
 
-.c9 {
-  margin-top: 16px;
-}
-
-.c10 {
-  height: auto;
-  overflow: hidden;
-}
-
-.c13 {
-  margin-right: 4px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-height: 16px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  line-height: 1.3333333333333333;
-}
-
 .c2 {
   font-size: 16px;
   padding: 0;
@@ -2021,8 +2021,8 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
 }
 
 .c11 {
-  -webkit-animation: 170ms eGcHP cubic-bezier(0.44,0.74,0.36,1);
-  animation: 170ms eGcHP cubic-bezier(0.44,0.74,0.36,1);
+  -webkit-animation: 170ms cAIjcu cubic-bezier(0.44,0.74,0.36,1);
+  animation: 170ms cAIjcu cubic-bezier(0.44,0.74,0.36,1);
 }
 
 .c12 {
@@ -2257,6 +2257,32 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
   border: none;
 }
 
+.c9 {
+  margin-top: 16px;
+}
+
+.c10 {
+  height: auto;
+  overflow: hidden;
+}
+
+.c13 {
+  margin-right: 4px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 16px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c14 {
+  line-height: 1.3333333333333333;
+}
+
 .c1 {
   margin-bottom: 16px;
 }
@@ -2284,32 +2310,6 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
   flex-direction: column;
 }
 
-.c9 {
-  margin-top: 16px;
-}
-
-.c10 {
-  height: auto;
-  overflow: hidden;
-}
-
-.c13 {
-  margin-right: 4px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-height: 16px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  line-height: 1.3333333333333333;
-}
-
 .c2 {
   font-size: 16px;
   padding: 0;
@@ -2327,8 +2327,8 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
 }
 
 .c11 {
-  -webkit-animation: 170ms eGcHP cubic-bezier(0.44,0.74,0.36,1);
-  animation: 170ms eGcHP cubic-bezier(0.44,0.74,0.36,1);
+  -webkit-animation: 170ms cAIjcu cubic-bezier(0.44,0.74,0.36,1);
+  animation: 170ms cAIjcu cubic-bezier(0.44,0.74,0.36,1);
 }
 
 .c12 {
diff --git a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
index eacd73368f9..5ff772c8f3b 100644
--- a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
@@ -23,10 +23,6 @@ exports[`DropdownMenu renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -46,32 +42,39 @@ exports[`DropdownMenu renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c0:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1 {
+.c2 {
   margin-left: 4px;
 }
 
 <button
   aria-haspopup="true"
-  className="c0"
+  className="c0 c1"
   id="react-aria-1"
   onClick={[Function]}
   onKeyDown={[Function]}
@@ -80,7 +83,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 >
   <svg
     aria-hidden="true"
-    className="c1"
+    className="c2"
     fill="currentColor"
     focusable="false"
     height={16}

From ad0d8f5b0f934268ccdf6271820a6f28a2fa2d20 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 9 Jun 2023 11:27:42 -0400
Subject: [PATCH 2/6] adds changeset

---
 .changeset/proud-rules-develop.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/proud-rules-develop.md

diff --git a/.changeset/proud-rules-develop.md b/.changeset/proud-rules-develop.md
new file mode 100644
index 00000000000..62843fcbe64
--- /dev/null
+++ b/.changeset/proud-rules-develop.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Upgrades styled-components to v5

From b1c721d46122500f73f95952e0a0e5f05adba8ea Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 9 Jun 2023 12:20:40 -0400
Subject: [PATCH 3/6] fixes type errors

---
 src/CounterLabel/CounterLabel.tsx | 1 -
 src/Token/TokenBase.tsx           | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CounterLabel/CounterLabel.tsx b/src/CounterLabel/CounterLabel.tsx
index 7de16f4405a..7871e2c24a5 100644
--- a/src/CounterLabel/CounterLabel.tsx
+++ b/src/CounterLabel/CounterLabel.tsx
@@ -34,7 +34,6 @@ const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
           )}
           {...props}
           as="span"
-          // @ts-expect-error Box is expecting a divelement, but this component forces a span element
           ref={forwardedRef}
         >
           {children}
diff --git a/src/Token/TokenBase.tsx b/src/Token/TokenBase.tsx
index 1bbecc97bcb..d51aceccb21 100644
--- a/src/Token/TokenBase.tsx
+++ b/src/Token/TokenBase.tsx
@@ -137,6 +137,7 @@ const StyledTokenBase = styled.span<
 
 const TokenBase = React.forwardRef(({onRemove, onKeyDown, id, size = defaultTokenSize, ...rest}, forwardedRef) => {
   return (
+    // @ts-expect-error the possible props in `...rest` would be different depending on the `as` prop
     <StyledTokenBase
       onKeyDown={(event: KeyboardEvent<HTMLSpanElement & HTMLAnchorElement & HTMLButtonElement>) => {
         onKeyDown && onKeyDown(event)

From b092ca8c4820446a40ac90d1a365348f099dc240 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 7 Jul 2023 11:38:25 -0400
Subject: [PATCH 4/6] Update .changeset/proud-rules-develop.md

Co-authored-by: Josh Black <joshblack@github.com>
---
 .changeset/proud-rules-develop.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/proud-rules-develop.md b/.changeset/proud-rules-develop.md
index 62843fcbe64..932b07134ab 100644
--- a/.changeset/proud-rules-develop.md
+++ b/.changeset/proud-rules-develop.md
@@ -1,5 +1,5 @@
 ---
-'@primer/react': patch
+'@primer/react': major
 ---
 
 Upgrades styled-components to v5

From 43e9cdc4a910b66d58aed40d0dd3a5f65775bd63 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Wed, 12 Jul 2023 16:36:17 -0400
Subject: [PATCH 5/6] updates changeset

---
 .changeset/proud-rules-develop.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.changeset/proud-rules-develop.md b/.changeset/proud-rules-develop.md
index 932b07134ab..c1dbcf30ee6 100644
--- a/.changeset/proud-rules-develop.md
+++ b/.changeset/proud-rules-develop.md
@@ -3,3 +3,5 @@
 ---
 
 Upgrades styled-components to v5
+
+<!-- Changed components: _none_ -->
\ No newline at end of file

From 3504e7ba2ee93570a7bb0d6caef3502cefe8b543 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Wed, 19 Jul 2023 11:54:26 -0400
Subject: [PATCH 6/6] rm Box snapshots emitting empty mq blocks, updates snaps
 post-merge

---
 src/__tests__/Box.test.tsx                    |  2 -
 .../__snapshots__/ActionMenu.test.tsx.snap    |  4 +-
 src/__tests__/__snapshots__/Box.test.tsx.snap | 80 -------------------
 .../__snapshots__/Button.test.tsx.snap        | 20 ++---
 .../ConfirmationDialog.test.tsx.snap          | 21 ++---
 5 files changed, 18 insertions(+), 109 deletions(-)

diff --git a/src/__tests__/Box.test.tsx b/src/__tests__/Box.test.tsx
index b884b69f385..703aa370250 100644
--- a/src/__tests__/Box.test.tsx
+++ b/src/__tests__/Box.test.tsx
@@ -22,13 +22,11 @@ describe('Box', () => {
   it('renders margin', () => {
     expect(render(<Box m={1} theme={theme} />)).toMatchSnapshot()
     expect(render(<Box m={[0, 1, 2, 3]} theme={theme} />)).toMatchSnapshot()
-    expect(render(<Box m={[1, 1, 1, 3]} theme={theme} />)).toMatchSnapshot()
   })
 
   it('renders padding', () => {
     expect(render(<Box p={1} theme={theme} />)).toMatchSnapshot()
     expect(render(<Box p={[0, 1, 2, 3]} theme={theme} />)).toMatchSnapshot()
-    expect(render(<Box p={[1, 1, 1, 3]} theme={theme} />)).toMatchSnapshot()
   })
 
   it('respects display', () => {
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index 35244bf136d..666b9ce9c90 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -231,9 +231,7 @@ exports[`ActionMenu renders consistently 1`] = `
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1 [data-component="leadingVisual"],
-.c1 [data-component="trailingVisual"],
-.c1 [data-component="trailingAction"] {
+.c1 [data-component="leadingVisual"],.c1 [data-component="trailingVisual"],.c1 [data-component="trailingAction"] {
   color: #656d76;
 }
 
diff --git a/src/__tests__/__snapshots__/Box.test.tsx.snap b/src/__tests__/__snapshots__/Box.test.tsx.snap
index 84b403a631a..716e95265d3 100644
--- a/src/__tests__/__snapshots__/Box.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Box.test.tsx.snap
@@ -44,46 +44,6 @@ exports[`Box renders margin 2`] = `
 />
 `;
 
-exports[`Box renders margin 3`] = `
-.c0 {
-  margin: 4px;
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media screen and (min-width:1012px) {
-
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    margin: 4px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    margin: 4px;
-  }
-}
-
-@media screen and (min-width:1012px) {
-  .c0 {
-    margin: 16px;
-  }
-}
-
-<div
-  className="c0"
-/>
-`;
-
 exports[`Box renders padding 1`] = `
 .c0 {
   padding: 4px;
@@ -122,46 +82,6 @@ exports[`Box renders padding 2`] = `
 />
 `;
 
-exports[`Box renders padding 3`] = `
-.c0 {
-  padding: 4px;
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media screen and (min-width:1012px) {
-
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    padding: 4px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    padding: 4px;
-  }
-}
-
-@media screen and (min-width:1012px) {
-  .c0 {
-    padding: 16px;
-  }
-}
-
-<div
-  className="c0"
-/>
-`;
-
 exports[`Box respects display 1`] = `
 .c0 {
   display: inline;
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index bef396323ce..74787c01967 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -217,9 +217,7 @@ exports[`Button renders consistently 1`] = `
   border-color: rgba(31,35,40,0.15);
 }
 
-.c0 [data-component="leadingVisual"],
-.c0 [data-component="trailingVisual"],
-.c0 [data-component="trailingAction"] {
+.c0 [data-component="leadingVisual"],.c0 [data-component="trailingVisual"],.c0 [data-component="trailingAction"] {
   color: #656d76;
 }
 
@@ -458,9 +456,7 @@ exports[`Button respects block prop 1`] = `
   border-color: btn.activeBorder;
 }
 
-.c0 [data-component="leadingVisual"],
-.c0 [data-component="trailingVisual"],
-.c0 [data-component="trailingAction"] {
+.c0 [data-component="leadingVisual"],.c0 [data-component="trailingVisual"],.c0 [data-component="trailingAction"] {
   color: fg.muted;
 }
 
@@ -705,9 +701,7 @@ exports[`Button respects the alignContent prop 1`] = `
   border-color: btn.activeBorder;
 }
 
-.c0 [data-component="leadingVisual"],
-.c0 [data-component="trailingVisual"],
-.c0 [data-component="trailingAction"] {
+.c0 [data-component="leadingVisual"],.c0 [data-component="trailingVisual"],.c0 [data-component="trailingAction"] {
   color: fg.muted;
 }
 
@@ -951,9 +945,7 @@ exports[`Button respects the large size prop 1`] = `
   border-color: btn.activeBorder;
 }
 
-.c0 [data-component="leadingVisual"],
-.c0 [data-component="trailingVisual"],
-.c0 [data-component="trailingAction"] {
+.c0 [data-component="leadingVisual"],.c0 [data-component="trailingVisual"],.c0 [data-component="trailingAction"] {
   color: fg.muted;
 }
 
@@ -1198,9 +1190,7 @@ exports[`Button respects the small size prop 1`] = `
   border-color: btn.activeBorder;
 }
 
-.c0 [data-component="leadingVisual"],
-.c0 [data-component="trailingVisual"],
-.c0 [data-component="trailingAction"] {
+.c0 [data-component="leadingVisual"],.c0 [data-component="trailingVisual"],.c0 [data-component="trailingAction"] {
   color: fg.muted;
 }
 
diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
index 1d33d06ccb4..d79269a8efe 100644
--- a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
@@ -29,10 +29,6 @@ exports[`ConfirmationDialog renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -52,20 +48,27 @@ exports[`ConfirmationDialog renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.c1:hover {
+.c2 {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c2:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c2:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c2:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c2:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
@@ -81,7 +84,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
   fontFamily="normal"
 >
   <button
-    className="c1"
+    className="c1 c2"
     onClick={[Function]}
   >
     Show dialog