diff --git a/.changeset/proud-rules-develop.md b/.changeset/proud-rules-develop.md
new file mode 100644
index 00000000000..c1dbcf30ee6
--- /dev/null
+++ b/.changeset/proud-rules-develop.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': major
+---
+
+Upgrades styled-components to v5
+
+<!-- Changed components: _none_ -->
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 0e0839d02ed..2ac9a473de8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "@styled-system/props": "^5.1.5",
         "@styled-system/theme-get": "^5.1.2",
         "@types/react-is": "^18.2.1",
-        "@types/styled-components": "^5.1.11",
+        "@types/styled-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",
@@ -100,7 +100,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",
@@ -132,7 +132,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",
@@ -164,7 +164,8 @@
         "size-limit": "8.2.4",
         "storybook": "7.1.0",
         "storybook-addon-turbo-build": "2.0.1",
-        "styled-components": "4.4.1",
+        "storybook-css-modules": "1.0.8",
+        "styled-components": "5.3.11",
         "terser": "5.17.6",
         "ts-node": "10.9.1",
         "ts-toolbelt": "9.6.0",
@@ -3443,18 +3444,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": {
@@ -12299,9 +12306,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": "*",
@@ -13217,18 +13224,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/autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -13807,16 +13802,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"
@@ -14582,10 +14577,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",
@@ -15765,18 +15763,6 @@
         "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-blank-pseudo": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-6.0.0.tgz",
@@ -15805,7 +15791,7 @@
     "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"
@@ -15915,22 +15901,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",
@@ -16275,15 +16255,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",
@@ -25853,15 +25824,18 @@
       "dev": true
     },
     "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": {
@@ -28187,12 +28161,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",
@@ -28227,15 +28195,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",
@@ -32965,13 +32924,6 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
-    "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-url-loader": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz",
@@ -33662,6 +33614,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",
@@ -33878,20 +33836,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",
@@ -33902,13 +33846,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",
@@ -34131,6 +34068,15 @@
         "esbuild-loader": "^3.0.0"
       }
     },
+    "node_modules/storybook-css-modules": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/storybook-css-modules/-/storybook-css-modules-1.0.8.tgz",
+      "integrity": "sha512-anITwllH6nLw0quPElVBLRrE8QDbcRv0Dgl8sKLOc4uiqw+g1GE2l21Stjx3Wyv2O6ZKJScbyOpOuuz3SmeaOQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/stream-shift": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
@@ -34357,37 +34303,35 @@
       }
     },
     "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-components/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
-    },
     "node_modules/styled-system": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz",
@@ -34424,21 +34368,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",
@@ -35979,13 +35908,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": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/url/-/url-0.11.1.tgz",
diff --git a/package.json b/package.json
index fdb174d9793..64546632a5c 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
     "@types/react-is": "^18.2.1",
-    "@types/styled-components": "^5.1.11",
+    "@types/styled-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",
@@ -185,7 +185,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",
@@ -217,7 +217,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",
@@ -249,7 +249,8 @@
     "size-limit": "8.2.4",
     "storybook": "7.1.0",
     "storybook-addon-turbo-build": "2.0.1",
-    "styled-components": "4.4.1",
+    "storybook-css-modules": "1.0.8",
+    "styled-components": "5.3.11",
     "terser": "5.17.6",
     "ts-node": "10.9.1",
     "ts-toolbelt": "9.6.0",
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/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index 51c4560234b..0a4d94b1939 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -88,12 +88,11 @@ exports[`NavList renders a simple list 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c2 {
+[data-component="ActionList.Divider"] + .c1 {
   --divider-color: transparent !important;
 }
 
-.c2:hover:not([aria-disabled]),
-.c2:focus:not([aria-disabled]),
+.c2:hover:not([aria-disabled]),.c2:focus:not([aria-disabled]),
 .c2[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
@@ -169,12 +168,11 @@ exports[`NavList renders a simple list 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c6 {
+[data-component="ActionList.Divider"] + .c1 {
   --divider-color: transparent !important;
 }
 
-.c6:hover:not([aria-disabled]),
-.c6:focus:not([aria-disabled]),
+.c6:hover:not([aria-disabled]),.c6:focus:not([aria-disabled]),
 .c6[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
@@ -362,29 +360,6 @@ exports[`NavList renders a simple list 1`] = `
 `;
 
 exports[`NavList renders with groups 1`] = `
-.c8 {
-  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;
-}
-
-.c9 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  font-weight: 400;
-}
-
 .c1 {
   height: 1px;
   background-color: rgba(208,215,222,0.48);
@@ -419,6 +394,29 @@ exports[`NavList renders with groups 1`] = `
   padding-inline-start: 0;
 }
 
+.c8 {
+  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;
+}
+
+.c9 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  font-weight: 400;
+}
+
 .c0 {
   margin: 0;
   padding-inline-start: 0;
@@ -483,12 +481,11 @@ exports[`NavList renders with groups 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c6 {
+[data-component="ActionList.Divider"] + .c5 {
   --divider-color: transparent !important;
 }
 
-.c6:hover:not([aria-disabled]),
-.c6:focus:not([aria-disabled]),
+.c6:hover:not([aria-disabled]),.c6:focus:not([aria-disabled]),
 .c6[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
@@ -564,12 +561,11 @@ exports[`NavList renders with groups 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c10 {
+[data-component="ActionList.Divider"] + .c5 {
   --divider-color: transparent !important;
 }
 
-.c10:hover:not([aria-disabled]),
-.c10:focus:not([aria-disabled]),
+.c10:hover:not([aria-disabled]),.c10:focus:not([aria-disabled]),
 .c10[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
@@ -785,7 +781,11 @@ exports[`NavList renders with groups 1`] = `
 `;
 
 exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav contains the current item and is open 1`] = `
-.c4 {
+.c2 {
+  list-style: none;
+}
+
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -801,18 +801,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c6 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  font-weight: 400;
-}
-
-.c1 {
-  list-style: none;
-}
-
-.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -823,13 +811,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   flex-grow: 1;
 }
 
-.c9 {
-  padding: 0;
-  margin: 0;
-  display: block;
+.c7 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  font-weight: 400;
 }
 
-.c7 {
+.c8 {
   height: 20px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -839,12 +829,17 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: initial;
 }
 
-[data-variant="danger"]:hover .c7,
-[data-variant="danger"]:active .c7 {
+[data-variant="danger"]:hover .c1,[data-variant="danger"]:active .c8 {
   color: #1F2328;
 }
 
-.c8 {
+.c10 {
+  padding: 0;
+  margin: 0;
+  display: block;
+}
+
+.c9 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
@@ -857,7 +852,16 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   padding-bottom: 8px;
 }
 
-.c10 {
+[data-component="ActionList.Divider"] + .c3 {
+  --divider-color: transparent !important;
+}
+
+.c13:hover:not([aria-disabled]) + .c3,
+.c13[data-focus-visible-added] + li {
+  --divider-color: transparent;
+}
+
+.c11 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -891,15 +895,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   background-color: rgba(208,215,222,0.24);
 }
 
-.c10[aria-disabled] {
+.c11[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"] {
+.c11 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"]::before {
+.c11 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -910,26 +914,25 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-color: var(--divider-color,transparent);
 }
 
-.c10:not(:first-of-type) {
+.c11:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c10 {
+[data-component="ActionList.Divider"] + .c3 {
   --divider-color: transparent !important;
 }
 
-.c10:hover:not([aria-disabled]),
-.c10:focus:not([aria-disabled]),
-.c10[data-focus-visible-added]:not([aria-disabled]) {
+.c11:hover:not([aria-disabled]),.c11:focus:not([aria-disabled]),
+.c11[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c10:hover:not([aria-disabled]) + .c2,
-.c10[data-focus-visible-added] + li {
+.c11:hover:not([aria-disabled]) + .c3,
+.c11[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c10::after {
+.c11::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -940,42 +943,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
 }
 
-.c12:hover:not([aria-disabled]) + .c2,
-.c12[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c13:hover:not([aria-disabled]) + .c2,
-.c13[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c14:hover:not([aria-disabled]) + .c2,
-.c14[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c15:hover:not([aria-disabled]) + .c2,
-.c15[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c16:hover:not([aria-disabled]) + .c2,
-.c16[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c17:hover:not([aria-disabled]) + .c2,
-.c17[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c18:hover:not([aria-disabled]) + .c2,
-.c18[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c3 {
+.c4 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1007,15 +975,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 600;
 }
 
-.c3[aria-disabled] {
+.c4[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c4 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c4 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1026,7 +994,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-color: var(--divider-color,transparent);
 }
 
-.c3:not(:first-of-type) {
+.c4:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
@@ -1034,23 +1002,17 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   --divider-color: transparent !important;
 }
 
-.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[data-focus-visible-added] + li {
+.c4:hover:not([aria-disabled]),.c4:focus:not([aria-disabled]),
+.c4[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c19:hover:not([aria-disabled]) + .c2,
-.c19[data-focus-visible-added] + li {
+.c4:hover:not([aria-disabled]) + .c3,
+.c4[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c11 {
+.c12 {
   color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1072,12 +1034,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 400;
 }
 
-.c11:hover {
+.c12:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c11:is(button) {
+.c12:is(button) {
   display: inline-block;
   padding: 0;
   font-size: inherit;
@@ -1094,58 +1056,66 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   appearance: none;
 }
 
-.c11:hover {
+.c12:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10:hover:not([aria-disabled]) {
+
+}
+
+@media (forced-colors:active) {
+
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c11:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c10:focus-visible,
-  .c10 > a:focus-visible {
+  .c11:focus-visible,
+  .c11 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c10:active:not([aria-disabled]) {
+  .c11:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c10:focus {
+  .c11:focus {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:hover:not([aria-disabled]) {
+  .c4:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c3:focus-visible,
-  .c3 > a:focus-visible {
+  .c4:focus-visible,
+  .c4 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c3:active:not([aria-disabled]) {
+  .c4:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c3:focus {
+  .c4:focus {
     outline: solid 1px transparent !important;
   }
 }
@@ -1159,34 +1129,34 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
     >
       <li
         aria-labelledby="react-aria-1"
-        class="c1"
+        class="c1 c2"
       >
         <button
           aria-controls="react-aria-2"
           aria-expanded="true"
           aria-labelledby="react-aria-1 "
-          class="c2 c3"
+          class="c3 c4"
           tabindex="0"
         >
           <div
-            class="c4"
+            class="c1 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <div
-              class="c5"
+              class="c1 c6"
             >
               <span
-                class="c6"
+                class="c1 c7"
                 id="react-aria-1"
               >
                 Item
               </span>
               <span
-                class="c7"
+                class="c1 c8"
               >
                 <svg
                   aria-hidden="true"
-                  class="c8"
+                  class="c9"
                   fill="currentColor"
                   focusable="false"
                   height="16"
@@ -1206,25 +1176,25 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
         <div>
           <ul
             aria-labelledby="react-aria-1"
-            class="c9"
+            class="c1 c10"
             id="react-aria-2"
           >
             <li
-              class="c2 c10"
+              class="c3 c11"
             >
               <a
                 aria-current="page"
                 aria-labelledby="react-aria-3 "
-                class="c11"
+                class="c12"
                 href="#"
                 tabindex="0"
               >
                 <div
-                  class="c4"
+                  class="c1 c5"
                   data-component="ActionList.Item--DividerContainer"
                 >
                   <span
-                    class="c6"
+                    class="c1 c7"
                     id="react-aria-3"
                   >
                     Sub Item
@@ -1241,7 +1211,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 `;
 
 exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains the current item and is closed 1`] = `
-.c4 {
+.c2 {
+  list-style: none;
+}
+
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1257,18 +1231,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c6 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  font-weight: 400;
-}
-
-.c1 {
-  list-style: none;
-}
-
-.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1279,13 +1241,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   flex-grow: 1;
 }
 
-.c9 {
-  padding: 0;
-  margin: 0;
-  display: none;
+.c7 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  font-weight: 400;
 }
 
-.c7 {
+.c8 {
   height: 20px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1295,12 +1259,17 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: initial;
 }
 
-[data-variant="danger"]:hover .c7,
-[data-variant="danger"]:active .c7 {
+[data-variant="danger"]:hover .c1,[data-variant="danger"]:active .c8 {
   color: #1F2328;
 }
 
-.c8 {
+.c10 {
+  padding: 0;
+  margin: 0;
+  display: none;
+}
+
+.c9 {
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
@@ -1313,7 +1282,16 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   padding-bottom: 8px;
 }
 
-.c10 {
+[data-component="ActionList.Divider"] + .c3 {
+  --divider-color: transparent !important;
+}
+
+.c13:hover:not([aria-disabled]) + .c3,
+.c13[data-focus-visible-added] + li {
+  --divider-color: transparent;
+}
+
+.c11 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1347,15 +1325,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   background-color: rgba(208,215,222,0.24);
 }
 
-.c10[aria-disabled] {
+.c11[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"] {
+.c11 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"]::before {
+.c11 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1366,26 +1344,25 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-color: var(--divider-color,transparent);
 }
 
-.c10:not(:first-of-type) {
+.c11:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c10 {
+[data-component="ActionList.Divider"] + .c3 {
   --divider-color: transparent !important;
 }
 
-.c10:hover:not([aria-disabled]),
-.c10:focus:not([aria-disabled]),
-.c10[data-focus-visible-added]:not([aria-disabled]) {
+.c11:hover:not([aria-disabled]),.c11:focus:not([aria-disabled]),
+.c11[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c10:hover:not([aria-disabled]) + .c2,
-.c10[data-focus-visible-added] + li {
+.c11:hover:not([aria-disabled]) + .c3,
+.c11[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c10::after {
+.c11::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1396,47 +1373,16 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-.c12:hover:not([aria-disabled]) + .c2,
-.c12[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c13:hover:not([aria-disabled]) + .c2,
-.c13[data-focus-visible-added] + li {
-  --divider-color: transparent;
+[data-component="ActionList.Divider"] + .c3 {
+  --divider-color: transparent !important;
 }
 
-.c14:hover:not([aria-disabled]) + .c2,
+.c14:hover:not([aria-disabled]) + .c3,
 .c14[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c15:hover:not([aria-disabled]) + .c2,
-.c15[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c16:hover:not([aria-disabled]) + .c2,
-.c16[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c17:hover:not([aria-disabled]) + .c2,
-.c17[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c18:hover:not([aria-disabled]) + .c2,
-.c18[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c19:hover:not([aria-disabled]) + .c2,
-.c19[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c3 {
+.c4 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1469,15 +1415,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   background-color: rgba(208,215,222,0.24);
 }
 
-.c3[aria-disabled] {
+.c4[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c4 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c4 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1488,7 +1434,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-color: var(--divider-color,transparent);
 }
 
-.c3:not(:first-of-type) {
+.c4:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
@@ -1496,18 +1442,17 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   --divider-color: transparent !important;
 }
 
-.c3:hover:not([aria-disabled]),
-.c3:focus:not([aria-disabled]),
-.c3[data-focus-visible-added]:not([aria-disabled]) {
+.c4:hover:not([aria-disabled]),.c4:focus:not([aria-disabled]),
+.c4[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c3:hover:not([aria-disabled]) + .c2,
-.c3[data-focus-visible-added] + li {
+.c4:hover:not([aria-disabled]) + .c3,
+.c4[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c3::after {
+.c4::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1518,7 +1463,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-.c11 {
+.c12 {
   color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1540,12 +1485,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: 400;
 }
 
-.c11:hover {
+.c12:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c11:is(button) {
+.c12:is(button) {
   display: inline-block;
   padding: 0;
   font-size: inherit;
@@ -1562,58 +1507,74 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   appearance: none;
 }
 
-.c11:hover {
+.c12:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10:hover:not([aria-disabled]) {
+
+}
+
+@media (forced-colors:active) {
+
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c11:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c10:focus-visible,
-  .c10 > a:focus-visible {
+  .c11:focus-visible,
+  .c11 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c10:active:not([aria-disabled]) {
+  .c11:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c10:focus {
+  .c11:focus {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:hover:not([aria-disabled]) {
+
+}
+
+@media (forced-colors:active) {
+
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c4:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c3:focus-visible,
-  .c3 > a:focus-visible {
+  .c4:focus-visible,
+  .c4 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c3:active:not([aria-disabled]) {
+  .c4:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c3:focus {
+  .c4:focus {
     outline: solid 1px transparent !important;
   }
 }
@@ -1627,34 +1588,34 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
     >
       <li
         aria-labelledby="react-aria-1"
-        class="c1"
+        class="c1 c2"
       >
         <button
           aria-controls="react-aria-2"
           aria-expanded="false"
           aria-labelledby="react-aria-1 "
-          class="c2 c3"
+          class="c3 c4"
           tabindex="0"
         >
           <div
-            class="c4"
+            class="c1 c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <div
-              class="c5"
+              class="c1 c6"
             >
               <span
-                class="c6"
+                class="c1 c7"
                 id="react-aria-1"
               >
                 Item
               </span>
               <span
-                class="c7"
+                class="c1 c8"
               >
                 <svg
                   aria-hidden="true"
-                  class="c8"
+                  class="c9"
                   fill="currentColor"
                   focusable="false"
                   height="16"
@@ -1674,25 +1635,25 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
         <div>
           <ul
             aria-labelledby="react-aria-1"
-            class="c9"
+            class="c1 c10"
             id="react-aria-2"
           >
             <li
-              class="c2 c10"
+              class="c3 c11"
             >
               <a
                 aria-current="page"
                 aria-labelledby="react-aria-3 "
-                class="c11"
+                class="c12"
                 href="#"
                 tabindex="0"
               >
                 <div
-                  class="c4"
+                  class="c1 c5"
                   data-component="ActionList.Item--DividerContainer"
                 >
                   <span
-                    class="c6"
+                    class="c1 c7"
                     id="react-aria-3"
                   >
                     Sub Item
diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
index c8a88864402..5b1860fd7c9 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,36 @@ 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;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 100%;
+  -ms-flex: 1 1 100%;
+  flex: 1 1 100%;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
+}
+
 .c6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -61,6 +91,13 @@ exports[`PageLayout renders condensed layout 1`] = `
   margin-right: 0;
 }
 
+.c9 {
+  height: 100%;
+  position: relative;
+  display: none;
+  margin-left: 16px;
+}
+
 .c10 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
@@ -69,43 +106,6 @@ exports[`PageLayout renders condensed layout 1`] = `
   padding: 0;
 }
 
-.c0 {
-  padding: 16px;
-}
-
-.c2 {
-  width: 100%;
-  margin-bottom: 16px;
-}
-
-.c4 {
-  margin-left: -16px;
-  margin-right: -16px;
-  display: none;
-  margin-top: 16px;
-}
-
-.c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 100%;
-  -ms-flex: 1 1 100%;
-  flex: 1 1 100%;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  max-width: 100%;
-}
-
-.c9 {
-  height: 100%;
-  position: relative;
-  display: none;
-  margin-left: 16px;
-}
-
 .c11 {
   -webkit-order: 4;
   -ms-flex-order: 4;
@@ -121,6 +121,26 @@ exports[`PageLayout renders condensed layout 1`] = `
   margin-bottom: 16px;
 }
 
+@media screen and (min-width:768px) {
+  .c4 {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+@media screen and (max-width:1012px) {
+  .c5 {
+    row-gap: 16px;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c5 {
+    -webkit-column-gap: 16px;
+    column-gap: 16px;
+  }
+}
+
 @media screen and (min-width:768px) {
   .c8 {
     width: auto;
@@ -132,6 +152,10 @@ exports[`PageLayout renders condensed layout 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c10 {
     width: 256px;
@@ -151,26 +175,6 @@ exports[`PageLayout renders condensed layout 1`] = `
   }
 }
 
-@media screen and (min-width:768px) {
-  .c4 {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-}
-
-@media screen and (max-width:1012px) {
-  .c5 {
-    row-gap: 16px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c5 {
-    -webkit-column-gap: 16px;
-    column-gap: 16px;
-  }
-}
-
 @media screen and (min-width:768px) {
   .c12 {
     margin-left: 0 !important;
@@ -371,18 +375,38 @@ exports[`PageLayout renders default layout 1`] = `
   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;
@@ -422,12 +446,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) {
   .c9 {
     margin-left: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c10 {
     width: 256px;
@@ -447,12 +483,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) {
   .c11 {
     margin-top: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c12 {
     margin-left: 0 !important;
@@ -621,6 +669,33 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   padding: 0;
 }
 
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-order: 3;
+  -ms-flex-order: 3;
+  order: 3;
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c9 {
+  margin-left: -16px;
+  margin-right: -16px;
+  display: none;
+  margin-bottom: 16px;
+}
+
+.c10 {
+  height: 100%;
+  position: relative;
+  display: none;
+  margin-right: 16px;
+}
+
 .c11 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
@@ -637,31 +712,12 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   margin-top: 16px;
 }
 
-.c9 {
-  margin-left: -16px;
-  margin-right: -16px;
-  display: none;
-  margin-bottom: 16px;
-}
+@media screen and (min-width:544px) {
 
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-order: 3;
-  -ms-flex-order: 3;
-  order: 3;
-  width: 100%;
-  margin-left: 0;
-  margin-right: 0;
 }
 
-.c10 {
-  height: 100%;
-  position: relative;
-  display: none;
-  margin-right: 16px;
+@media screen and (min-width:768px) {
+
 }
 
 @media screen and (min-width:1012px) {
@@ -670,12 +726,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) {
   .c2 {
     margin-bottom: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c4 {
     margin-left: 0 !important;
@@ -705,28 +773,18 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c11 {
-    width: 256px;
-    overflow: auto;
-  }
-}
-
-@media screen and (min-width:1012px) {
-  .c11 {
-    width: 296px;
+  .c8 {
+    width: auto;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
   }
 }
 
-@media screen and (min-width:1280px) {
-  .c11 {
-    --pane-max-width-diff: 959px;
-  }
-}
+@media screen and (min-width:544px) {
 
-@media screen and (min-width:1012px) {
-  .c12 {
-    margin-top: 24px;
-  }
 }
 
 @media screen and (min-width:768px) {
@@ -744,15 +802,12 @@ 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;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
+
 }
 
 @media screen and (min-width:1012px) {
@@ -761,6 +816,43 @@ exports[`PageLayout renders pane in different position when narrow 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;
+  }
+}
+
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
+@media screen and (min-width:1012px) {
+  .c12 {
+    margin-top: 24px;
+  }
+}
+
 <div>
   <div
     class="c0"
@@ -881,6 +973,31 @@ exports[`PageLayout renders with dividers 1`] = `
   max-width: 100%;
 }
 
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c7 {
+  height: 100%;
+  position: relative;
+  display: none;
+  margin-left: 16px;
+}
+
+.c8 {
+  --pane-min-width: 256px;
+  --pane-max-width-diff: 511px;
+  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
+  width: 100%;
+  padding: 0;
+}
+
 .c9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -914,31 +1031,6 @@ exports[`PageLayout renders with dividers 1`] = `
   padding: 0;
 }
 
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c7 {
-  height: 100%;
-  position: relative;
-  display: none;
-  margin-left: 16px;
-}
-
-.c8 {
-  --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;
@@ -954,18 +1046,38 @@ exports[`PageLayout renders with dividers 1`] = `
   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;
@@ -1005,12 +1117,24 @@ exports[`PageLayout renders with dividers 1`] = `
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
+@media screen and (min-width:768px) {
+
+}
+
 @media screen and (min-width:1012px) {
   .c7 {
     margin-left: 24px;
   }
 }
 
+@media screen and (min-width:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c8 {
     width: 256px;
@@ -1030,12 +1154,24 @@ 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:544px) {
+
+}
+
 @media screen and (min-width:768px) {
   .c12 {
     margin-left: 0 !important;
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 0a0d264d3f2..9d1c0bbd6f3 100644
--- a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
+++ b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
@@ -135,6 +135,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;
@@ -161,6 +169,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;
@@ -189,6 +205,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/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)
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__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
index ba6d34d8eb9..b9cb1698176 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__/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__/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..716e95265d3 100644
--- a/src/__tests__/__snapshots__/Box.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Box.test.tsx.snap
@@ -44,34 +44,6 @@ exports[`Box renders margin 2`] = `
 />
 `;
 
-exports[`Box renders margin 3`] = `
-.c0 {
-  margin: 4px;
-}
-
-@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;
@@ -110,34 +82,6 @@ exports[`Box renders padding 2`] = `
 />
 `;
 
-exports[`Box renders padding 3`] = `
-.c0 {
-  padding: 4px;
-}
-
-@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 2e90a5777df..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;
 }
 
@@ -1583,8 +1573,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 601bbd7160e..99b670ceb7d 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]}
@@ -895,10 +916,6 @@ exports[`TextInput renders leadingVisual 2`] = `
   -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,
@@ -936,12 +953,19 @@ exports[`TextInput renders leadingVisual 2`] = `
   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;
@@ -951,13 +975,13 @@ exports[`TextInput renders leadingVisual 2`] = `
   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;
@@ -967,7 +991,7 @@ exports[`TextInput renders leadingVisual 2`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -979,7 +1003,7 @@ exports[`TextInput renders leadingVisual 2`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <span
@@ -1009,7 +1033,7 @@ exports[`TextInput renders leadingVisual 2`] = `
     </svg>
   </span>
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -1040,10 +1064,6 @@ exports[`TextInput renders leadingVisual 3`] = `
   -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,
@@ -1081,12 +1101,19 @@ exports[`TextInput renders leadingVisual 3`] = `
   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;
@@ -1096,13 +1123,13 @@ exports[`TextInput renders leadingVisual 3`] = `
   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;
@@ -1112,7 +1139,7 @@ exports[`TextInput renders leadingVisual 3`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -1124,7 +1151,7 @@ exports[`TextInput renders leadingVisual 3`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <span
@@ -1135,7 +1162,7 @@ exports[`TextInput renders leadingVisual 3`] = `
     </div>
   </span>
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -1166,10 +1193,6 @@ exports[`TextInput renders leadingVisual 4`] = `
   -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,
@@ -1207,12 +1230,19 @@ exports[`TextInput renders leadingVisual 4`] = `
   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;
@@ -1222,13 +1252,13 @@ exports[`TextInput renders leadingVisual 4`] = `
   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;
@@ -1238,7 +1268,7 @@ exports[`TextInput renders leadingVisual 4`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -1250,7 +1280,7 @@ exports[`TextInput renders leadingVisual 4`] = `
 
 <span
   aria-busy={false}
-  className="c0 TextInput-wrapper"
+  className="c0 c1 TextInput-wrapper"
   onClick={[Function]}
 >
   <span
@@ -1261,7 +1291,7 @@ exports[`TextInput renders leadingVisual 4`] = `
     </div>
   </span>
   <input
-    className="c1"
+    className="c2"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -1293,10 +1323,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,
@@ -1334,12 +1360,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;
@@ -1349,13 +1382,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;
@@ -1365,7 +1398,7 @@ exports[`TextInput renders monospace 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -1377,11 +1410,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]}
@@ -1411,10 +1444,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,
@@ -1452,12 +1481,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;
@@ -1467,13 +1503,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;
@@ -1483,7 +1519,7 @@ exports[`TextInput renders placeholder 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -1495,11 +1531,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]}
@@ -1538,10 +1574,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,
@@ -1579,12 +1611,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;
@@ -1594,13 +1633,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;
@@ -1610,7 +1649,7 @@ exports[`TextInput renders small 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -1622,12 +1661,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]}
@@ -1638,13 +1677,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;
@@ -1689,61 +1728,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: 12px;
 }
 
-.c4[data-component=IconButton] {
+.c5[data-component=IconButton] {
   display: inline-grid;
   padding: unset;
   place-content: center;
@@ -1751,55 +1789,55 @@ 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;
@@ -1813,16 +1851,16 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   align-items: center;
 }
 
-.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;
@@ -1838,43 +1876,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;
@@ -1882,7 +1920,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);
 }
@@ -1906,10 +1944,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,
@@ -1941,12 +1975,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;
@@ -1956,18 +1997,18 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   flex-shrink: 0;
 }
 
-.c0 > input,
-.c0 > select {
+.c1 > input,
+.c1 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c3 {
+.c4 {
   position: relative;
   display: inline-block;
 }
 
-.c3::before {
+.c4::before {
   position: absolute;
   z-index: 1000001;
   display: none;
@@ -1980,7 +2021,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   opacity: 0;
 }
 
-.c3::after {
+.c4::after {
   position: absolute;
   z-index: 1000000;
   display: none;
@@ -2006,14 +2047,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;
@@ -2029,36 +2070,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;
@@ -2066,27 +2107,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;
@@ -2094,24 +2135,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;
@@ -2120,7 +2161,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;
@@ -2128,7 +2169,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;
@@ -2137,7 +2178,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%;
@@ -2145,7 +2186,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;
@@ -2155,8 +2196,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%);
@@ -2164,30 +2205,30 @@ 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;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2197,18 +2238,18 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
 @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;
@@ -2229,11 +2270,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]}
@@ -2242,16 +2283,16 @@ exports[`TextInput renders trailingAction icon button 1`] = `
     type="text"
   />
   <span
-    className="c2 TextInput-action"
+    className="c3 TextInput-action"
   >
     <span
       aria-label="Icon label"
-      className="c3 tooltipped-n"
+      className="c4 tooltipped-n"
       role="tooltip"
     >
       <button
         aria-label="Icon label"
-        className="c4"
+        className="c5"
         data-block={null}
         data-component="IconButton"
         data-no-visuals={true}
@@ -2288,20 +2329,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;
@@ -2346,61 +2387,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: 12px;
 }
 
-.c3[data-component=IconButton] {
+.c4[data-component=IconButton] {
   display: inline-grid;
   padding: unset;
   place-content: center;
@@ -2408,55 +2448,55 @@ 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;
@@ -2470,16 +2510,16 @@ exports[`TextInput renders trailingAction text button 1`] = `
   align-items: center;
 }
 
-.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;
@@ -2495,43 +2535,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;
@@ -2539,7 +2579,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);
 }
@@ -2563,10 +2603,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,
@@ -2598,12 +2634,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;
@@ -2613,13 +2656,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;
@@ -2629,18 +2672,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;
@@ -2661,11 +2704,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]}
@@ -2674,17 +2717,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
@@ -2699,20 +2742,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;
@@ -2757,61 +2800,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: 12px;
 }
 
-.c4[data-component=IconButton] {
+.c5[data-component=IconButton] {
   display: inline-grid;
   padding: unset;
   place-content: center;
@@ -2819,55 +2861,55 @@ 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;
@@ -2881,16 +2923,16 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   align-items: center;
 }
 
-.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;
@@ -2906,43 +2948,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;
@@ -2950,7 +2992,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);
 }
@@ -2974,10 +3016,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,
@@ -3009,12 +3047,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;
@@ -3024,19 +3069,19 @@ 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;
 }
 
-.c3 {
+.c4 {
   position: relative;
   display: inline-block;
   display: inline-block;
 }
 
-.c3::before {
+.c4::before {
   position: absolute;
   z-index: 1000001;
   display: none;
@@ -3049,7 +3094,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   opacity: 0;
 }
 
-.c3::after {
+.c4::after {
   position: absolute;
   z-index: 1000000;
   display: none;
@@ -3075,14 +3120,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;
@@ -3098,36 +3143,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;
@@ -3135,27 +3180,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;
@@ -3163,24 +3208,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;
@@ -3189,7 +3234,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;
@@ -3197,7 +3242,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;
@@ -3206,7 +3251,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%;
@@ -3214,7 +3259,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;
@@ -3224,8 +3269,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%);
@@ -3233,30 +3278,30 @@ 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;
 }
 
-.c1 {
+.c2 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3266,18 +3311,18 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
 @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;
@@ -3298,11 +3343,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]}
@@ -3311,22 +3356,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
@@ -3361,10 +3406,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,
@@ -3402,12 +3443,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;
@@ -3417,13 +3465,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;
@@ -3433,7 +3481,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -3445,11 +3493,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]}
@@ -3506,10 +3554,6 @@ exports[`TextInput renders trailingVisual 2`] = `
   -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,
@@ -3547,12 +3591,19 @@ exports[`TextInput renders trailingVisual 2`] = `
   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;
@@ -3562,13 +3613,13 @@ exports[`TextInput renders trailingVisual 2`] = `
   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;
@@ -3578,7 +3629,7 @@ exports[`TextInput renders trailingVisual 2`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -3590,11 +3641,11 @@ exports[`TextInput renders trailingVisual 2`] = `
 
 <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]}
@@ -3651,10 +3702,6 @@ exports[`TextInput renders trailingVisual 3`] = `
   -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,
@@ -3692,12 +3739,19 @@ exports[`TextInput renders trailingVisual 3`] = `
   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;
@@ -3707,13 +3761,13 @@ exports[`TextInput renders trailingVisual 3`] = `
   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;
@@ -3723,7 +3777,7 @@ exports[`TextInput renders trailingVisual 3`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -3735,11 +3789,11 @@ exports[`TextInput renders trailingVisual 3`] = `
 
 <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]}
@@ -3777,10 +3831,6 @@ exports[`TextInput renders trailingVisual 4`] = `
   -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,
@@ -3818,12 +3868,19 @@ exports[`TextInput renders trailingVisual 4`] = `
   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;
@@ -3833,13 +3890,13 @@ exports[`TextInput renders trailingVisual 4`] = `
   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;
@@ -3849,7 +3906,7 @@ exports[`TextInput renders trailingVisual 4`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -3861,11 +3918,11 @@ exports[`TextInput renders trailingVisual 4`] = `
 
 <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]}
@@ -3903,11 +3960,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,
@@ -3945,12 +3997,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;
@@ -3960,19 +4020,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;
@@ -3982,7 +4042,7 @@ exports[`TextInput renders warning 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -3994,11 +4054,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]}
@@ -4010,7 +4070,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;
@@ -4018,7 +4078,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;
@@ -4043,10 +4103,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,
@@ -4084,12 +4140,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;
@@ -4099,13 +4162,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;
@@ -4115,7 +4178,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -4125,13 +4188,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]}
@@ -4141,11 +4212,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={
@@ -4176,7 +4247,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4184,13 +4255,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;
@@ -4215,10 +4286,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,
@@ -4256,12 +4323,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;
@@ -4271,13 +4345,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;
@@ -4287,7 +4361,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -4297,20 +4371,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={
@@ -4341,7 +4423,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c3"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4351,11 +4433,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={
@@ -4386,7 +4468,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4394,7 +4476,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;
@@ -4419,10 +4501,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,
@@ -4460,12 +4538,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;
@@ -4475,13 +4560,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;
@@ -4491,7 +4576,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -4501,13 +4586,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]}
@@ -4517,11 +4610,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={
@@ -4552,7 +4645,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4560,17 +4653,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;
@@ -4600,10 +4693,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,
@@ -4641,13 +4730,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
-  -webkit-align-self: center;
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
   color: #656d76;
@@ -4656,13 +4752,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;
@@ -4672,7 +4768,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -4682,20 +4778,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"
@@ -4721,7 +4825,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -4757,7 +4861,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4767,11 +4871,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={
@@ -4802,7 +4906,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4810,17 +4914,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;
@@ -4850,10 +4954,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,
@@ -4891,12 +4991,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;
@@ -4906,13 +5013,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;
@@ -4922,7 +5029,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -4932,20 +5039,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"
@@ -4971,7 +5086,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -5007,7 +5122,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5017,11 +5132,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={
@@ -5052,7 +5167,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5060,17 +5175,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;
@@ -5100,10 +5215,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,
@@ -5141,12 +5252,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;
@@ -5156,13 +5274,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;
@@ -5172,7 +5290,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -5182,20 +5300,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"
@@ -5221,7 +5347,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -5257,7 +5383,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5267,11 +5393,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={
@@ -5302,7 +5428,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5310,11 +5436,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;
@@ -5344,10 +5470,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,
@@ -5385,12 +5507,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;
@@ -5400,13 +5529,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;
@@ -5416,7 +5545,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -5426,13 +5555,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]}
@@ -5442,11 +5579,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"
@@ -5472,7 +5609,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c5"
           fill="none"
           height="32px"
           sx={
@@ -5508,7 +5645,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5516,17 +5653,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;
@@ -5556,10 +5693,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,
@@ -5597,12 +5730,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;
@@ -5612,13 +5752,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;
@@ -5628,7 +5768,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -5638,20 +5778,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={
@@ -5682,7 +5830,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c3"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5692,11 +5840,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"
@@ -5722,7 +5870,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c5"
+          className="c6"
           fill="none"
           height="32px"
           sx={
@@ -5758,7 +5906,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5766,11 +5914,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;
@@ -5800,10 +5948,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,
@@ -5841,12 +5985,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;
@@ -5856,13 +6007,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;
@@ -5872,7 +6023,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -5882,13 +6033,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]}
@@ -5898,11 +6057,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"
@@ -5928,7 +6087,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c5"
           fill="none"
           height="32px"
           sx={
@@ -5964,7 +6123,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5972,15 +6131,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;
@@ -5991,7 +6150,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;
@@ -6029,10 +6188,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,
@@ -6070,12 +6225,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;
@@ -6085,13 +6247,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;
@@ -6101,19 +6263,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"
   >
@@ -6121,11 +6291,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"
@@ -6151,7 +6321,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -6187,7 +6357,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6197,11 +6367,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"
@@ -6227,7 +6397,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c6"
+          className="c7"
           fill="none"
           height="32px"
           sx={
@@ -6263,7 +6433,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6271,15 +6441,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;
@@ -6290,7 +6460,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;
@@ -6320,10 +6490,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,
@@ -6361,12 +6527,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;
@@ -6376,13 +6549,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;
@@ -6392,7 +6565,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c5:focus {
   outline: 0;
 }
 
@@ -6402,20 +6575,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"
@@ -6441,7 +6622,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -6477,7 +6658,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6487,11 +6668,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"
@@ -6517,7 +6698,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c6"
+          className="c7"
           fill="none"
           height="32px"
           sx={
@@ -6553,7 +6734,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c1 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6561,15 +6742,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;
@@ -6580,7 +6761,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;
@@ -6616,10 +6797,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,
@@ -6657,12 +6834,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;
@@ -6672,13 +6856,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;
@@ -6688,10 +6872,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;
@@ -6700,7 +6892,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"
   >
@@ -6708,11 +6900,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"
@@ -6738,7 +6930,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c3"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -6774,7 +6966,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c5"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6784,11 +6976,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"
@@ -6814,7 +7006,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c6"
+          className="c7"
           fill="none"
           height="32px"
           sx={
@@ -6873,10 +7065,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,
@@ -6914,12 +7102,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;
@@ -6929,13 +7124,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;
@@ -6945,7 +7140,7 @@ exports[`TextInput should render a password input 1`] = `
   width: 100%;
 }
 
-.c1:focus {
+.c2:focus {
   outline: 0;
 }
 
@@ -6957,11 +7152,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 ba1610c7f2c..2fd625b933e 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;
@@ -1074,6 +1074,10 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = `
   display: flex;
 }
 
+.c4 {
+  margin-right: 4px;
+}
+
 .c6 > input {
   margin-left: 0;
   margin-right: 0;
@@ -1090,10 +1094,6 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = `
   flex-direction: column;
 }
 
-.c4 {
-  margin-right: 4px;
-}
-
 .c2 {
   font-size: 16px;
   padding: 0;
@@ -1748,17 +1748,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;
@@ -1772,6 +1761,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;
@@ -1944,6 +1944,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;
 }
@@ -1971,32 +1997,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;
@@ -2014,8 +2014,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 {
@@ -2250,6 +2250,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;
 }
@@ -2277,32 +2303,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;
@@ -2320,8 +2320,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}