diff --git a/.changeset/proud-rules-develop.md b/.changeset/proud-rules-develop.md
deleted file mode 100644
index c1dbcf30ee6..00000000000
--- a/.changeset/proud-rules-develop.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@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 2ac9a473de8..0e0839d02ed 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.26",
+        "@types/styled-components": "^5.1.11",
         "@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.3",
+        "babel-plugin-styled-components": "2.1.1",
         "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": "7.1.1",
+        "jest-styled-components": "6.3.4",
         "jest-watch-typeahead": "2.2.2",
         "jscodeshift": "0.14.0",
         "lint-staged": "13.2.2",
@@ -164,8 +164,7 @@
         "size-limit": "8.2.4",
         "storybook": "7.1.0",
         "storybook-addon-turbo-build": "2.0.1",
-        "storybook-css-modules": "1.0.8",
-        "styled-components": "5.3.11",
+        "styled-components": "4.4.1",
         "terser": "5.17.6",
         "ts-node": "10.9.1",
         "ts-toolbelt": "9.6.0",
@@ -3444,24 +3443,18 @@
       }
     },
     "node_modules/@emotion/is-prop-valid": {
-      "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==",
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
       "dev": true,
       "dependencies": {
-        "@emotion/memoize": "^0.8.1"
+        "@emotion/memoize": "0.7.4"
       }
     },
     "node_modules/@emotion/memoize": {
-      "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==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
       "dev": true
     },
     "node_modules/@emotion/unitless": {
@@ -12306,9 +12299,9 @@
       "dev": true
     },
     "node_modules/@types/styled-components": {
-      "version": "5.1.26",
-      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz",
-      "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==",
+      "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==",
       "dependencies": {
         "@types/hoist-non-react-statics": "*",
         "@types/react": "*",
@@ -13224,6 +13217,18 @@
       "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",
@@ -13802,16 +13807,16 @@
       }
     },
     "node_modules/babel-plugin-styled-components": {
-      "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==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-module-imports": "^7.21.4",
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
         "babel-plugin-syntax-jsx": "^6.18.0",
         "lodash": "^4.17.21",
-        "picomatch": "^2.3.1"
+        "picomatch": "^2.3.0"
       },
       "peerDependencies": {
         "styled-components": ">= 2"
@@ -14577,13 +14582,10 @@
       }
     },
     "node_modules/camelize": {
-      "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"
-      }
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
+      "dev": true
     },
     "node_modules/can-bind-to-host": {
       "version": "1.1.2",
@@ -15763,6 +15765,18 @@
         "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",
@@ -15791,7 +15805,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": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -15901,16 +15915,22 @@
       }
     },
     "node_modules/css-to-react-native": {
-      "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==",
+      "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==",
       "dev": true,
       "dependencies": {
         "camelize": "^1.0.0",
         "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^4.0.2"
+        "postcss-value-parser": "^3.3.0"
       }
     },
+    "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",
@@ -16255,6 +16275,15 @@
         "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",
@@ -25824,18 +25853,15 @@
       "dev": true
     },
     "node_modules/jest-styled-components": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-7.1.1.tgz",
-      "integrity": "sha512-OUq31R5CivBF8oy81dnegNQrRW13TugMol/Dz6ZnFfEyo03exLASod7YGwyHGuayYlKmCstPtz0RQ1+NrAbIIA==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-6.3.4.tgz",
+      "integrity": "sha512-dc32l0/6n3FtsILODpvKNz6SLg50OmbJ/3r3oRh9jc2VIPPGZT5jWv7BKIcNCYH7E38ZK7uejNl3zJsCOIenng==",
       "dev": true,
       "dependencies": {
-        "@adobe/css-tools": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 12"
+        "css": "^2.2.4"
       },
       "peerDependencies": {
-        "styled-components": ">= 5"
+        "styled-components": "^2 || ^3 || ^4"
       }
     },
     "node_modules/jest-util": {
@@ -28161,6 +28187,12 @@
         "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",
@@ -28195,6 +28227,15 @@
         "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",
@@ -32924,6 +32965,13 @@
         "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",
@@ -33614,12 +33662,6 @@
         "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",
@@ -33836,6 +33878,20 @@
         "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",
@@ -33846,6 +33902,13 @@
         "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",
@@ -34068,15 +34131,6 @@
         "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",
@@ -34303,35 +34357,37 @@
       }
     },
     "node_modules/styled-components": {
-      "version": "5.3.11",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
-      "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz",
+      "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==",
       "dev": true,
+      "hasInstallScript": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.0.0",
-        "@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",
+        "@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",
         "supports-color": "^5.5.0"
       },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/styled-components"
-      },
       "peerDependencies": {
-        "react": ">= 16.8.0",
-        "react-dom": ">= 16.8.0",
-        "react-is": ">= 16.8.0"
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
       }
     },
+    "node_modules/styled-components/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
     "node_modules/styled-system": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz",
@@ -34368,6 +34424,21 @@
         "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",
@@ -35908,6 +35979,13 @@
         "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 64546632a5c..fdb174d9793 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.26",
+    "@types/styled-components": "^5.1.11",
     "@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.3",
+    "babel-plugin-styled-components": "2.1.1",
     "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": "7.1.1",
+    "jest-styled-components": "6.3.4",
     "jest-watch-typeahead": "2.2.2",
     "jscodeshift": "0.14.0",
     "lint-staged": "13.2.2",
@@ -249,8 +249,7 @@
     "size-limit": "8.2.4",
     "storybook": "7.1.0",
     "storybook-addon-turbo-build": "2.0.1",
-    "storybook-css-modules": "1.0.8",
-    "styled-components": "5.3.11",
+    "styled-components": "4.4.1",
     "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 7871e2c24a5..7de16f4405a 100644
--- a/src/CounterLabel/CounterLabel.tsx
+++ b/src/CounterLabel/CounterLabel.tsx
@@ -34,6 +34,7 @@ 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 0a4d94b1939..51c4560234b 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -88,11 +88,12 @@ exports[`NavList renders a simple list 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c2 {
   --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;
 }
@@ -168,11 +169,12 @@ exports[`NavList renders a simple list 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c6 {
   --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;
 }
@@ -360,6 +362,29 @@ 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);
@@ -394,29 +419,6 @@ 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;
@@ -481,11 +483,12 @@ exports[`NavList renders with groups 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c5 {
+[data-component="ActionList.Divider"] + .c6 {
   --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;
 }
@@ -561,11 +564,12 @@ exports[`NavList renders with groups 1`] = `
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c5 {
+[data-component="ActionList.Divider"] + .c10 {
   --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;
 }
@@ -781,11 +785,7 @@ 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`] = `
-.c2 {
-  list-style: none;
-}
-
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -801,25 +801,35 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  font-weight: 400;
 }
 
-.c7 {
+.c1 {
+  list-style: none;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  font-weight: 400;
 }
 
-.c8 {
+.c9 {
+  padding: 0;
+  margin: 0;
+  display: block;
+}
+
+.c7 {
   height: 20px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -829,17 +839,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: initial;
 }
 
-[data-variant="danger"]:hover .c1,[data-variant="danger"]:active .c8 {
+[data-variant="danger"]:hover .c7,
+[data-variant="danger"]:active .c7 {
   color: #1F2328;
 }
 
-.c10 {
-  padding: 0;
-  margin: 0;
-  display: block;
-}
-
-.c9 {
+.c8 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
@@ -852,16 +857,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   padding-bottom: 8px;
 }
 
-[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 {
+.c10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -895,15 +891,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   background-color: rgba(208,215,222,0.24);
 }
 
-.c11[aria-disabled] {
+.c10[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c11 [data-component="ActionList.Item--DividerContainer"] {
+.c10 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c11 [data-component="ActionList.Item--DividerContainer"]::before {
+.c10 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -914,25 +910,26 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-color: var(--divider-color,transparent);
 }
 
-.c11:not(:first-of-type) {
+.c10:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c10 {
   --divider-color: transparent !important;
 }
 
-.c11:hover:not([aria-disabled]),.c11:focus:not([aria-disabled]),
-.c11[data-focus-visible-added]:not([aria-disabled]) {
+.c10:hover:not([aria-disabled]),
+.c10:focus:not([aria-disabled]),
+.c10[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c11:hover:not([aria-disabled]) + .c3,
-.c11[data-focus-visible-added] + li {
+.c10:hover:not([aria-disabled]) + .c2,
+.c10[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c11::after {
+.c10::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -943,7 +940,42 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
 }
 
-.c4 {
+.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 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -975,15 +1007,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 600;
 }
 
-.c4[aria-disabled] {
+.c3[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c4 [data-component="ActionList.Item--DividerContainer"] {
+.c3 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c4 [data-component="ActionList.Item--DividerContainer"]::before {
+.c3 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -994,7 +1026,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-color: var(--divider-color,transparent);
 }
 
-.c4:not(:first-of-type) {
+.c3:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
@@ -1002,17 +1034,23 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   --divider-color: transparent !important;
 }
 
-.c4:hover:not([aria-disabled]),.c4:focus:not([aria-disabled]),
-.c4[data-focus-visible-added]:not([aria-disabled]) {
+.c3:hover:not([aria-disabled]),
+.c3:focus:not([aria-disabled]),
+.c3[data-focus-visible-added]:not([aria-disabled]) {
+  --divider-color: transparent;
+}
+
+.c3:hover:not([aria-disabled]) + .c2,
+.c3[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c4:hover:not([aria-disabled]) + .c3,
-.c4[data-focus-visible-added] + li {
+.c19:hover:not([aria-disabled]) + .c2,
+.c19[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c12 {
+.c11 {
   color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1034,12 +1072,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 400;
 }
 
-.c12:hover {
+.c11:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c12:is(button) {
+.c11:is(button) {
   display: inline-block;
   padding: 0;
   font-size: inherit;
@@ -1056,66 +1094,58 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   appearance: none;
 }
 
-.c12:hover {
+.c11:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover:hover) and (pointer:fine) {
-
-}
-
-@media (forced-colors:active) {
-
-}
-
-@media (hover:hover) and (pointer:fine) {
-  .c11:hover:not([aria-disabled]) {
+  .c10:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c11:focus-visible,
-  .c11 > a:focus-visible {
+  .c10:focus-visible,
+  .c10 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c11:active:not([aria-disabled]) {
+  .c10:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c11:focus {
+  .c10:focus {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4:hover:not([aria-disabled]) {
+  .c3:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c4:focus-visible,
-  .c4 > a:focus-visible {
+  .c3:focus-visible,
+  .c3 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c4:active:not([aria-disabled]) {
+  .c3:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c4:focus {
+  .c3:focus {
     outline: solid 1px transparent !important;
   }
 }
@@ -1129,34 +1159,34 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
     >
       <li
         aria-labelledby="react-aria-1"
-        class="c1 c2"
+        class="c1"
       >
         <button
           aria-controls="react-aria-2"
           aria-expanded="true"
           aria-labelledby="react-aria-1 "
-          class="c3 c4"
+          class="c2 c3"
           tabindex="0"
         >
           <div
-            class="c1 c5"
+            class="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <div
-              class="c1 c6"
+              class="c5"
             >
               <span
-                class="c1 c7"
+                class="c6"
                 id="react-aria-1"
               >
                 Item
               </span>
               <span
-                class="c1 c8"
+                class="c7"
               >
                 <svg
                   aria-hidden="true"
-                  class="c9"
+                  class="c8"
                   fill="currentColor"
                   focusable="false"
                   height="16"
@@ -1176,25 +1206,25 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
         <div>
           <ul
             aria-labelledby="react-aria-1"
-            class="c1 c10"
+            class="c9"
             id="react-aria-2"
           >
             <li
-              class="c3 c11"
+              class="c2 c10"
             >
               <a
                 aria-current="page"
                 aria-labelledby="react-aria-3 "
-                class="c12"
+                class="c11"
                 href="#"
                 tabindex="0"
               >
                 <div
-                  class="c1 c5"
+                  class="c4"
                   data-component="ActionList.Item--DividerContainer"
                 >
                   <span
-                    class="c1 c7"
+                    class="c6"
                     id="react-aria-3"
                   >
                     Sub Item
@@ -1211,11 +1241,7 @@ 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`] = `
-.c2 {
-  list-style: none;
-}
-
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1231,25 +1257,35 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  font-weight: 400;
 }
 
-.c7 {
+.c1 {
+  list-style: none;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  font-weight: 400;
 }
 
-.c8 {
+.c9 {
+  padding: 0;
+  margin: 0;
+  display: none;
+}
+
+.c7 {
   height: 20px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1259,17 +1295,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: initial;
 }
 
-[data-variant="danger"]:hover .c1,[data-variant="danger"]:active .c8 {
+[data-variant="danger"]:hover .c7,
+[data-variant="danger"]:active .c7 {
   color: #1F2328;
 }
 
-.c10 {
-  padding: 0;
-  margin: 0;
-  display: none;
-}
-
-.c9 {
+.c8 {
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
@@ -1282,16 +1313,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   padding-bottom: 8px;
 }
 
-[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 {
+.c10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1325,15 +1347,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   background-color: rgba(208,215,222,0.24);
 }
 
-.c11[aria-disabled] {
+.c10[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c11 [data-component="ActionList.Item--DividerContainer"] {
+.c10 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c11 [data-component="ActionList.Item--DividerContainer"]::before {
+.c10 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1344,25 +1366,26 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-color: var(--divider-color,transparent);
 }
 
-.c11:not(:first-of-type) {
+.c10:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c10 {
   --divider-color: transparent !important;
 }
 
-.c11:hover:not([aria-disabled]),.c11:focus:not([aria-disabled]),
-.c11[data-focus-visible-added]:not([aria-disabled]) {
+.c10:hover:not([aria-disabled]),
+.c10:focus:not([aria-disabled]),
+.c10[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c11:hover:not([aria-disabled]) + .c3,
-.c11[data-focus-visible-added] + li {
+.c10:hover:not([aria-disabled]) + .c2,
+.c10[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c11::after {
+.c10::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1373,16 +1396,47 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-[data-component="ActionList.Divider"] + .c3 {
-  --divider-color: transparent !important;
+.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]) + .c3,
+.c14:hover:not([aria-disabled]) + .c2,
 .c14[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c4 {
+.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 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1415,15 +1469,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   background-color: rgba(208,215,222,0.24);
 }
 
-.c4[aria-disabled] {
+.c3[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c4 [data-component="ActionList.Item--DividerContainer"] {
+.c3 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c4 [data-component="ActionList.Item--DividerContainer"]::before {
+.c3 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1434,7 +1488,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-color: var(--divider-color,transparent);
 }
 
-.c4:not(:first-of-type) {
+.c3:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
@@ -1442,17 +1496,18 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   --divider-color: transparent !important;
 }
 
-.c4:hover:not([aria-disabled]),.c4:focus:not([aria-disabled]),
-.c4[data-focus-visible-added]:not([aria-disabled]) {
+.c3:hover:not([aria-disabled]),
+.c3:focus:not([aria-disabled]),
+.c3[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c4:hover:not([aria-disabled]) + .c3,
-.c4[data-focus-visible-added] + li {
+.c3:hover:not([aria-disabled]) + .c2,
+.c3[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c4::after {
+.c3::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1463,7 +1518,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-.c12 {
+.c11 {
   color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1485,12 +1540,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: 400;
 }
 
-.c12:hover {
+.c11:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c12:is(button) {
+.c11:is(button) {
   display: inline-block;
   padding: 0;
   font-size: inherit;
@@ -1507,74 +1562,58 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   appearance: none;
 }
 
-.c12:hover {
+.c11:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover:hover) and (pointer:fine) {
-
-}
-
-@media (forced-colors:active) {
-
-}
-
-@media (hover:hover) and (pointer:fine) {
-  .c11:hover:not([aria-disabled]) {
+  .c10:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c11:focus-visible,
-  .c11 > a:focus-visible {
+  .c10:focus-visible,
+  .c10 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c11:active:not([aria-disabled]) {
+  .c10:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c11:focus {
+  .c10:focus {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-
-}
-
-@media (forced-colors:active) {
-
-}
-
-@media (hover:hover) and (pointer:fine) {
-  .c4:hover:not([aria-disabled]) {
+  .c3:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c4:focus-visible,
-  .c4 > a:focus-visible {
+  .c3:focus-visible,
+  .c3 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c4:active:not([aria-disabled]) {
+  .c3:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c4:focus {
+  .c3:focus {
     outline: solid 1px transparent !important;
   }
 }
@@ -1588,34 +1627,34 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
     >
       <li
         aria-labelledby="react-aria-1"
-        class="c1 c2"
+        class="c1"
       >
         <button
           aria-controls="react-aria-2"
           aria-expanded="false"
           aria-labelledby="react-aria-1 "
-          class="c3 c4"
+          class="c2 c3"
           tabindex="0"
         >
           <div
-            class="c1 c5"
+            class="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <div
-              class="c1 c6"
+              class="c5"
             >
               <span
-                class="c1 c7"
+                class="c6"
                 id="react-aria-1"
               >
                 Item
               </span>
               <span
-                class="c1 c8"
+                class="c7"
               >
                 <svg
                   aria-hidden="true"
-                  class="c9"
+                  class="c8"
                   fill="currentColor"
                   focusable="false"
                   height="16"
@@ -1635,25 +1674,25 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
         <div>
           <ul
             aria-labelledby="react-aria-1"
-            class="c1 c10"
+            class="c9"
             id="react-aria-2"
           >
             <li
-              class="c3 c11"
+              class="c2 c10"
             >
               <a
                 aria-current="page"
                 aria-labelledby="react-aria-3 "
-                class="c12"
+                class="c11"
                 href="#"
                 tabindex="0"
               >
                 <div
-                  class="c1 c5"
+                  class="c4"
                   data-component="ActionList.Item--DividerContainer"
                 >
                   <span
-                    class="c1 c7"
+                    class="c6"
                     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 5b1860fd7c9..c8a88864402 100644
--- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
+++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -1,10 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageLayout renders condensed layout 1`] = `
-.c0 {
-  padding: 16px;
-}
-
 .c1 {
   max-width: 1280px;
   margin-left: auto;
@@ -18,36 +14,10 @@ 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;
@@ -91,13 +61,6 @@ 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;
@@ -106,6 +69,43 @@ 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,26 +121,6 @@ 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;
@@ -152,10 +132,6 @@ exports[`PageLayout renders condensed layout 1`] = `
   }
 }
 
-@media screen and (min-width:544px) {
-
-}
-
 @media screen and (min-width:768px) {
   .c10 {
     width: 256px;
@@ -175,6 +151,26 @@ 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;
@@ -375,38 +371,18 @@ 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;
@@ -446,24 +422,12 @@ 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;
@@ -483,24 +447,12 @@ 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;
@@ -669,33 +621,6 @@ 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;
@@ -712,12 +637,31 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   margin-top: 16px;
 }
 
-@media screen and (min-width:544px) {
-
+.c9 {
+  margin-left: -16px;
+  margin-right: -16px;
+  display: none;
+  margin-bottom: 16px;
 }
 
-@media screen and (min-width:768px) {
+.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:1012px) {
@@ -726,24 +670,12 @@ 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;
@@ -773,18 +705,28 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 @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;
+  .c11 {
+    width: 256px;
+    overflow: auto;
   }
 }
 
-@media screen and (min-width:544px) {
+@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:1012px) {
+  .c12 {
+    margin-top: 24px;
+  }
 }
 
 @media screen and (min-width:768px) {
@@ -802,12 +744,15 @@ 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) {
@@ -816,43 +761,6 @@ 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"
@@ -973,31 +881,6 @@ 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;
@@ -1031,6 +914,31 @@ 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;
@@ -1046,38 +954,18 @@ 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;
@@ -1117,24 +1005,12 @@ 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;
@@ -1154,24 +1030,12 @@ 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 83a5483cf47..1c2aff6eeb8 100644
--- a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
+++ b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
@@ -29,6 +29,10 @@ 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 {
@@ -48,33 +52,26 @@ exports[`SelectPanel renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c2:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c2:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c2:disabled {
+.c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c3 {
+.c2 {
   margin-left: 4px;
 }
 
@@ -89,7 +86,7 @@ exports[`SelectPanel renders consistently 1`] = `
 >
   <button
     aria-haspopup="true"
-    className="c1 c2"
+    className="c1"
     id="react-aria-3"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -99,7 +96,7 @@ exports[`SelectPanel renders consistently 1`] = `
     Select Items
     <svg
       aria-hidden="true"
-      className="c3"
+      className="c2"
       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 9d1c0bbd6f3..0a0d264d3f2 100644
--- a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
+++ b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
@@ -135,14 +135,6 @@ 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;
@@ -169,14 +161,6 @@ 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;
@@ -205,10 +189,6 @@ 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 d51aceccb21..1bbecc97bcb 100644
--- a/src/Token/TokenBase.tsx
+++ b/src/Token/TokenBase.tsx
@@ -137,7 +137,6 @@ 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 703aa370250..b884b69f385 100644
--- a/src/__tests__/Box.test.tsx
+++ b/src/__tests__/Box.test.tsx
@@ -22,11 +22,13 @@ 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 b9cb1698176..ba6d34d8eb9 100644
--- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -64,7 +64,8 @@ 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;
 }
 
@@ -89,7 +90,8 @@ 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;
@@ -102,7 +104,8 @@ 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 666b9ce9c90..35244bf136d 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -231,7 +231,9 @@ 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 7f82e04bf1f..c01e1a5cfaf 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -29,6 +29,10 @@ 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 {
@@ -48,27 +52,20 @@ exports[`AnchoredOverlay renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c2:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c2:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c2:disabled {
+.c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
@@ -85,7 +82,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 >
   <button
     aria-haspopup="true"
-    className="c1 c2"
+    className="c1"
     id="react-aria-1"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -125,6 +122,10 @@ 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 {
@@ -144,33 +145,26 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c2:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c2:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c2:disabled {
+.c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c3 {
+.c2 {
   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;
@@ -185,12 +179,12 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   visibility: var(--styled-overlay-visibility);
 }
 
-.c3:focus {
+.c2:focus {
   outline: none;
 }
 
 @media (forced-colors:active) {
-  .c3 {
+  .c2 {
     outline: solid 1px transparent;
   }
 }
@@ -208,7 +202,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
     <button
       aria-expanded="true"
       aria-haspopup="true"
-      class="c1 c2"
+      class="c1"
       id="react-aria-1"
       tabindex="0"
     >
@@ -222,7 +216,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
         style="position: relative; z-index: 1;"
       >
         <div
-          class="c3"
+          class="c2"
           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 615c3980336..263505f77a8 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -21,6 +21,10 @@ 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,
@@ -58,19 +62,12 @@ exports[`snapshots renders a custom empty state message 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -80,13 +77,13 @@ exports[`snapshots renders a custom empty state message 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -96,7 +93,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -108,7 +105,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
 
 <span
     aria-busy={false}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -118,7 +115,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c2"
+      className="c1"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -148,10 +145,6 @@ exports[`snapshots renders a custom empty state message 1`] = `
   border-width: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0"
   >
@@ -187,6 +180,10 @@ 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,
@@ -224,19 +221,12 @@ exports[`snapshots renders a loading state 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -246,13 +236,13 @@ exports[`snapshots renders a loading state 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -262,7 +252,7 @@ exports[`snapshots renders a loading state 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -274,7 +264,7 @@ exports[`snapshots renders a loading state 1`] = `
 
 <span
     aria-busy={false}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -284,7 +274,7 @@ exports[`snapshots renders a loading state 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c2"
+      className="c1"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -327,10 +317,6 @@ exports[`snapshots renders a loading state 1`] = `
   animation: rotate-keyframes 1s linear infinite;
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0"
   >
@@ -388,6 +374,10 @@ 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,
@@ -425,19 +415,12 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -447,13 +430,13 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -463,7 +446,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -473,13 +456,9 @@ 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 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -489,7 +468,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="c2"
+      className="c1"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -568,11 +547,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(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) {
+.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) {
   margin-top: 0;
 }
 
-.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) .c7::before {
+.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) .c7::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -632,12 +611,25 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   flex-shrink: 0;
 }
 
-.c10 svg {
-  fill: #656d76;
-  font-size: 12px;
-}
-
-.c11 {
+.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;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -651,6 +643,11 @@ 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;
@@ -673,10 +670,6 @@ 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) );
@@ -1265,7 +1258,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             tabIndex={-1}
           >
             <div
-              className="c5 c10 c11"
+              className="c10"
             >
               <svg
                 aria-hidden="true"
@@ -1338,6 +1331,10 @@ 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,
@@ -1375,19 +1372,12 @@ exports[`snapshots renders a multiselect input 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1397,13 +1387,13 @@ exports[`snapshots renders a multiselect input 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1413,7 +1403,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -1423,13 +1413,9 @@ exports[`snapshots renders a multiselect input 1`] = `
   }
 }
 
-@media (hover:hover) and (pointer:fine) {
-
-}
-
 <span
     aria-busy={false}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -1439,7 +1425,7 @@ exports[`snapshots renders a multiselect input 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c2"
+      className="c1"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -1518,11 +1504,11 @@ exports[`snapshots renders a multiselect input 1`] = `
   margin-right: 8px;
 }
 
-.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) {
+.c4:not(:first-of-type):not(.c11 + .c3):not(.c10 + .c3) {
   margin-top: 0;
 }
 
-.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) .c7::before {
+.c4:not(:first-of-type):not(.c11 + .c3):not(.c10 + .c3) .c7::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -1604,10 +1590,6 @@ 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) );
@@ -2216,6 +2198,10 @@ 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,
@@ -2253,19 +2239,12 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -2275,13 +2254,13 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2291,7 +2270,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -2301,13 +2280,9 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   }
 }
 
-@media (hover:hover) and (pointer:fine) {
-
-}
-
 <span
     aria-busy={false}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -2317,7 +2292,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c2"
+      className="c1"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -2396,11 +2371,11 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   margin-right: 8px;
 }
 
-.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) {
+.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) {
   margin-top: 0;
 }
 
-.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) .c7::before {
+.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) .c7::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -2460,26 +2435,26 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   flex-shrink: 0;
 }
 
-.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;
 }
 
-.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;
 }
 
 .c1 {
@@ -2493,10 +2468,6 @@ 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) );
@@ -3105,6 +3076,10 @@ 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,
@@ -3142,19 +3117,12 @@ exports[`snapshots renders a single select input 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3164,13 +3132,13 @@ exports[`snapshots renders a single select input 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3180,7 +3148,7 @@ exports[`snapshots renders a single select input 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -3190,13 +3158,9 @@ exports[`snapshots renders a single select input 1`] = `
   }
 }
 
-@media (hover:hover) and (pointer:fine) {
-
-}
-
 <span
     aria-busy={false}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -3206,7 +3170,7 @@ exports[`snapshots renders a single select input 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c2"
+      className="c1"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -3285,11 +3249,11 @@ exports[`snapshots renders a single select input 1`] = `
   margin-right: 8px;
 }
 
-.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) {
+.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) {
   margin-top: 0;
 }
 
-.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) .c5::before {
+.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) .c5::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -3339,10 +3303,6 @@ 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) );
@@ -3662,11 +3622,7 @@ exports[`snapshots renders a single select input 1`] = `
 
 exports[`snapshots renders with a custom text input component 1`] = `
 [
-  @media (hover:hover) and (pointer:fine) {
-
-}
-
-<input
+  <input
     id="customInput"
     type="text"
   />,
@@ -3736,11 +3692,11 @@ exports[`snapshots renders with a custom text input component 1`] = `
   margin-right: 8px;
 }
 
-.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) {
+.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) {
   margin-top: 0;
 }
 
-.c4:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c3):not(.Header__StyledHeader-sc-cjezay-0 + .c3) .c5::before {
+.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) .c5::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -4128,6 +4084,10 @@ 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,
@@ -4165,19 +4125,12 @@ exports[`snapshots renders with an input value 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4187,13 +4140,13 @@ exports[`snapshots renders with an input value 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4203,7 +4156,7 @@ exports[`snapshots renders with an input value 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -4213,13 +4166,9 @@ exports[`snapshots renders with an input value 1`] = `
   }
 }
 
-@media (hover:hover) and (pointer:fine) {
-
-}
-
 <span
     aria-busy={false}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
@@ -4229,7 +4178,7 @@ exports[`snapshots renders with an input value 1`] = `
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
       autoComplete="off"
-      className="c2"
+      className="c1"
       data-component="input"
       id="autocompleteId"
       onBlur={[Function]}
@@ -4259,14 +4208,6 @@ 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 716e95265d3..24a4cb58a42 100644
--- a/src/__tests__/__snapshots__/Box.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Box.test.tsx.snap
@@ -44,6 +44,34 @@ 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;
@@ -82,6 +110,34 @@ 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 74787c01967..2e90a5777df 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -217,7 +217,9 @@ 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;
 }
 
@@ -456,7 +458,9 @@ 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;
 }
 
@@ -701,7 +705,9 @@ 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;
 }
 
@@ -945,7 +951,9 @@ 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;
 }
 
@@ -1190,7 +1198,9 @@ 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;
 }
 
@@ -1573,7 +1583,8 @@ 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 faadaa00060..b3bc7d8935e 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 d79269a8efe..1d33d06ccb4 100644
--- a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
@@ -29,6 +29,10 @@ 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 {
@@ -48,27 +52,20 @@ exports[`ConfirmationDialog renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c2:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c2:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c2:disabled {
+.c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
@@ -84,7 +81,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
   fontFamily="normal"
 >
   <button
-    className="c1 c2"
+    className="c1"
     onClick={[Function]}
   >
     Show dialog
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
index 1251815cce8..62d088691e3 100644
--- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -1,19 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dialog Dialog.Header renders consistently 1`] = `
-.c0 {
-  padding: 16px;
-  background-color: #f6f8fa;
-}
-
-.c2 {
+.c1 {
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
   color: #1F2328;
 }
 
-.c1 {
+.c0 {
+  padding: 16px;
+  background-color: #f6f8fa;
   border-radius: 6px 6px 0px 0px;
   border-bottom: 1px solid #d0d7de;
   display: -webkit-box;
@@ -23,16 +20,16 @@ exports[`Dialog Dialog.Header renders consistently 1`] = `
 }
 
 @media screen and (max-width:750px) {
-  .c1 {
+  .c0 {
     border-radius: 0px;
   }
 }
 
 <div
-  className="c0 c1"
+  className="c0"
 >
   <span
-    className="c2"
+    className="c1"
     color="fg.default"
     fontFamily="sans-serif"
     fontSize={1}
@@ -57,23 +54,10 @@ 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"
   />,
-  .c2 {
-  padding: 16px;
-  background-color: #f6f8fa;
-}
-
-.c5 {
+  .c4 {
   padding: 16px;
 }
 
@@ -97,14 +81,14 @@ exports[`Dialog renders consistently 1`] = `
   color: #0969da;
 }
 
-.c4 {
+.c3 {
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
   color: #1F2328;
 }
 
-.c6 {
+.c5 {
   font-family: sans-serif;
 }
 
@@ -125,7 +109,9 @@ exports[`Dialog renders consistently 1`] = `
   outline: none;
 }
 
-.c3 {
+.c2 {
+  padding: 16px;
+  background-color: #f6f8fa;
   border-radius: 6px 6px 0px 0px;
   border-bottom: 1px solid #d0d7de;
   display: -webkit-box;
@@ -144,7 +130,7 @@ exports[`Dialog renders consistently 1`] = `
 }
 
 @media screen and (max-width:750px) {
-  .c3 {
+  .c2 {
     border-radius: 0px;
   }
 }
@@ -186,11 +172,11 @@ exports[`Dialog renders consistently 1`] = `
       </svg>
     </button>
     <div
-      className="c2 c3"
+      className="c2"
       id="header"
     >
       <span
-        className="c4"
+        className="c3"
         color="fg.default"
         fontFamily="sans-serif"
         fontSize={1}
@@ -200,10 +186,10 @@ exports[`Dialog renders consistently 1`] = `
       </span>
     </div>
     <div
-      className="c5"
+      className="c4"
     >
       <span
-        className="c6"
+        className="c5"
         fontFamily="sans-serif"
       >
         Some content
diff --git a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
index 56843570766..5fc9fbc3644 100644
--- a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -1,6 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown renders consistently 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 > summary {
   list-style: none;
 }
@@ -9,13 +14,8 @@ exports[`Dropdown renders consistently 1`] = `
   display: none;
 }
 
-.c1 {
-  position: relative;
-  display: inline-block;
-}
-
 <details
-  className="c0 c1"
+  className="c0"
   onToggle={[Function]}
 >
   Hello!
@@ -45,6 +45,10 @@ 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 {
@@ -64,33 +68,26 @@ exports[`Dropdown.Button renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c0:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c0:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c2 {
+.c1 {
   border: 4px solid transparent;
   margin-left: 12px;
   border-top-color: currentcolor;
@@ -104,11 +101,11 @@ exports[`Dropdown.Button renders consistently 1`] = `
 
 <summary
   aria-haspopup="true"
-  className="c0 c1"
+  className="c0"
 >
   Hello!
   <div
-    className="c2"
+    className="c1"
   />
 </summary>
 `;
diff --git a/src/__tests__/__snapshots__/Popover.test.tsx.snap b/src/__tests__/__snapshots__/Popover.test.tsx.snap
index c524d5caae9..07ec53303e0 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;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -18,22 +18,22 @@ exports[`Popover Popover.Content renders consistently 1`] = `
   background-color: #ffffff;
 }
 
-.c3::before,
-.c3::after {
+.c2::before,
+.c2::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c3::before {
+.c2::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c3::after {
+.c2::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 .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 {
+.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 .c3::before,
-.c0.caret-pos--bottom-left .c3::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 .c3::after,
-.c0.caret-pos--bottom-left .c3::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 .c3 {
+.c0.caret-pos--bottom-right .c2 {
   right: -9px;
   margin-right: 0;
 }
 
 .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 {
+.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 .c3::before {
+.c0.caret-pos--bottom-right .c2::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
+.c0.caret-pos--bottom-right .c2::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
+.c0.caret-pos--bottom-left .c2 {
   left: -9px;
   margin-left: 0;
 }
 
 .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 {
+.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 .c3::after {
+.c0.caret-pos--bottom-left .c2::after {
   left: calc(24px + 1px);
 }
 
 .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,
-.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 {
+.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;
@@ -126,72 +126,72 @@ exports[`Popover Popover.Content renders consistently 1`] = `
 }
 
 .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,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .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 {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::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 .c3::after,
-.c0.caret-pos--right-bottom .c3::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 .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .c3::after,
-.c0.caret-pos--left-bottom .c3::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 .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
+.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 .c3::before {
+.c0.caret-pos--left-bottom .c2::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
+.c0.caret-pos--left-bottom .c2::after {
   bottom: calc(16px + 1px);
 }
 
@@ -200,7 +200,7 @@ exports[`Popover Popover.Content renders consistently 1`] = `
   open={true}
 >
   <div
-    className="c2 c3"
+    className="c2"
   >
     Hello!
   </div>
@@ -214,7 +214,7 @@ exports[`Popover renders consistently 1`] = `
   display: block;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -225,22 +225,22 @@ exports[`Popover renders consistently 1`] = `
   background-color: #ffffff;
 }
 
-.c3::before,
-.c3::after {
+.c2::before,
+.c2::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c3::before {
+.c2::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c3::after {
+.c2::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 .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 {
+.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 .c3::before,
-.c0.caret-pos--bottom-left .c3::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 .c3::after,
-.c0.caret-pos--bottom-left .c3::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 .c3 {
+.c0.caret-pos--bottom-right .c2 {
   right: -9px;
   margin-right: 0;
 }
 
 .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 {
+.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 .c3::before {
+.c0.caret-pos--bottom-right .c2::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
+.c0.caret-pos--bottom-right .c2::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
+.c0.caret-pos--bottom-left .c2 {
   left: -9px;
   margin-left: 0;
 }
 
 .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 {
+.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 .c3::after {
+.c0.caret-pos--bottom-left .c2::after {
   left: calc(24px + 1px);
 }
 
 .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,
-.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 {
+.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;
@@ -333,72 +333,72 @@ exports[`Popover renders consistently 1`] = `
 }
 
 .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,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .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 {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::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 .c3::after,
-.c0.caret-pos--right-bottom .c3::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 .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .c3::after,
-.c0.caret-pos--left-bottom .c3::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 .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
+.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 .c3::before {
+.c0.caret-pos--left-bottom .c2::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
+.c0.caret-pos--left-bottom .c2::after {
   bottom: calc(16px + 1px);
 }
 
@@ -407,7 +407,7 @@ exports[`Popover renders consistently 1`] = `
   open={true}
 >
   <div
-    className="c2 c3"
+    className="c2"
   >
     Hello!
   </div>
@@ -421,7 +421,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
   display: block;
 }
 
-.c3 {
+.c2 {
   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;
 }
 
-.c3::before,
-.c3::after {
+.c2::before,
+.c2::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c3::before {
+.c2::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c3::after {
+.c2::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 .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 {
+.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 .c3::before,
-.c0.caret-pos--bottom-left .c3::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 .c3::after,
-.c0.caret-pos--bottom-left .c3::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 .c3 {
+.c0.caret-pos--bottom-right .c2 {
   right: -9px;
   margin-right: 0;
 }
 
 .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 {
+.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 .c3::before {
+.c0.caret-pos--bottom-right .c2::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
+.c0.caret-pos--bottom-right .c2::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
+.c0.caret-pos--bottom-left .c2 {
   left: -9px;
   margin-left: 0;
 }
 
 .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 {
+.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 .c3::after {
+.c0.caret-pos--bottom-left .c2::after {
   left: calc(24px + 1px);
 }
 
 .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,
-.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 {
+.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;
@@ -540,158 +540,104 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
 }
 
 .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,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .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 {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::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 .c3::after,
-.c0.caret-pos--right-bottom .c3::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 .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .c3::after,
-.c0.caret-pos--left-bottom .c3::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 .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
+.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 .c3::before {
+.c0.caret-pos--left-bottom .c2::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
+.c0.caret-pos--left-bottom .c2::after {
   bottom: calc(16px + 1px);
 }
 
-<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,
+.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;
 }
 
-.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::before,
+.c0.caret-pos--bottom-right .c3::before,
+.c0.caret-pos--bottom-left .c3::before {
+  bottom: -16px;
 }
 
-.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 .c2,
+.c0.caret-pos--top-right .c3,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.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 {
@@ -699,23 +645,23 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--top-right .c3::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c2,
+.c0.caret-pos--top-left .c3,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::before,
+.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 {
@@ -723,12 +669,12 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -746,7 +692,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -755,7 +701,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c2::after,
+.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,
@@ -764,78 +710,74 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right .c3::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 .c3::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 .c3::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 .c3::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--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 .c2::before,
+.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 .c2::before,
+.c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c2::after,
+.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-left"
+  className="c0 c1 caret-pos--bottom"
   open={true}
 >
   <div
-    className="c2 c3"
+    className="c2"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
+exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -846,22 +788,22 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
   background-color: #ffffff;
 }
 
-.c3::before,
-.c3::after {
+.c2::before,
+.c2::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c3::before {
+.c2::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c3::after {
+.c2::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -869,84 +811,84 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
 }
 
 .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 {
+.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 .c3::before,
-.c0.caret-pos--bottom-left .c3::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 .c3::after,
-.c0.caret-pos--bottom-left .c3::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 .c3 {
+.c0.caret-pos--bottom-right .c2 {
   right: -9px;
   margin-right: 0;
 }
 
 .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 {
+.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 .c3::before {
+.c0.caret-pos--bottom-right .c2::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
+.c0.caret-pos--bottom-right .c2::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
+.c0.caret-pos--bottom-left .c2 {
   left: -9px;
   margin-left: 0;
 }
 
 .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 {
+.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 .c3::after {
+.c0.caret-pos--bottom-left .c2::after {
   left: calc(24px + 1px);
 }
 
 .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,
-.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 {
+.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;
@@ -954,128 +896,76 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
 }
 
 .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,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .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 {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::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 .c3::after,
-.c0.caret-pos--right-bottom .c3::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 .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .c3::after,
-.c0.caret-pos--left-bottom .c3::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 .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
+.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 .c3::before {
+.c0.caret-pos--left-bottom .c2::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
+.c0.caret-pos--left-bottom .c2::after {
   bottom: calc(16px + 1px);
 }
 
-<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 .c3::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--bottom .c3::after,
@@ -1085,27 +975,25 @@ exports[`Popover renders correctly for a caret position of left 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom .c3::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 .c3::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--top-right .c3,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.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 {
@@ -1113,23 +1001,23 @@ exports[`Popover renders correctly for a caret position of left 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--top-right .c3::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c2,
+.c0.caret-pos--top-left .c3,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::before,
+.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 {
@@ -1137,12 +1025,12 @@ exports[`Popover renders correctly for a caret position of left 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -1160,7 +1048,7 @@ exports[`Popover renders correctly for a caret position of left 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -1169,7 +1057,7 @@ exports[`Popover renders correctly for a caret position of left 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c2::after,
+.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,
@@ -1178,78 +1066,74 @@ exports[`Popover renders correctly for a caret position of left 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right .c3::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 .c3::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 .c3::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 .c3::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--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 .c2::before,
+.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 .c2::before,
+.c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c2::after,
+.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"
+  className="c0 c1 caret-pos--bottom-left"
   open={true}
 >
   <div
-    className="c2 c3"
+    className="c2"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
+exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -1260,22 +1144,22 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
   background-color: #ffffff;
 }
 
-.c3::before,
-.c3::after {
+.c2::before,
+.c2::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c3::before {
+.c2::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c3::after {
+.c2::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -1283,76 +1167,2009 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
 }
 
 .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 {
+.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 .c3::before,
-.c0.caret-pos--bottom-left .c3::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 .c3::after,
-.c0.caret-pos--bottom-left .c3::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 .c3 {
+.c0.caret-pos--bottom-right .c2 {
   right: -9px;
   margin-right: 0;
 }
 
 .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 {
+.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 .c3::before {
+.c0.caret-pos--bottom-right .c2::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
+.c0.caret-pos--bottom-right .c2::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
+.c0.caret-pos--bottom-left .c2 {
   left: -9px;
   margin-left: 0;
 }
 
 .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 {
+.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 .c3::after {
+.c0.caret-pos--bottom-left .c2::after {
   left: calc(24px + 1px);
 }
 
 .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,
+.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 {
+  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,
@@ -1367,7 +3184,7 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -1376,7 +3193,7 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c2::after,
+.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,
@@ -1385,78 +3202,74 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right .c3::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 .c3::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 .c3::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 .c3::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--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 .c2::before,
+.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 .c2::before,
+.c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c2::after,
+.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"
+  className="c0 c1 caret-pos--right-bottom"
   open={true}
 >
   <div
-    className="c2 c3"
+    className="c2"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of left-top 1`] = `
+exports[`Popover renders correctly for a caret position of right-top 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -1467,22 +3280,22 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
   background-color: #ffffff;
 }
 
-.c3::before,
-.c3::after {
+.c2::before,
+.c2::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c3::before {
+.c2::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c3::after {
+.c2::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -1490,6 +3303,161 @@ exports[`Popover renders correctly for a caret position of left-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,
@@ -1499,27 +3467,25 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom .c3::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 .c3::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--top-right .c3,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.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 {
@@ -1527,23 +3493,23 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--top-right .c3::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c2,
+.c0.caret-pos--top-left .c3,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::before,
+.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 {
@@ -1551,12 +3517,12 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -1574,7 +3540,7 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -1583,7 +3549,7 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c2::after,
+.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,
@@ -1592,78 +3558,74 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right .c3::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 .c3::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 .c3::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 .c3::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--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 .c2::before,
+.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 .c2::before,
+.c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c2::after,
+.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"
+  className="c0 c1 caret-pos--right-top"
   open={true}
 >
   <div
-    className="c2 c3"
+    className="c2"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of right 1`] = `
+exports[`Popover renders correctly for a caret position of top 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -1674,22 +3636,22 @@ exports[`Popover renders correctly for a caret position of right 1`] = `
   background-color: #ffffff;
 }
 
-.c3::before,
-.c3::after {
+.c2::before,
+.c2::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c3::before {
+.c2::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c3::after {
+.c2::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -1697,84 +3659,84 @@ exports[`Popover renders correctly for a caret position of right 1`] = `
 }
 
 .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 {
+.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 .c3::before,
-.c0.caret-pos--bottom-left .c3::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 .c3::after,
-.c0.caret-pos--bottom-left .c3::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 .c3 {
+.c0.caret-pos--bottom-right .c2 {
   right: -9px;
   margin-right: 0;
 }
 
 .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 {
+.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 .c3::before {
+.c0.caret-pos--bottom-right .c2::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
+.c0.caret-pos--bottom-right .c2::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
+.c0.caret-pos--bottom-left .c2 {
   left: -9px;
   margin-left: 0;
 }
 
 .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 {
+.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 .c3::after {
+.c0.caret-pos--bottom-left .c2::after {
   left: calc(24px + 1px);
 }
 
 .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,
-.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 {
+.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;
@@ -1782,128 +3744,76 @@ exports[`Popover renders correctly for a caret position of right 1`] = `
 }
 
 .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,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .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 {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::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 .c3::after,
-.c0.caret-pos--right-bottom .c3::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 .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .c3::after,
-.c0.caret-pos--left-bottom .c3::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 .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
+.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 .c3::before {
+.c0.caret-pos--left-bottom .c2::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
+.c0.caret-pos--left-bottom .c2::after {
   bottom: calc(16px + 1px);
 }
 
-<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 .c3::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--bottom .c3::after,
@@ -1913,27 +3823,25 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom .c3::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 .c3::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--top-right .c3,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.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 {
@@ -1941,23 +3849,23 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--top-right .c3::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c2,
+.c0.caret-pos--top-left .c3,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::before,
+.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 {
@@ -1965,12 +3873,12 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -1988,7 +3896,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -1997,7 +3905,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c2::after,
+.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,
@@ -2006,78 +3914,74 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right .c3::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 .c3::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 .c3::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 .c3::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--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 .c2::before,
+.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 .c2::before,
+.c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c2::after,
+.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-bottom"
+  className="c0 c1 caret-pos--top"
   open={true}
 >
   <div
-    className="c2 c3"
+    className="c2"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of right-top 1`] = `
+exports[`Popover renders correctly for a caret position of top-left 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -2088,22 +3992,22 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
   background-color: #ffffff;
 }
 
-.c3::before,
-.c3::after {
+.c2::before,
+.c2::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c3::before {
+.c2::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c3::after {
+.c2::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -2111,84 +4015,84 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
 }
 
 .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 {
+.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 .c3::before,
-.c0.caret-pos--bottom-left .c3::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 .c3::after,
-.c0.caret-pos--bottom-left .c3::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 .c3 {
+.c0.caret-pos--bottom-right .c2 {
   right: -9px;
   margin-right: 0;
 }
 
 .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 {
+.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 .c3::before {
+.c0.caret-pos--bottom-right .c2::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
+.c0.caret-pos--bottom-right .c2::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
+.c0.caret-pos--bottom-left .c2 {
   left: -9px;
   margin-left: 0;
 }
 
 .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 {
+.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 .c3::after {
+.c0.caret-pos--bottom-left .c2::after {
   left: calc(24px + 1px);
 }
 
 .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,
-.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 {
+.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;
@@ -2196,128 +4100,76 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
 }
 
 .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,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .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 {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::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 .c3::after,
-.c0.caret-pos--right-bottom .c3::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 .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .c3::after,
-.c0.caret-pos--left-bottom .c3::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 .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
+.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 .c3::before {
+.c0.caret-pos--left-bottom .c2::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
+.c0.caret-pos--left-bottom .c2::after {
   bottom: calc(16px + 1px);
 }
 
-<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 .c3::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--bottom .c3::after,
@@ -2327,27 +4179,25 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom .c3::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 .c3::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--top-right .c3,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.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 {
@@ -2355,23 +4205,23 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--top-right .c3::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c2,
+.c0.caret-pos--top-left .c3,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::before,
+.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 {
@@ -2379,12 +4229,12 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -2402,7 +4252,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -2411,7 +4261,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c2::after,
+.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,
@@ -2420,78 +4270,74 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right .c3::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 .c3::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 .c3::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 .c3::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--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 .c2::before,
+.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 .c2::before,
+.c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
 
 <div
-  className="c0 c1 caret-pos--top"
+  className="c0 c1 caret-pos--top-left"
   open={true}
 >
   <div
-    className="c2 c3"
+    className="c2"
   >
     Hello!
   </div>
 </div>
 `;
 
-exports[`Popover renders correctly for a caret position of top-left 1`] = `
+exports[`Popover renders correctly for a caret position of top-right 1`] = `
 .c1 {
   position: absolute;
   z-index: 100;
   display: block;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #d0d7de;
   border-radius: 6px;
   position: relative;
@@ -2502,22 +4348,22 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
   background-color: #ffffff;
 }
 
-.c3::before,
-.c3::after {
+.c2::before,
+.c2::after {
   position: absolute;
   left: 50%;
   display: inline-block;
   content: '';
 }
 
-.c3::before {
+.c2::before {
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
   border-bottom-color: #d0d7de;
 }
 
-.c3::after {
+.c2::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
@@ -2525,84 +4371,84 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
 }
 
 .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 {
+.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 .c3::before,
-.c0.caret-pos--bottom-left .c3::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 .c3::after,
-.c0.caret-pos--bottom-left .c3::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 .c3 {
+.c0.caret-pos--bottom-right .c2 {
   right: -9px;
   margin-right: 0;
 }
 
 .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 {
+.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 .c3::before {
+.c0.caret-pos--bottom-right .c2::before {
   right: 20px;
 }
 
 .c0.caret-pos--top-right .c2::after,
-.c0.caret-pos--bottom-right .c3::after {
+.c0.caret-pos--bottom-right .c2::after {
   right: 21px;
 }
 
 .c0.caret-pos--top-left .c2,
-.c0.caret-pos--bottom-left .c3 {
+.c0.caret-pos--bottom-left .c2 {
   left: -9px;
   margin-left: 0;
 }
 
 .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 {
+.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 .c3::after {
+.c0.caret-pos--bottom-left .c2::after {
   left: calc(24px + 1px);
 }
 
 .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,
-.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 {
+.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;
@@ -2610,128 +4456,76 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
 }
 
 .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,
-.c0.caret-pos--left-top .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .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 {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::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 .c3::after,
-.c0.caret-pos--right-bottom .c3::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 .c3::before,
-.c0.caret-pos--left-bottom .c3::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 .c3::after,
-.c0.caret-pos--left-bottom .c3::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 .c3::before,
-.c0.caret-pos--right-top .c3::after,
-.c0.caret-pos--left-top .c3::after {
+.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 .c3::before,
-.c0.caret-pos--right-bottom .c3::after,
-.c0.caret-pos--left-bottom .c3::after {
+.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 .c3::before {
+.c0.caret-pos--left-bottom .c2::before {
   bottom: 16px;
 }
 
 .c0.caret-pos--right-bottom .c2::after,
-.c0.caret-pos--left-bottom .c3::after {
+.c0.caret-pos--left-bottom .c2::after {
   bottom: calc(16px + 1px);
 }
 
-<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 .c3::before,
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before,
 .c0.caret-pos--bottom .c3::after,
@@ -2741,27 +4535,25 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--bottom .c2::before,
+.c0.caret-pos--bottom .c3::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 .c3::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--top-right .c3,
 .c0.caret-pos--bottom-right .c3 {
   right: -9px;
   margin-right: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.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 {
@@ -2769,23 +4561,23 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-right .c2::before,
+.c0.caret-pos--top-right .c3::before,
 .c0.caret-pos--bottom-right .c3::before {
   right: 20px;
 }
 
-.c0.caret-pos--top-right .c2::after,
+.c0.caret-pos--top-right .c3::after,
 .c0.caret-pos--bottom-right .c3::after {
   right: 21px;
 }
 
-.c0.caret-pos--top-left .c2,
+.c0.caret-pos--top-left .c3,
 .c0.caret-pos--bottom-left .c3 {
   left: -9px;
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::before,
+.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 {
@@ -2793,12 +4585,12 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   margin-left: 0;
 }
 
-.c0.caret-pos--top-left .c2::after,
+.c0.caret-pos--top-left .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   left: calc(24px + 1px);
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -2816,7 +4608,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   border-bottom-color: transparent;
 }
 
-.c0.caret-pos--right .c2::before,
+.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,
@@ -2825,7 +4617,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   margin-top: calc((8px + 1px) * -1);
 }
 
-.c0.caret-pos--right .c2::after,
+.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,
@@ -2834,54 +4626,50 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   margin-top: -8px;
 }
 
-.c0.caret-pos--right .c2::before,
+.c0.caret-pos--right .c3::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 .c3::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 .c3::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 .c3::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--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 .c2::before,
+.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 .c2::before,
+.c0.caret-pos--right-bottom .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   bottom: 16px;
 }
 
-.c0.caret-pos--right-bottom .c2::after,
+.c0.caret-pos--right-bottom .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   bottom: calc(16px + 1px);
 }
@@ -2891,7 +4679,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   open={true}
 >
   <div
-    className="c2 c3"
+    className="c2"
   >
     Hello!
   </div>
diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
index d67c681a05a..3fd7842da9c 100644
--- a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
@@ -23,6 +23,10 @@ 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 {
@@ -42,33 +46,26 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c2:focus {
+.c1:focus {
   outline: solid 2px #0969da;
 }
 
-.c2:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c2:disabled {
+.c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c7 {
+.c6 {
   padding: 4px 16px;
   margin: 0;
   font-size: 12px;
@@ -78,7 +75,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   border-bottom: 1px solid hsla(210,18%,87%,1);
 }
 
-.c8 {
+.c7 {
   margin-top: -1px;
   padding: 8px 16px;
   font-size: 12px;
@@ -87,7 +84,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   border-top: 1px solid hsla(210,18%,87%,1);
 }
 
-.c6 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -111,20 +108,20 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   width: 100%;
 }
 
-.c6:hover {
+.c5:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c6:focus {
+.c5:focus {
   outline: none;
 }
 
-.c6[hidden] {
+.c5[hidden] {
   display: none !important;
 }
 
-.c6 .SelectMenu-icon {
+.c5 .SelectMenu-icon {
   width: 16px;
   margin-right: 8px;
   -webkit-flex-shrink: 0;
@@ -132,7 +129,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   flex-shrink: 0;
 }
 
-.c6 .SelectMenu-selected-icon {
+.c5 .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;
@@ -142,12 +139,12 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   transform: scale(0);
 }
 
-.c6[aria-checked='true'] {
+.c5[aria-checked='true'] {
   font-weight: 500;
   color: #1F2328;
 }
 
-.c6[aria-checked='true'] .SelectMenu-selected-icon {
+.c5[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;
@@ -157,7 +154,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   transform: scale(1);
 }
 
-.c5 {
+.c4 {
   position: relative;
   padding: 0;
   margin: 0;
@@ -170,7 +167,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   -webkit-overflow-scrolling: touch;
 }
 
-.c4 {
+.c3 {
   position: relative;
   z-index: 99;
   display: -webkit-box;
@@ -187,12 +184,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: 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;
+  -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;
   width: 300px;
 }
 
-.c3 {
+.c2 {
   position: fixed;
   top: 0;
   right: 0;
@@ -210,7 +207,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   flex-direction: column;
 }
 
-.c3::before {
+.c2::before {
   position: absolute;
   top: 0;
   right: 0;
@@ -234,55 +231,55 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 }
 
 @media (min-width:544px) {
-  .c8 {
+  .c7 {
     padding: 4px 8px;
   }
 }
 
 @media (min-width:544px) {
-  .c6 {
+  .c5 {
     padding-top: 8px;
     padding-bottom: 8px;
   }
 }
 
 @media (hover:hover) {
-  .c6:hover,
-  .c6:active,
-  .c6:focus {
+  .c5:hover,
+  .c5:active,
+  .c5:focus {
     background-color: rgba(234,238,242,0.5);
   }
 }
 
 @media (hover:none) {
-  .c6 {
+  .c5 {
     -webkit-tap-highlight-color: rgba(175,184,193,0.5);
   }
 
-  .c6:focus,
-  .c6:active {
+  .c5:focus,
+  .c5:active {
     background-color: #f6f8fa;
   }
 }
 
 @media (hover:hover) {
-  .c5 .SelectMenuTab:focus {
+  .c4 .SelectMenuTab:focus {
     background-color: #b6e3ff;
   }
 
-  .c5 .SelectMenuTab:not([aria-checked='true']):hover {
+  .c4 .SelectMenuTab:not([aria-checked='true']):hover {
     color: #1F2328;
     background-color: #f6f8fa;
   }
 
-  .c5 .SelectMenuTab:not([aria-checked='true']):active {
+  .c4 .SelectMenuTab:not([aria-checked='true']):active {
     color: #1F2328;
     background-color: #f6f8fa;
   }
 }
 
 @media (min-width:544px) {
-  .c4 {
+  .c3 {
     height: auto;
     max-height: 350px;
     margin: 4px 0 16px 0;
@@ -294,13 +291,13 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 }
 
 @media (min-width:544px) {
-  .c3::before {
+  .c2::before {
     display: none;
   }
 }
 
 @media (min-width:544px) {
-  .c3 {
+  .c2 {
     position: absolute;
     top: auto;
     right: 0;
@@ -316,25 +313,25 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   open={false}
 >
   <summary
-    className="c1 c2"
+    className="c1"
   >
     Projects
   </summary>
   <div
-    className="c3"
+    className="c2"
     role="menu"
     title="Projects"
   >
     <div
-      className="c4"
+      className="c3"
       width="300px"
     >
       <div
-        className="c5"
+        className="c4"
       >
         <a
           aria-checked={true}
-          className="c6"
+          className="c5"
           href="#"
           onClick={[Function]}
           role="menuitemcheckbox"
@@ -365,7 +362,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
         </a>
         <a
           aria-checked={false}
-          className="c6"
+          className="c5"
           data-test="menu-item"
           href="#"
           onClick={[Function]}
@@ -396,13 +393,13 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
           Primer Components roadmap
         </a>
         <div
-          className="c7"
+          className="c6"
         >
           stuff
         </div>
         <a
           aria-checked={false}
-          className="c6"
+          className="c5"
           href="#"
           onClick={[Function]}
           role="menuitemcheckbox"
@@ -433,7 +430,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
         </a>
         <a
           aria-checked={false}
-          className="c6"
+          className="c5"
           href="#"
           onClick={[Function]}
           role="menuitemcheckbox"
@@ -463,7 +460,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
           Project 4
         </a>
         <footer
-          className="c8"
+          className="c7"
         >
           footer
         </footer>
diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
index d26dbaf999a..d54bec24567 100644
--- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
@@ -37,6 +37,88 @@ 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 99b670ceb7d..601bbd7160e 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -20,6 +20,10 @@ 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,
@@ -57,19 +61,12 @@ exports[`TextInput renders 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -79,13 +76,13 @@ exports[`TextInput renders 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -95,7 +92,7 @@ exports[`TextInput renders 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -107,11 +104,11 @@ exports[`TextInput renders 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -149,6 +146,10 @@ 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,
@@ -186,19 +187,12 @@ exports[`TextInput renders block 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -208,13 +202,13 @@ exports[`TextInput renders block 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -224,7 +218,7 @@ exports[`TextInput renders block 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -236,11 +230,11 @@ exports[`TextInput renders block 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -270,6 +264,10 @@ 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,
@@ -307,19 +305,12 @@ exports[`TextInput renders consistently 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -329,13 +320,13 @@ exports[`TextInput renders consistently 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -345,7 +336,7 @@ exports[`TextInput renders consistently 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -357,11 +348,11 @@ exports[`TextInput renders consistently 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     onBlur={[Function]}
     onFocus={[Function]}
@@ -391,6 +382,10 @@ 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,
@@ -428,19 +423,12 @@ exports[`TextInput renders contrast 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -450,13 +438,13 @@ exports[`TextInput renders contrast 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -466,7 +454,7 @@ exports[`TextInput renders contrast 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -478,11 +466,11 @@ exports[`TextInput renders contrast 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -513,6 +501,10 @@ 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,
@@ -556,19 +548,12 @@ exports[`TextInput renders error 1`] = `
   box-shadow: inset 0 0 0 1px #0969da;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -578,13 +563,13 @@ exports[`TextInput renders error 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -594,7 +579,7 @@ exports[`TextInput renders error 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -606,11 +591,11 @@ exports[`TextInput renders error 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -646,6 +631,10 @@ 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,
@@ -683,19 +672,12 @@ exports[`TextInput renders large 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -705,13 +687,13 @@ exports[`TextInput renders large 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -721,7 +703,7 @@ exports[`TextInput renders large 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -733,12 +715,12 @@ exports[`TextInput renders large 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
   size="large"
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -768,6 +750,10 @@ 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,
@@ -805,19 +791,12 @@ exports[`TextInput renders leadingVisual 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -827,13 +806,13 @@ exports[`TextInput renders leadingVisual 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -843,7 +822,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -855,7 +834,7 @@ exports[`TextInput renders leadingVisual 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <span
@@ -885,7 +864,7 @@ exports[`TextInput renders leadingVisual 1`] = `
     </svg>
   </span>
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -916,6 +895,10 @@ 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,
@@ -953,19 +936,12 @@ exports[`TextInput renders leadingVisual 2`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -975,13 +951,13 @@ exports[`TextInput renders leadingVisual 2`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -991,7 +967,7 @@ exports[`TextInput renders leadingVisual 2`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -1003,7 +979,7 @@ exports[`TextInput renders leadingVisual 2`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <span
@@ -1033,7 +1009,7 @@ exports[`TextInput renders leadingVisual 2`] = `
     </svg>
   </span>
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -1064,6 +1040,10 @@ 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,
@@ -1101,19 +1081,12 @@ exports[`TextInput renders leadingVisual 3`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1123,13 +1096,13 @@ exports[`TextInput renders leadingVisual 3`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1139,7 +1112,7 @@ exports[`TextInput renders leadingVisual 3`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -1151,7 +1124,7 @@ exports[`TextInput renders leadingVisual 3`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <span
@@ -1162,7 +1135,7 @@ exports[`TextInput renders leadingVisual 3`] = `
     </div>
   </span>
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -1193,6 +1166,10 @@ 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,
@@ -1230,19 +1207,12 @@ exports[`TextInput renders leadingVisual 4`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1252,13 +1222,13 @@ exports[`TextInput renders leadingVisual 4`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1268,7 +1238,7 @@ exports[`TextInput renders leadingVisual 4`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -1280,7 +1250,7 @@ exports[`TextInput renders leadingVisual 4`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <span
@@ -1291,7 +1261,7 @@ exports[`TextInput renders leadingVisual 4`] = `
     </div>
   </span>
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -1323,6 +1293,10 @@ 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,
@@ -1360,19 +1334,12 @@ exports[`TextInput renders monospace 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1382,13 +1349,13 @@ exports[`TextInput renders monospace 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1398,7 +1365,7 @@ exports[`TextInput renders monospace 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -1410,11 +1377,11 @@ exports[`TextInput renders monospace 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -1444,6 +1411,10 @@ 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,
@@ -1481,19 +1452,12 @@ exports[`TextInput renders placeholder 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1503,13 +1467,13 @@ exports[`TextInput renders placeholder 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1519,7 +1483,7 @@ exports[`TextInput renders placeholder 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -1531,11 +1495,11 @@ exports[`TextInput renders placeholder 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -1574,6 +1538,10 @@ 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,
@@ -1611,19 +1579,12 @@ exports[`TextInput renders small 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1633,13 +1594,13 @@ exports[`TextInput renders small 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1649,7 +1610,7 @@ exports[`TextInput renders small 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -1661,12 +1622,12 @@ exports[`TextInput renders small 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
   size="small"
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -1677,13 +1638,13 @@ exports[`TextInput renders small 1`] = `
 `;
 
 exports[`TextInput renders trailingAction icon button 1`] = `
-.c3 {
+.c2 {
   margin-left: 4px;
   margin-right: 4px;
   line-height: 0;
 }
 
-.c5 {
+.c4 {
   border-radius: 6px;
   border: 1px solid;
   border-color: transparent;
@@ -1728,60 +1689,61 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   box-shadow: none;
 }
 
-.c5:focus:not(:disabled) {
+.c4:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c5:focus:not(:disabled):not(:focus-visible) {
+.c4:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c5:focus-visible:not(:disabled) {
+.c4:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c5[href] {
+.c4[href] {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c5[href]:hover {
+.c4[href]:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c5:hover {
+.c4:hover {
   -webkit-transition-duration: 80ms;
   transition-duration: 80ms;
 }
 
-.c5:active {
+.c4:active {
   -webkit-transition: none;
   transition: none;
 }
 
-.c5:disabled {
+.c4:disabled {
   cursor: not-allowed;
   box-shadow: none;
   color: #8c959f;
 }
 
-.c5:disabled [data-component=ButtonCounter],
-.c5:disabled [data-component="leadingVisual"],.c5:disabled [data-component="trailingAction"] {
+.c4:disabled [data-component=ButtonCounter],
+.c4:disabled [data-component="leadingVisual"],
+.c4:disabled [data-component="trailingAction"] {
   color: inherit;
 }
 
-.c5 [data-component=ButtonCounter] {
+.c4 [data-component=ButtonCounter] {
   font-size: 12px;
 }
 
-.c5[data-component=IconButton] {
+.c4[data-component=IconButton] {
   display: inline-grid;
   padding: unset;
   place-content: center;
@@ -1789,55 +1751,55 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   min-width: unset;
 }
 
-.c5[data-size="small"] {
+.c4[data-size="small"] {
   padding: 0 8px;
   height: 28px;
   gap: 4px;
   font-size: 12px;
 }
 
-.c5[data-size="small"] [data-component="text"] {
+.c4[data-size="small"] [data-component="text"] {
   line-height: calc(20 / 12);
 }
 
-.c5[data-size="small"] [data-component=ButtonCounter] {
+.c4[data-size="small"] [data-component=ButtonCounter] {
   font-size: 12px;
 }
 
-.c5[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 4px;
 }
 
-.c5[data-size="small"][data-component=IconButton] {
+.c4[data-size="small"][data-component=IconButton] {
   width: 28px;
   padding: unset;
 }
 
-.c5[data-size="large"] {
+.c4[data-size="large"] {
   padding: 0 16px;
   height: 40px;
   gap: 8px;
 }
 
-.c5[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c5[data-size="large"][data-component=IconButton] {
+.c4[data-size="large"][data-component=IconButton] {
   width: 40px;
   padding: unset;
 }
 
-.c5[data-block="block"] {
+.c4[data-block="block"] {
   width: 100%;
 }
 
-.c5 [data-component="leadingVisual"] {
+.c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
   color: #656d76;
 }
 
-.c5 [data-component="text"] {
+.c4 [data-component="text"] {
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
@@ -1851,16 +1813,16 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   align-items: center;
 }
 
-.c5 [data-component="trailingVisual"] {
+.c4 [data-component="trailingVisual"] {
   grid-area: trailingVisual;
 }
 
-.c5 [data-component="trailingAction"] {
+.c4 [data-component="trailingAction"] {
   margin-right: -4px;
   color: #656d76;
 }
 
-.c5 [data-component="buttonContent"] {
+.c4 [data-component="buttonContent"] {
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
@@ -1876,43 +1838,43 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   align-content: center;
 }
 
-.c5 [data-component="buttonContent"] > :not(:last-child) {
+.c4 [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c5:hover:not([disabled]) {
+.c4:hover:not([disabled]) {
   background-color: #f3f4f6;
 }
 
-.c5:active:not([disabled]) {
+.c4:active:not([disabled]) {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c5[aria-expanded=true] {
+.c4[aria-expanded=true] {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c5[data-component="IconButton"][data-no-visuals] {
+.c4[data-component="IconButton"][data-no-visuals] {
   color: #656d76;
 }
 
-.c5[data-no-visuals] {
+.c4[data-no-visuals] {
   color: #0969da;
 }
 
-.c5:has([data-component="ButtonCounter"]) {
+.c4:has([data-component="ButtonCounter"]) {
   color: #0969da;
 }
 
-.c5:disabled[data-no-visuals] {
+.c4:disabled[data-no-visuals] {
   color: #8c959f;
 }
 
-.c5:disabled[data-no-visuals] [data-component=ButtonCounter] {
+.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
   color: inherit;
 }
 
-.c5[data-size="small"][data-no-visuals="true"] {
+.c4[data-size="small"][data-no-visuals="true"] {
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
@@ -1920,7 +1882,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   position: relative;
 }
 
-.c5[data-size="small"][data-no-visuals="true"][data-component="IconButton"] {
+.c4[data-size="small"][data-no-visuals="true"][data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);
 }
@@ -1944,6 +1906,10 @@ 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,
@@ -1975,19 +1941,12 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1997,18 +1956,18 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c4 {
+.c3 {
   position: relative;
   display: inline-block;
 }
 
-.c4::before {
+.c3::before {
   position: absolute;
   z-index: 1000001;
   display: none;
@@ -2021,7 +1980,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   opacity: 0;
 }
 
-.c4::after {
+.c3::after {
   position: absolute;
   z-index: 1000000;
   display: none;
@@ -2047,14 +2006,14 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   opacity: 0;
 }
 
-.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 {
+.c3:hover::before,
+.c3:active::before,
+.c3:focus::before,
+.c3:focus-within::before,
+.c3:hover::after,
+.c3:active::after,
+.c3:focus::after,
+.c3:focus-within::after {
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2070,36 +2029,36 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   animation-delay: 0.4s;
 }
 
-.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 {
+.c3.tooltipped-no-delay:hover::before,
+.c3.tooltipped-no-delay:active::before,
+.c3.tooltipped-no-delay:focus::before,
+.c3.tooltipped-no-delay:focus-within::before,
+.c3.tooltipped-no-delay:hover::after,
+.c3.tooltipped-no-delay:active::after,
+.c3.tooltipped-no-delay:focus::after,
+.c3.tooltipped-no-delay:focus-within::after {
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
 }
 
-.c4.tooltipped-multiline:hover::after,
-.c4.tooltipped-multiline:active::after,
-.c4.tooltipped-multiline:focus::after,
-.c4.tooltipped-multiline:focus-within::after {
+.c3.tooltipped-multiline:hover::after,
+.c3.tooltipped-multiline:active::after,
+.c3.tooltipped-multiline:focus::after,
+.c3.tooltipped-multiline:focus-within::after {
   display: table-cell;
 }
 
-.c4.tooltipped-s::after,
-.c4.tooltipped-se::after,
-.c4.tooltipped-sw::after {
+.c3.tooltipped-s::after,
+.c3.tooltipped-se::after,
+.c3.tooltipped-sw::after {
   top: 100%;
   right: 50%;
   margin-top: 6px;
 }
 
-.c4.tooltipped-s::before,
-.c4.tooltipped-se::before,
-.c4.tooltipped-sw::before {
+.c3.tooltipped-s::before,
+.c3.tooltipped-se::before,
+.c3.tooltipped-sw::before {
   top: auto;
   right: 50%;
   bottom: -7px;
@@ -2107,27 +2066,27 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   border-bottom-color: #24292f;
 }
 
-.c4.tooltipped-se::after {
+.c3.tooltipped-se::after {
   right: auto;
   left: 50%;
   margin-left: -16px;
 }
 
-.c4.tooltipped-sw::after {
+.c3.tooltipped-sw::after {
   margin-right: -16px;
 }
 
-.c4.tooltipped-n::after,
-.c4.tooltipped-ne::after,
-.c4.tooltipped-nw::after {
+.c3.tooltipped-n::after,
+.c3.tooltipped-ne::after,
+.c3.tooltipped-nw::after {
   right: 50%;
   bottom: 100%;
   margin-bottom: 6px;
 }
 
-.c4.tooltipped-n::before,
-.c4.tooltipped-ne::before,
-.c4.tooltipped-nw::before {
+.c3.tooltipped-n::before,
+.c3.tooltipped-ne::before,
+.c3.tooltipped-nw::before {
   top: -7px;
   right: 50%;
   bottom: auto;
@@ -2135,24 +2094,24 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   border-top-color: #24292f;
 }
 
-.c4.tooltipped-ne::after {
+.c3.tooltipped-ne::after {
   right: auto;
   left: 50%;
   margin-left: -16px;
 }
 
-.c4.tooltipped-nw::after {
+.c3.tooltipped-nw::after {
   margin-right: -16px;
 }
 
-.c4.tooltipped-s::after,
-.c4.tooltipped-n::after {
+.c3.tooltipped-s::after,
+.c3.tooltipped-n::after {
   -webkit-transform: translateX(50%);
   -ms-transform: translateX(50%);
   transform: translateX(50%);
 }
 
-.c4.tooltipped-w::after {
+.c3.tooltipped-w::after {
   right: 100%;
   bottom: 50%;
   margin-right: 6px;
@@ -2161,7 +2120,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   transform: translateY(50%);
 }
 
-.c4.tooltipped-w::before {
+.c3.tooltipped-w::before {
   top: 50%;
   bottom: 50%;
   left: -7px;
@@ -2169,7 +2128,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   border-left-color: #24292f;
 }
 
-.c4.tooltipped-e::after {
+.c3.tooltipped-e::after {
   bottom: 50%;
   left: 100%;
   margin-left: 6px;
@@ -2178,7 +2137,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   transform: translateY(50%);
 }
 
-.c4.tooltipped-e::before {
+.c3.tooltipped-e::before {
   top: 50%;
   right: -7px;
   bottom: 50%;
@@ -2186,7 +2145,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   border-right-color: #24292f;
 }
 
-.c4.tooltipped-multiline::after {
+.c3.tooltipped-multiline::after {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
@@ -2196,8 +2155,8 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   border-collapse: separate;
 }
 
-.c4.tooltipped-multiline.tooltipped-s::after,
-.c4.tooltipped-multiline.tooltipped-n::after {
+.c3.tooltipped-multiline.tooltipped-s::after,
+.c3.tooltipped-multiline.tooltipped-n::after {
   right: auto;
   left: 50%;
   -webkit-transform: translateX(-50%);
@@ -2205,30 +2164,30 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   transform: translateX(-50%);
 }
 
-.c4.tooltipped-multiline.tooltipped-w::after,
-.c4.tooltipped-multiline.tooltipped-e::after {
+.c3.tooltipped-multiline.tooltipped-w::after,
+.c3.tooltipped-multiline.tooltipped-e::after {
   right: 100%;
 }
 
-.c4.tooltipped-align-right-2::after {
+.c3.tooltipped-align-right-2::after {
   right: 0;
   margin-right: 0;
 }
 
-.c4.tooltipped-align-right-2::before {
+.c3.tooltipped-align-right-2::before {
   right: 15px;
 }
 
-.c4.tooltipped-align-left-2::after {
+.c3.tooltipped-align-left-2::after {
   left: 0;
   margin-left: 0;
 }
 
-.c4.tooltipped-align-left-2::before {
+.c3.tooltipped-align-left-2::before {
   left: 10px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2238,18 +2197,18 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
 @media (forced-colors:active) {
-  .c5:focus {
+  .c4:focus {
     outline: solid 1px transparent;
   }
 }
 
 @media (pointer:coarse) {
-  .c5[data-size="small"][data-no-visuals="true"]:after {
+  .c4[data-size="small"][data-no-visuals="true"]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -2270,11 +2229,11 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -2283,16 +2242,16 @@ exports[`TextInput renders trailingAction icon button 1`] = `
     type="text"
   />
   <span
-    className="c3 TextInput-action"
+    className="c2 TextInput-action"
   >
     <span
       aria-label="Icon label"
-      className="c4 tooltipped-n"
+      className="c3 tooltipped-n"
       role="tooltip"
     >
       <button
         aria-label="Icon label"
-        className="c5"
+        className="c4"
         data-block={null}
         data-component="IconButton"
         data-no-visuals={true}
@@ -2329,20 +2288,20 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 `;
 
 exports[`TextInput renders trailingAction text button 1`] = `
-.c3 {
+.c2 {
   margin-left: 4px;
   margin-right: 4px;
   line-height: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
 }
 
-.c4 {
+.c3 {
   border-radius: 6px;
   border: 1px solid;
   border-color: transparent;
@@ -2387,60 +2346,61 @@ exports[`TextInput renders trailingAction text button 1`] = `
   box-shadow: none;
 }
 
-.c4:focus:not(:disabled) {
+.c3:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c4:focus:not(:disabled):not(:focus-visible) {
+.c3:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c4:focus-visible:not(:disabled) {
+.c3:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c4[href] {
+.c3[href] {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c4[href]:hover {
+.c3[href]:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c4:hover {
+.c3:hover {
   -webkit-transition-duration: 80ms;
   transition-duration: 80ms;
 }
 
-.c4:active {
+.c3:active {
   -webkit-transition: none;
   transition: none;
 }
 
-.c4:disabled {
+.c3:disabled {
   cursor: not-allowed;
   box-shadow: none;
   color: #8c959f;
 }
 
-.c4:disabled [data-component=ButtonCounter],
-.c4:disabled [data-component="leadingVisual"],.c4:disabled [data-component="trailingAction"] {
+.c3:disabled [data-component=ButtonCounter],
+.c3:disabled [data-component="leadingVisual"],
+.c3:disabled [data-component="trailingAction"] {
   color: inherit;
 }
 
-.c4 [data-component=ButtonCounter] {
+.c3 [data-component=ButtonCounter] {
   font-size: 12px;
 }
 
-.c4[data-component=IconButton] {
+.c3[data-component=IconButton] {
   display: inline-grid;
   padding: unset;
   place-content: center;
@@ -2448,55 +2408,55 @@ exports[`TextInput renders trailingAction text button 1`] = `
   min-width: unset;
 }
 
-.c4[data-size="small"] {
+.c3[data-size="small"] {
   padding: 0 8px;
   height: 28px;
   gap: 4px;
   font-size: 12px;
 }
 
-.c4[data-size="small"] [data-component="text"] {
+.c3[data-size="small"] [data-component="text"] {
   line-height: calc(20 / 12);
 }
 
-.c4[data-size="small"] [data-component=ButtonCounter] {
+.c3[data-size="small"] [data-component=ButtonCounter] {
   font-size: 12px;
 }
 
-.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+.c3[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 4px;
 }
 
-.c4[data-size="small"][data-component=IconButton] {
+.c3[data-size="small"][data-component=IconButton] {
   width: 28px;
   padding: unset;
 }
 
-.c4[data-size="large"] {
+.c3[data-size="large"] {
   padding: 0 16px;
   height: 40px;
   gap: 8px;
 }
 
-.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+.c3[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c4[data-size="large"][data-component=IconButton] {
+.c3[data-size="large"][data-component=IconButton] {
   width: 40px;
   padding: unset;
 }
 
-.c4[data-block="block"] {
+.c3[data-block="block"] {
   width: 100%;
 }
 
-.c4 [data-component="leadingVisual"] {
+.c3 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
   color: #656d76;
 }
 
-.c4 [data-component="text"] {
+.c3 [data-component="text"] {
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
@@ -2510,16 +2470,16 @@ exports[`TextInput renders trailingAction text button 1`] = `
   align-items: center;
 }
 
-.c4 [data-component="trailingVisual"] {
+.c3 [data-component="trailingVisual"] {
   grid-area: trailingVisual;
 }
 
-.c4 [data-component="trailingAction"] {
+.c3 [data-component="trailingAction"] {
   margin-right: -4px;
   color: #656d76;
 }
 
-.c4 [data-component="buttonContent"] {
+.c3 [data-component="buttonContent"] {
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
@@ -2535,43 +2495,43 @@ exports[`TextInput renders trailingAction text button 1`] = `
   align-content: center;
 }
 
-.c4 [data-component="buttonContent"] > :not(:last-child) {
+.c3 [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c4:hover:not([disabled]) {
+.c3:hover:not([disabled]) {
   background-color: #f3f4f6;
 }
 
-.c4:active:not([disabled]) {
+.c3:active:not([disabled]) {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c4[aria-expanded=true] {
+.c3[aria-expanded=true] {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c4[data-component="IconButton"][data-no-visuals] {
+.c3[data-component="IconButton"][data-no-visuals] {
   color: #656d76;
 }
 
-.c4[data-no-visuals] {
+.c3[data-no-visuals] {
   color: #0969da;
 }
 
-.c4:has([data-component="ButtonCounter"]) {
+.c3:has([data-component="ButtonCounter"]) {
   color: #0969da;
 }
 
-.c4:disabled[data-no-visuals] {
+.c3:disabled[data-no-visuals] {
   color: #8c959f;
 }
 
-.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
+.c3:disabled[data-no-visuals] [data-component=ButtonCounter] {
   color: inherit;
 }
 
-.c4[data-no-visuals="true"] {
+.c3[data-no-visuals="true"] {
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
@@ -2579,7 +2539,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   position: relative;
 }
 
-.c4[data-no-visuals="true"][data-component="IconButton"] {
+.c3[data-no-visuals="true"][data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);
 }
@@ -2603,6 +2563,10 @@ 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,
@@ -2634,19 +2598,12 @@ exports[`TextInput renders trailingAction text button 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -2656,13 +2613,13 @@ exports[`TextInput renders trailingAction text button 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2672,18 +2629,18 @@ exports[`TextInput renders trailingAction text button 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
 @media (forced-colors:active) {
-  .c4:focus {
+  .c3:focus {
     outline: solid 1px transparent;
   }
 }
 
 @media (pointer:coarse) {
-  .c4[data-no-visuals="true"]:after {
+  .c3[data-no-visuals="true"]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -2704,11 +2661,11 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -2717,17 +2674,17 @@ exports[`TextInput renders trailingAction text button 1`] = `
     type="text"
   />
   <span
-    className="c3 TextInput-action"
+    className="c2 TextInput-action"
   >
     <button
-      className="c4"
+      className="c3"
       data-block={null}
       data-no-visuals={true}
       onClick={[MockFunction]}
       type="button"
     >
       <span
-        className="c5"
+        className="c4"
         data-component="buttonContent"
       >
         <span
@@ -2742,20 +2699,20 @@ exports[`TextInput renders trailingAction text button 1`] = `
 `;
 
 exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
-.c3 {
+.c2 {
   margin-left: 4px;
   margin-right: 4px;
   line-height: 0;
 }
 
-.c6 {
+.c5 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
 }
 
-.c5 {
+.c4 {
   border-radius: 6px;
   border: 1px solid;
   border-color: transparent;
@@ -2800,60 +2757,61 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   box-shadow: none;
 }
 
-.c5:focus:not(:disabled) {
+.c4:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c5:focus:not(:disabled):not(:focus-visible) {
+.c4:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c5:focus-visible:not(:disabled) {
+.c4:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
 
-.c5[href] {
+.c4[href] {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c5[href]:hover {
+.c4[href]:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c5:hover {
+.c4:hover {
   -webkit-transition-duration: 80ms;
   transition-duration: 80ms;
 }
 
-.c5:active {
+.c4:active {
   -webkit-transition: none;
   transition: none;
 }
 
-.c5:disabled {
+.c4:disabled {
   cursor: not-allowed;
   box-shadow: none;
   color: #8c959f;
 }
 
-.c5:disabled [data-component=ButtonCounter],
-.c5:disabled [data-component="leadingVisual"],.c5:disabled [data-component="trailingAction"] {
+.c4:disabled [data-component=ButtonCounter],
+.c4:disabled [data-component="leadingVisual"],
+.c4:disabled [data-component="trailingAction"] {
   color: inherit;
 }
 
-.c5 [data-component=ButtonCounter] {
+.c4 [data-component=ButtonCounter] {
   font-size: 12px;
 }
 
-.c5[data-component=IconButton] {
+.c4[data-component=IconButton] {
   display: inline-grid;
   padding: unset;
   place-content: center;
@@ -2861,55 +2819,55 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   min-width: unset;
 }
 
-.c5[data-size="small"] {
+.c4[data-size="small"] {
   padding: 0 8px;
   height: 28px;
   gap: 4px;
   font-size: 12px;
 }
 
-.c5[data-size="small"] [data-component="text"] {
+.c4[data-size="small"] [data-component="text"] {
   line-height: calc(20 / 12);
 }
 
-.c5[data-size="small"] [data-component=ButtonCounter] {
+.c4[data-size="small"] [data-component=ButtonCounter] {
   font-size: 12px;
 }
 
-.c5[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 4px;
 }
 
-.c5[data-size="small"][data-component=IconButton] {
+.c4[data-size="small"][data-component=IconButton] {
   width: 28px;
   padding: unset;
 }
 
-.c5[data-size="large"] {
+.c4[data-size="large"] {
   padding: 0 16px;
   height: 40px;
   gap: 8px;
 }
 
-.c5[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c5[data-size="large"][data-component=IconButton] {
+.c4[data-size="large"][data-component=IconButton] {
   width: 40px;
   padding: unset;
 }
 
-.c5[data-block="block"] {
+.c4[data-block="block"] {
   width: 100%;
 }
 
-.c5 [data-component="leadingVisual"] {
+.c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
   color: #656d76;
 }
 
-.c5 [data-component="text"] {
+.c4 [data-component="text"] {
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
@@ -2923,16 +2881,16 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   align-items: center;
 }
 
-.c5 [data-component="trailingVisual"] {
+.c4 [data-component="trailingVisual"] {
   grid-area: trailingVisual;
 }
 
-.c5 [data-component="trailingAction"] {
+.c4 [data-component="trailingAction"] {
   margin-right: -4px;
   color: #656d76;
 }
 
-.c5 [data-component="buttonContent"] {
+.c4 [data-component="buttonContent"] {
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
@@ -2948,43 +2906,43 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   align-content: center;
 }
 
-.c5 [data-component="buttonContent"] > :not(:last-child) {
+.c4 [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c5:hover:not([disabled]) {
+.c4:hover:not([disabled]) {
   background-color: #f3f4f6;
 }
 
-.c5:active:not([disabled]) {
+.c4:active:not([disabled]) {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c5[aria-expanded=true] {
+.c4[aria-expanded=true] {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c5[data-component="IconButton"][data-no-visuals] {
+.c4[data-component="IconButton"][data-no-visuals] {
   color: #656d76;
 }
 
-.c5[data-no-visuals] {
+.c4[data-no-visuals] {
   color: #0969da;
 }
 
-.c5:has([data-component="ButtonCounter"]) {
+.c4:has([data-component="ButtonCounter"]) {
   color: #0969da;
 }
 
-.c5:disabled[data-no-visuals] {
+.c4:disabled[data-no-visuals] {
   color: #8c959f;
 }
 
-.c5:disabled[data-no-visuals] [data-component=ButtonCounter] {
+.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
   color: inherit;
 }
 
-.c5[data-no-visuals="true"] {
+.c4[data-no-visuals="true"] {
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
@@ -2992,7 +2950,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   position: relative;
 }
 
-.c5[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);
 }
@@ -3016,6 +2974,10 @@ 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,
@@ -3047,19 +3009,12 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3069,19 +3024,19 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c4 {
+.c3 {
   position: relative;
   display: inline-block;
   display: inline-block;
 }
 
-.c4::before {
+.c3::before {
   position: absolute;
   z-index: 1000001;
   display: none;
@@ -3094,7 +3049,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   opacity: 0;
 }
 
-.c4::after {
+.c3::after {
   position: absolute;
   z-index: 1000000;
   display: none;
@@ -3120,14 +3075,14 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   opacity: 0;
 }
 
-.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 {
+.c3:hover::before,
+.c3:active::before,
+.c3:focus::before,
+.c3:focus-within::before,
+.c3:hover::after,
+.c3:active::after,
+.c3:focus::after,
+.c3:focus-within::after {
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3143,36 +3098,36 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   animation-delay: 0.4s;
 }
 
-.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 {
+.c3.tooltipped-no-delay:hover::before,
+.c3.tooltipped-no-delay:active::before,
+.c3.tooltipped-no-delay:focus::before,
+.c3.tooltipped-no-delay:focus-within::before,
+.c3.tooltipped-no-delay:hover::after,
+.c3.tooltipped-no-delay:active::after,
+.c3.tooltipped-no-delay:focus::after,
+.c3.tooltipped-no-delay:focus-within::after {
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
 }
 
-.c4.tooltipped-multiline:hover::after,
-.c4.tooltipped-multiline:active::after,
-.c4.tooltipped-multiline:focus::after,
-.c4.tooltipped-multiline:focus-within::after {
+.c3.tooltipped-multiline:hover::after,
+.c3.tooltipped-multiline:active::after,
+.c3.tooltipped-multiline:focus::after,
+.c3.tooltipped-multiline:focus-within::after {
   display: table-cell;
 }
 
-.c4.tooltipped-s::after,
-.c4.tooltipped-se::after,
-.c4.tooltipped-sw::after {
+.c3.tooltipped-s::after,
+.c3.tooltipped-se::after,
+.c3.tooltipped-sw::after {
   top: 100%;
   right: 50%;
   margin-top: 6px;
 }
 
-.c4.tooltipped-s::before,
-.c4.tooltipped-se::before,
-.c4.tooltipped-sw::before {
+.c3.tooltipped-s::before,
+.c3.tooltipped-se::before,
+.c3.tooltipped-sw::before {
   top: auto;
   right: 50%;
   bottom: -7px;
@@ -3180,27 +3135,27 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   border-bottom-color: #24292f;
 }
 
-.c4.tooltipped-se::after {
+.c3.tooltipped-se::after {
   right: auto;
   left: 50%;
   margin-left: -16px;
 }
 
-.c4.tooltipped-sw::after {
+.c3.tooltipped-sw::after {
   margin-right: -16px;
 }
 
-.c4.tooltipped-n::after,
-.c4.tooltipped-ne::after,
-.c4.tooltipped-nw::after {
+.c3.tooltipped-n::after,
+.c3.tooltipped-ne::after,
+.c3.tooltipped-nw::after {
   right: 50%;
   bottom: 100%;
   margin-bottom: 6px;
 }
 
-.c4.tooltipped-n::before,
-.c4.tooltipped-ne::before,
-.c4.tooltipped-nw::before {
+.c3.tooltipped-n::before,
+.c3.tooltipped-ne::before,
+.c3.tooltipped-nw::before {
   top: -7px;
   right: 50%;
   bottom: auto;
@@ -3208,24 +3163,24 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   border-top-color: #24292f;
 }
 
-.c4.tooltipped-ne::after {
+.c3.tooltipped-ne::after {
   right: auto;
   left: 50%;
   margin-left: -16px;
 }
 
-.c4.tooltipped-nw::after {
+.c3.tooltipped-nw::after {
   margin-right: -16px;
 }
 
-.c4.tooltipped-s::after,
-.c4.tooltipped-n::after {
+.c3.tooltipped-s::after,
+.c3.tooltipped-n::after {
   -webkit-transform: translateX(50%);
   -ms-transform: translateX(50%);
   transform: translateX(50%);
 }
 
-.c4.tooltipped-w::after {
+.c3.tooltipped-w::after {
   right: 100%;
   bottom: 50%;
   margin-right: 6px;
@@ -3234,7 +3189,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   transform: translateY(50%);
 }
 
-.c4.tooltipped-w::before {
+.c3.tooltipped-w::before {
   top: 50%;
   bottom: 50%;
   left: -7px;
@@ -3242,7 +3197,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   border-left-color: #24292f;
 }
 
-.c4.tooltipped-e::after {
+.c3.tooltipped-e::after {
   bottom: 50%;
   left: 100%;
   margin-left: 6px;
@@ -3251,7 +3206,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   transform: translateY(50%);
 }
 
-.c4.tooltipped-e::before {
+.c3.tooltipped-e::before {
   top: 50%;
   right: -7px;
   bottom: 50%;
@@ -3259,7 +3214,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   border-right-color: #24292f;
 }
 
-.c4.tooltipped-multiline::after {
+.c3.tooltipped-multiline::after {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
@@ -3269,8 +3224,8 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   border-collapse: separate;
 }
 
-.c4.tooltipped-multiline.tooltipped-s::after,
-.c4.tooltipped-multiline.tooltipped-n::after {
+.c3.tooltipped-multiline.tooltipped-s::after,
+.c3.tooltipped-multiline.tooltipped-n::after {
   right: auto;
   left: 50%;
   -webkit-transform: translateX(-50%);
@@ -3278,30 +3233,30 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   transform: translateX(-50%);
 }
 
-.c4.tooltipped-multiline.tooltipped-w::after,
-.c4.tooltipped-multiline.tooltipped-e::after {
+.c3.tooltipped-multiline.tooltipped-w::after,
+.c3.tooltipped-multiline.tooltipped-e::after {
   right: 100%;
 }
 
-.c4.tooltipped-align-right-2::after {
+.c3.tooltipped-align-right-2::after {
   right: 0;
   margin-right: 0;
 }
 
-.c4.tooltipped-align-right-2::before {
+.c3.tooltipped-align-right-2::before {
   right: 15px;
 }
 
-.c4.tooltipped-align-left-2::after {
+.c3.tooltipped-align-left-2::after {
   left: 0;
   margin-left: 0;
 }
 
-.c4.tooltipped-align-left-2::before {
+.c3.tooltipped-align-left-2::before {
   left: 10px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3311,18 +3266,18 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
 @media (forced-colors:active) {
-  .c5:focus {
+  .c4:focus {
     outline: solid 1px transparent;
   }
 }
 
 @media (pointer:coarse) {
-  .c5[data-no-visuals="true"]:after {
+  .c4[data-no-visuals="true"]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -3343,11 +3298,11 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -3356,22 +3311,22 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
     type="text"
   />
   <span
-    className="c3 TextInput-action"
+    className="c2 TextInput-action"
   >
     <span
       aria-label="Clear input"
-      className="c4 tooltipped-n"
+      className="c3 tooltipped-n"
       role="tooltip"
     >
       <button
-        className="c5"
+        className="c4"
         data-block={null}
         data-no-visuals={true}
         onClick={[MockFunction]}
         type="button"
       >
         <span
-          className="c6"
+          className="c5"
           data-component="buttonContent"
         >
           <span
@@ -3406,6 +3361,10 @@ 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,
@@ -3443,19 +3402,12 @@ exports[`TextInput renders trailingVisual 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3465,13 +3417,13 @@ exports[`TextInput renders trailingVisual 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3481,7 +3433,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -3493,11 +3445,11 @@ exports[`TextInput renders trailingVisual 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -3554,6 +3506,10 @@ 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,
@@ -3591,19 +3547,12 @@ exports[`TextInput renders trailingVisual 2`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3613,13 +3562,13 @@ exports[`TextInput renders trailingVisual 2`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3629,7 +3578,7 @@ exports[`TextInput renders trailingVisual 2`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -3641,11 +3590,11 @@ exports[`TextInput renders trailingVisual 2`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -3702,6 +3651,10 @@ 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,
@@ -3739,19 +3692,12 @@ exports[`TextInput renders trailingVisual 3`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3761,13 +3707,13 @@ exports[`TextInput renders trailingVisual 3`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3777,7 +3723,7 @@ exports[`TextInput renders trailingVisual 3`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -3789,11 +3735,11 @@ exports[`TextInput renders trailingVisual 3`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -3831,6 +3777,10 @@ 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,
@@ -3868,19 +3818,12 @@ exports[`TextInput renders trailingVisual 4`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3890,13 +3833,13 @@ exports[`TextInput renders trailingVisual 4`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3906,7 +3849,7 @@ exports[`TextInput renders trailingVisual 4`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -3918,11 +3861,11 @@ exports[`TextInput renders trailingVisual 4`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="search"
     onBlur={[Function]}
@@ -3960,6 +3903,11 @@ 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,
@@ -3997,20 +3945,12 @@ exports[`TextInput renders warning 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  border-color: #9a6700;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4020,19 +3960,19 @@ exports[`TextInput renders warning 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c1:focus-within {
+.c0:focus-within {
   border-color: #0969da;
   outline: none;
   box-shadow: inset 0 0 0 1px #0969da;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4042,7 +3982,7 @@ exports[`TextInput renders warning 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -4054,11 +3994,11 @@ exports[`TextInput renders warning 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     data-component="input"
     name="zipcode"
     onBlur={[Function]}
@@ -4070,7 +4010,7 @@ exports[`TextInput renders warning 1`] = `
 
 exports[`TextInput renders with a loading indicator 1`] = `
 [
-  .c3 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4078,7 +4018,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -4103,6 +4043,10 @@ 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,
@@ -4140,19 +4084,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4162,13 +4099,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4178,7 +4115,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -4188,21 +4125,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
-      className="c2"
+      className="c1"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4212,11 +4141,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c3"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="16px"
           sx={
@@ -4247,7 +4176,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4255,13 +4184,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -4286,6 +4215,10 @@ 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,
@@ -4323,19 +4256,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4345,13 +4271,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4361,7 +4287,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -4371,28 +4297,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c3"
+          className="c2"
           fill="none"
           height="16px"
           sx={
@@ -4423,7 +4341,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c3"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4433,11 +4351,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c5"
+          className="c4"
           fill="none"
           height="16px"
           sx={
@@ -4468,7 +4386,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c3 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4476,7 +4394,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -4501,6 +4419,10 @@ 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,
@@ -4538,19 +4460,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4560,13 +4475,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4576,7 +4491,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -4586,21 +4501,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
-      className="c2"
+      className="c1"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4610,11 +4517,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c3"
+        className="c2"
         display="flex"
       >
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="16px"
           sx={
@@ -4645,7 +4552,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4653,17 +4560,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   visibility: hidden;
 }
 
-.c6 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -4693,6 +4600,10 @@ 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,
@@ -4730,19 +4641,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4752,13 +4656,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c5 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4768,7 +4672,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -4778,28 +4682,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -4825,7 +4721,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -4861,7 +4757,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c5"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -4871,11 +4767,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c6"
+          className="c5"
           fill="none"
           height="16px"
           sx={
@@ -4906,7 +4802,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4914,17 +4810,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   visibility: hidden;
 }
 
-.c6 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -4954,6 +4850,10 @@ 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,
@@ -4991,19 +4891,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5013,13 +4906,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c5 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5029,7 +4922,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -5039,28 +4932,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -5086,7 +4971,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -5122,7 +5007,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c5"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5132,11 +5017,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c6"
+          className="c5"
           fill="none"
           height="16px"
           sx={
@@ -5167,7 +5052,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5175,17 +5060,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   visibility: visible;
 }
 
-.c6 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5215,6 +5100,10 @@ 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,
@@ -5252,19 +5141,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5274,13 +5156,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c5 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5290,7 +5172,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -5300,28 +5182,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -5347,7 +5221,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -5383,7 +5257,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c5"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5393,11 +5267,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c6"
+          className="c5"
           fill="none"
           height="16px"
           sx={
@@ -5428,7 +5302,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c3 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5436,11 +5310,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
+.c3 {
   visibility: hidden;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5470,6 +5344,10 @@ 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,
@@ -5507,19 +5385,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5529,13 +5400,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5545,7 +5416,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -5555,21 +5426,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
-      className="c2"
+      className="c1"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5579,11 +5442,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c3"
+        className="c2"
         display="flex"
       >
         <div
-          className="c4"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -5609,7 +5472,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c5"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -5645,7 +5508,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5653,17 +5516,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c5 {
+.c4 {
   visibility: visible;
 }
 
-.c3 {
+.c2 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c6 {
+.c5 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5693,6 +5556,10 @@ 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,
@@ -5730,19 +5597,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5752,13 +5612,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5768,7 +5628,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -5778,28 +5638,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c3"
+          className="c2"
           fill="none"
           height="16px"
           sx={
@@ -5830,7 +5682,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c4"
+      className="c3"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -5840,11 +5692,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c5"
+          className="c4"
         >
           <svg
             aria-hidden="true"
@@ -5870,7 +5722,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c6"
+          className="c5"
           fill="none"
           height="32px"
           sx={
@@ -5906,7 +5758,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c3 {
+  .c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5914,11 +5766,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c4 {
+.c3 {
   visibility: hidden;
 }
 
-.c5 {
+.c4 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -5948,6 +5800,10 @@ 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,
@@ -5985,19 +5841,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -6007,13 +5856,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6023,7 +5872,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -6033,21 +5882,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <input
-      className="c2"
+      className="c1"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6057,11 +5898,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c3"
+        className="c2"
         display="flex"
       >
         <div
-          className="c4"
+          className="c3"
         >
           <svg
             aria-hidden="true"
@@ -6087,7 +5928,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c5"
+          className="c4"
           fill="none"
           height="32px"
           sx={
@@ -6123,7 +5964,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6131,15 +5972,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   visibility: hidden;
 }
 
-.c6 {
+.c5 {
   visibility: visible;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6150,7 +5991,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6188,6 +6029,10 @@ 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,
@@ -6225,19 +6070,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -6247,13 +6085,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c5 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6263,27 +6101,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c4: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 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
     size="small"
   >
@@ -6291,11 +6121,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -6321,7 +6151,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -6357,7 +6187,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c5"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6367,11 +6197,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c6"
+          className="c5"
         >
           <svg
             aria-hidden="true"
@@ -6397,7 +6227,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c7"
+          className="c6"
           fill="none"
           height="32px"
           sx={
@@ -6433,7 +6263,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6441,15 +6271,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   visibility: hidden;
 }
 
-.c6 {
+.c5 {
   visibility: visible;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6460,7 +6290,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6490,6 +6320,10 @@ 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,
@@ -6527,19 +6361,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -6549,13 +6376,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c5 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6565,7 +6392,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c4:focus {
   outline: 0;
 }
 
@@ -6575,28 +6402,20 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
     <span
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -6622,7 +6441,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -6658,7 +6477,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c5"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6668,11 +6487,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c6"
+          className="c5"
         >
           <svg
             aria-hidden="true"
@@ -6698,7 +6517,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c7"
+          className="c6"
           fill="none"
           height="32px"
           sx={
@@ -6734,7 +6553,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6742,15 +6561,15 @@ exports[`TextInput renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c6 {
+.c5 {
   visibility: hidden;
 }
 
-.c3 {
+.c2 {
   visibility: visible;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6761,7 +6580,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -6797,6 +6616,10 @@ 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,
@@ -6834,19 +6657,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -6856,13 +6672,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c5 {
+.c4 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6872,18 +6688,10 @@ exports[`TextInput renders with a loading indicator 1`] = `
   width: 100%;
 }
 
-.c5:focus {
+.c4:focus {
   outline: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -6892,7 +6700,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    className="c0 c1 TextInput-wrapper"
+    className="c0 TextInput-wrapper"
     onClick={[Function]}
     size="large"
   >
@@ -6900,11 +6708,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -6930,7 +6738,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -6966,7 +6774,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      className="c5"
+      className="c4"
       data-component="input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -6976,11 +6784,11 @@ exports[`TextInput renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c6"
+          className="c5"
         >
           <svg
             aria-hidden="true"
@@ -7006,7 +6814,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c7"
+          className="c6"
           fill="none"
           height="32px"
           sx={
@@ -7065,6 +6873,10 @@ 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,
@@ -7102,19 +6914,12 @@ exports[`TextInput should render a password input 1`] = `
   padding: 12px;
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -7124,13 +6929,13 @@ exports[`TextInput should render a password input 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c2 {
+.c1 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7140,7 +6945,7 @@ exports[`TextInput should render a password input 1`] = `
   width: 100%;
 }
 
-.c2:focus {
+.c1:focus {
   outline: 0;
 }
 
@@ -7152,11 +6957,11 @@ exports[`TextInput should render a password input 1`] = `
 
 <span
   aria-busy={false}
-  className="c0 c1 TextInput-wrapper"
+  className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
   <input
-    className="c2"
+    className="c1"
     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 ff172981e77..bd1f7ba606b 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`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -21,7 +21,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -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;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -39,7 +39,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -75,6 +75,13 @@ 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,
@@ -112,22 +119,12 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -137,13 +134,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -154,11 +151,11 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -191,13 +188,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -237,16 +234,16 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -271,11 +268,11 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -291,7 +288,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
@@ -322,15 +319,15 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
     </svg>
   </span>
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -338,7 +335,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -347,19 +344,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -389,7 +386,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -398,19 +395,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -440,7 +437,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -449,19 +446,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -491,7 +488,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -500,19 +497,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -542,7 +539,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -551,19 +548,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -593,7 +590,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -602,19 +599,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -644,7 +641,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -653,19 +650,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -695,7 +692,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -704,19 +701,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -776,7 +773,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 `;
 
 exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -796,7 +793,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -804,7 +801,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -814,7 +811,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -827,7 +824,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   border-width: 0;
 }
 
-.c9 {
+.c8 {
   font-size: 16px;
   color: #656d76;
 }
@@ -855,6 +852,13 @@ 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,
@@ -892,22 +896,12 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -917,13 +911,13 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -934,11 +928,11 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -971,13 +965,13 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -1017,16 +1011,16 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1051,11 +1045,11 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -1071,20 +1065,20 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -1092,7 +1086,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1101,19 +1095,19 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1143,7 +1137,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1152,19 +1146,19 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1194,7 +1188,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       </span>
     </span>
     <span
-      className="c9"
+      className="c8"
       color="fg.muted"
       fontSize={2}
     >
@@ -1206,7 +1200,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 `;
 
 exports[`TextInputWithTokens renders as block layout 1`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1226,7 +1220,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1234,7 +1228,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -1280,6 +1274,18 @@ 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,
@@ -1317,27 +1323,12 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1347,13 +1338,13 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1364,7 +1355,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -1375,20 +1366,20 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -1400,7 +1391,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 `;
 
 exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1420,7 +1411,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1428,7 +1419,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -1438,7 +1429,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -1476,6 +1467,15 @@ 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,24 +1513,12 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -1540,13 +1528,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1557,11 +1545,11 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1594,13 +1582,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -1640,16 +1628,16 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1674,11 +1662,11 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -1694,20 +1682,20 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -1715,7 +1703,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1724,19 +1712,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1766,7 +1754,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1775,19 +1763,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1817,7 +1805,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1826,19 +1814,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1868,7 +1856,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1877,19 +1865,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1919,7 +1907,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1928,19 +1916,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -1970,7 +1958,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -1979,19 +1967,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -2021,7 +2009,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2030,19 +2018,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -2072,7 +2060,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2081,19 +2069,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -2127,7 +2115,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2147,7 +2135,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2155,7 +2143,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -2165,7 +2153,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2208,6 +2196,13 @@ 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,
@@ -2245,22 +2240,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -2270,13 +2255,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2287,11 +2272,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2322,13 +2307,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -2368,16 +2353,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   width: 16px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -2402,11 +2387,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -2422,20 +2407,20 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="small"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -2443,7 +2428,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2452,19 +2437,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2494,7 +2479,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2503,19 +2488,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2545,7 +2530,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2554,19 +2539,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2596,7 +2581,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2605,19 +2590,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2647,7 +2632,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2656,19 +2641,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2698,7 +2683,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2707,19 +2692,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2749,7 +2734,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2758,19 +2743,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2800,7 +2785,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -2809,19 +2794,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="small"
         tabIndex={-1}
@@ -2855,7 +2840,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2875,7 +2860,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2883,7 +2868,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -2893,7 +2878,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2936,6 +2921,13 @@ 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,
@@ -2973,22 +2965,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -2998,13 +2980,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3015,11 +2997,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3050,13 +3032,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -3096,16 +3078,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   width: 20px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3130,11 +3112,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -3150,20 +3132,20 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="small"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -3171,7 +3153,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3180,19 +3162,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3222,7 +3204,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3231,19 +3213,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3273,7 +3255,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3282,19 +3264,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3324,7 +3306,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3333,19 +3315,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3375,7 +3357,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3384,19 +3366,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3426,7 +3408,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3435,19 +3417,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3477,7 +3459,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3486,19 +3468,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3528,7 +3510,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3537,19 +3519,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="medium"
         tabIndex={-1}
@@ -3583,7 +3565,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3603,7 +3585,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3611,7 +3593,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -3621,7 +3603,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -3657,6 +3639,13 @@ 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,
@@ -3694,22 +3683,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -3719,13 +3698,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3736,11 +3715,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3771,13 +3750,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -3817,16 +3796,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   width: 24px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3851,11 +3830,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -3864,10 +3843,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -3875,20 +3850,20 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -3896,7 +3871,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3905,19 +3880,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -3947,7 +3922,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -3956,19 +3931,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -3998,7 +3973,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4007,19 +3982,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4049,7 +4024,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4058,19 +4033,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4100,7 +4075,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4109,19 +4084,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4151,7 +4126,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4160,19 +4135,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4202,7 +4177,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4211,19 +4186,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4253,7 +4228,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4262,19 +4237,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="large"
         tabIndex={-1}
@@ -4308,7 +4283,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4328,7 +4303,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4336,7 +4311,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -4346,7 +4321,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4382,6 +4357,13 @@ 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,
@@ -4419,22 +4401,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -4444,13 +4416,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4461,11 +4433,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -4498,13 +4470,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -4544,16 +4516,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -4578,11 +4550,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -4591,10 +4563,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -4602,20 +4570,20 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -4623,7 +4591,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4632,19 +4600,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4674,7 +4642,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4683,19 +4651,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4725,7 +4693,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4734,19 +4702,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4776,7 +4744,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4785,19 +4753,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4827,7 +4795,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4836,19 +4804,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4878,7 +4846,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4887,19 +4855,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4929,7 +4897,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4938,19 +4906,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -4980,7 +4948,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -4989,19 +4957,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="extralarge"
         tabIndex={-1}
@@ -5035,7 +5003,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5055,7 +5023,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5063,7 +5031,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -5073,7 +5041,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5109,6 +5077,13 @@ 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,
@@ -5146,22 +5121,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5171,13 +5136,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5188,11 +5153,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -5225,13 +5190,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -5271,16 +5236,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -5305,11 +5270,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -5318,10 +5283,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -5329,20 +5290,20 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -5350,7 +5311,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5359,19 +5320,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5401,7 +5362,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5410,19 +5371,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5452,7 +5413,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5461,19 +5422,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5503,7 +5464,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5512,19 +5473,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5554,7 +5515,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5563,19 +5524,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5605,7 +5566,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5614,19 +5575,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5656,7 +5617,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5665,19 +5626,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5707,7 +5668,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -5716,19 +5677,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -5763,9 +5724,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
 
 exports[`TextInputWithTokens renders tokens on a single line when specified 1`] = `
 .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
+  -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;
   display: flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -5782,7 +5753,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5790,17 +5761,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   margin-bottom: 0.25rem;
 }
 
-.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 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5837,6 +5798,14 @@ 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,
@@ -5874,23 +5843,12 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -5900,13 +5858,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5917,11 +5875,11 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -5954,13 +5912,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -6000,16 +5958,16 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -6034,11 +5992,11 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -6054,20 +6012,20 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -6075,7 +6033,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6084,19 +6042,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6126,7 +6084,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6135,19 +6093,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6177,7 +6135,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6186,19 +6144,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6228,7 +6186,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6237,19 +6195,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6279,7 +6237,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6288,19 +6246,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6330,7 +6288,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6339,19 +6297,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6381,7 +6339,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6390,19 +6348,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6432,7 +6390,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -6441,19 +6399,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -6487,7 +6445,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 `;
 
 exports[`TextInputWithTokens renders tokens without a remove button when specified 1`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6507,7 +6465,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6515,7 +6473,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -6525,7 +6483,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6561,6 +6519,13 @@ 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,
@@ -6598,22 +6563,12 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -6623,13 +6578,13 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -6640,11 +6595,11 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -6676,13 +6631,13 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   max-width: 100%;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -6707,11 +6662,11 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -6727,20 +6682,20 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -6748,7 +6703,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6758,18 +6713,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6779,18 +6734,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6800,18 +6755,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
       >
         two
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6821,18 +6776,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
       >
         three
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6842,18 +6797,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
       >
         four
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6863,18 +6818,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
       >
         five
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6884,18 +6839,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
       >
         six
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -6905,12 +6860,12 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
       >
         seven
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
@@ -6921,7 +6876,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 
 exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 [
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6941,7 +6896,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6949,7 +6904,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -6959,7 +6914,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6967,7 +6922,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6980,7 +6935,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c10 {
+.c9 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -7009,6 +6964,13 @@ 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,
@@ -7046,22 +7008,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -7071,13 +7023,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7088,11 +7040,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -7125,13 +7077,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -7171,16 +7123,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -7205,11 +7157,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -7224,25 +7176,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
     <div
-      className="c2"
+      className="c1"
       display="flex"
     >
       <div
-        className="c3"
+        className="c2"
       >
         <input
           aria-invalid="false"
-          className="c4"
+          className="c3"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -7250,7 +7198,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7259,19 +7207,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7301,7 +7249,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7310,19 +7258,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7352,7 +7300,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7361,19 +7309,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7403,7 +7351,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7412,19 +7360,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7454,7 +7402,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7463,19 +7411,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7505,7 +7453,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7514,19 +7462,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7556,7 +7504,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7565,19 +7513,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7607,7 +7555,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -7616,19 +7564,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -7662,11 +7610,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c9"
+        className="c8"
         display="flex"
       >
         <svg
-          className="c10"
+          className="c9"
           fill="none"
           height="16px"
           sx={
@@ -7697,7 +7645,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c4 {
+  .c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7717,7 +7665,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c4 > * {
+.c3 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7725,7 +7673,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c5 {
+.c4 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -7735,7 +7683,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7743,7 +7691,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c9 {
+.c8 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -7756,13 +7704,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c3 {
+.c2 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c11 {
+.c10 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
@@ -7791,6 +7739,13 @@ 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,
@@ -7828,22 +7783,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -7853,13 +7798,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c6 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -7870,11 +7815,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c6:focus {
+.c5:focus {
   outline: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -7907,13 +7852,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7:hover {
+.c6:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c10 {
+.c9 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -7953,16 +7898,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c10:hover,
-.c10:focus {
+.c9:hover,
+.c9:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c10:active {
+.c9:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c8 {
+.c7 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -7987,11 +7932,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c8:is(a,button,[tabIndex='0']) {
+.c7:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c8:is(a,button,[tabIndex='0']):after {
+.c7:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -8006,12 +7951,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
@@ -8019,11 +7960,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c3"
+          className="c2"
           fill="none"
           height="16px"
           sx={
@@ -8054,15 +7995,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c4"
+      className="c3"
       display="flex"
     >
       <div
-        className="c5"
+        className="c4"
       >
         <input
           aria-invalid="false"
-          className="c6"
+          className="c5"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -8070,7 +8011,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8079,19 +8020,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8121,7 +8062,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8130,19 +8071,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8172,7 +8113,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8181,19 +8122,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8223,7 +8164,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8232,19 +8173,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8274,7 +8215,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8283,19 +8224,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8325,7 +8266,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8334,19 +8275,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8376,7 +8317,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8385,19 +8326,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8427,7 +8368,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8436,19 +8377,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8482,11 +8423,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c11"
+          className="c10"
           fill="none"
           height="16px"
           sx={
@@ -8517,7 +8458,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8537,7 +8478,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -8545,7 +8486,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -8555,7 +8496,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8563,7 +8504,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -8576,7 +8517,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c10 {
+.c9 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
@@ -8605,6 +8546,13 @@ 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,
@@ -8642,22 +8590,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -8667,13 +8605,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -8684,11 +8622,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -8721,13 +8659,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -8767,16 +8705,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -8801,11 +8739,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -8820,25 +8758,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
     <div
-      className="c2"
+      className="c1"
       display="flex"
     >
       <div
-        className="c3"
+        className="c2"
       >
         <input
           aria-invalid="false"
-          className="c4"
+          className="c3"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -8846,7 +8780,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8855,19 +8789,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8897,7 +8831,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8906,19 +8840,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8948,7 +8882,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -8957,19 +8891,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -8999,7 +8933,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9008,19 +8942,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9050,7 +8984,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9059,19 +8993,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9101,7 +9035,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9110,19 +9044,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9152,7 +9086,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9161,19 +9095,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9203,7 +9137,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9212,19 +9146,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9258,11 +9192,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c9"
+        className="c8"
         display="flex"
       >
         <svg
-          className="c10"
+          className="c9"
           fill="none"
           height="16px"
           sx={
@@ -9293,7 +9227,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c5 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9313,7 +9247,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c4 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -9321,7 +9255,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c5 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -9331,7 +9265,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9339,11 +9273,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   visibility: hidden;
 }
 
-.c10 {
+.c9 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -9356,13 +9290,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c12 {
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -9396,6 +9330,13 @@ 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,
@@ -9428,27 +9369,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   outline: none;
   box-shadow: inset 0 0 0 1px #0969da;
 }
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.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);
+
+.c0 > textarea {
+  padding: 12px;
 }
 
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -9458,13 +9389,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -9475,11 +9406,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -9512,13 +9443,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -9558,16 +9489,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c11:hover,
-.c11:focus {
+.c10:hover,
+.c10:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c11:active {
+.c10:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -9592,11 +9523,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c8:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c8:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -9611,12 +9542,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
@@ -9624,11 +9551,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -9654,7 +9581,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -9690,15 +9617,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c5"
+      className="c4"
       display="flex"
     >
       <div
-        className="c6"
+        className="c5"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c6"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -9706,7 +9633,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9715,19 +9642,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9757,7 +9684,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9766,19 +9693,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9808,7 +9735,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9817,19 +9744,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9859,7 +9786,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9868,19 +9795,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9910,7 +9837,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9919,19 +9846,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -9961,7 +9888,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -9970,19 +9897,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10012,7 +9939,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10021,19 +9948,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10063,7 +9990,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10072,19 +9999,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10118,11 +10045,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c12"
+          className="c11"
           fill="none"
           height="16px"
           sx={
@@ -10153,7 +10080,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c5 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10173,7 +10100,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c4 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -10181,7 +10108,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c5 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -10191,7 +10118,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10199,11 +10126,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   visibility: hidden;
 }
 
-.c10 {
+.c9 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -10216,13 +10143,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c12 {
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: hidden;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -10256,6 +10183,13 @@ 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,
@@ -10293,22 +10227,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -10318,13 +10242,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 12px;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -10335,11 +10259,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -10372,13 +10296,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -10418,16 +10342,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c11:hover,
-.c11:focus {
+.c10:hover,
+.c10:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c11:active {
+.c10:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -10452,11 +10376,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c8:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c8:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -10471,12 +10395,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
@@ -10484,11 +10404,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -10514,7 +10434,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -10550,15 +10470,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c5"
+      className="c4"
       display="flex"
     >
       <div
-        className="c6"
+        className="c5"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c6"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -10566,7 +10486,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10575,19 +10495,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10617,7 +10537,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10626,19 +10546,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10668,7 +10588,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10677,19 +10597,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10719,7 +10639,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10728,19 +10648,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10770,7 +10690,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10779,19 +10699,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10821,7 +10741,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10830,19 +10750,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10872,7 +10792,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10881,19 +10801,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10923,7 +10843,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -10932,19 +10852,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -10978,11 +10898,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c12"
+          className="c11"
           fill="none"
           height="16px"
           sx={
@@ -11013,7 +10933,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c5 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11033,7 +10953,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c4 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -11041,7 +10961,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c5 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -11051,7 +10971,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11059,11 +10979,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   visibility: visible;
 }
 
-.c10 {
+.c9 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -11076,13 +10996,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c12 {
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -11116,6 +11036,13 @@ 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,
@@ -11150,25 +11077,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 > textarea {
-  padding: 12px;
-}
-
-.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);
+  padding: 12px;
 }
 
-.c1 > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -11178,13 +11095,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -11195,11 +11112,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -11232,13 +11149,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -11278,16 +11195,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c11:hover,
-.c11:focus {
+.c10:hover,
+.c10:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c11:active {
+.c10:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -11312,11 +11229,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c8:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c8:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -11331,12 +11248,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
@@ -11344,11 +11257,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -11374,7 +11287,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -11410,15 +11323,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c5"
+      className="c4"
       display="flex"
     >
       <div
-        className="c6"
+        className="c5"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c6"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -11426,7 +11339,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11435,19 +11348,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11477,7 +11390,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11486,19 +11399,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11528,7 +11441,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11537,19 +11450,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11579,7 +11492,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11588,19 +11501,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11630,7 +11543,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11639,19 +11552,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11681,7 +11594,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11690,19 +11603,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11732,7 +11645,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11741,19 +11654,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11783,7 +11696,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -11792,19 +11705,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -11838,11 +11751,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c12"
+          className="c11"
           fill="none"
           height="16px"
           sx={
@@ -11873,7 +11786,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11893,7 +11806,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -11901,7 +11814,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -11911,7 +11824,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11919,11 +11832,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c10 {
+.c9 {
   visibility: hidden;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -11936,7 +11849,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c11 {
+.c10 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -11970,6 +11883,13 @@ 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,
@@ -12007,22 +11927,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -12032,13 +11942,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -12049,11 +11959,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -12086,13 +11996,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -12132,16 +12042,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -12166,11 +12076,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -12185,25 +12095,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
     <div
-      className="c2"
+      className="c1"
       display="flex"
     >
       <div
-        className="c3"
+        className="c2"
       >
         <input
           aria-invalid="false"
-          className="c4"
+          className="c3"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -12211,7 +12117,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12220,19 +12126,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12262,7 +12168,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12271,19 +12177,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12313,7 +12219,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12322,19 +12228,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12364,7 +12270,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12373,19 +12279,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12415,7 +12321,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12424,19 +12330,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12466,7 +12372,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12475,19 +12381,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12517,7 +12423,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12526,19 +12432,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12568,7 +12474,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -12577,19 +12483,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -12623,11 +12529,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c9"
+        className="c8"
         display="flex"
       >
         <div
-          className="c10"
+          className="c9"
         >
           <svg
             aria-hidden="true"
@@ -12653,7 +12559,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c11"
+          className="c10"
           fill="none"
           height="32px"
           sx={
@@ -12689,7 +12595,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c4 {
+  .c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12709,7 +12615,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c4 > * {
+.c3 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -12717,7 +12623,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c5 {
+.c4 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -12727,7 +12633,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12735,11 +12641,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c11 {
+.c10 {
   visibility: visible;
 }
 
-.c9 {
+.c8 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -12752,13 +12658,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c3 {
+.c2 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   visibility: visible;
 }
 
-.c12 {
+.c11 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -12792,6 +12698,13 @@ 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,
@@ -12829,22 +12742,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -12854,13 +12757,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c6 {
+.c5 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -12871,11 +12774,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c6:focus {
+.c5:focus {
   outline: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -12908,13 +12811,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c7:hover {
+.c6:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c10 {
+.c9 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -12954,16 +12857,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c10:hover,
-.c10:focus {
+.c9:hover,
+.c9:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c10:active {
+.c9:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c8 {
+.c7 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -12988,11 +12891,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c8:is(a,button,[tabIndex='0']) {
+.c7:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c8:is(a,button,[tabIndex='0']):after {
+.c7:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -13002,17 +12905,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 @media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-@media (min-width:768px) {
-
+  .c0 {
+    font-size: 14px;
+  }
 }
 
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
@@ -13020,11 +12919,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <svg
-          className="c3"
+          className="c2"
           fill="none"
           height="16px"
           sx={
@@ -13055,15 +12954,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c4"
+      className="c3"
       display="flex"
     >
       <div
-        className="c5"
+        className="c4"
       >
         <input
           aria-invalid="false"
-          className="c6"
+          className="c5"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -13071,7 +12970,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13080,19 +12979,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13122,7 +13021,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13131,19 +13030,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13173,7 +13072,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13182,19 +13081,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13224,7 +13123,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13233,19 +13132,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13275,7 +13174,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13284,19 +13183,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13326,7 +13225,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13335,19 +13234,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13377,7 +13276,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13386,19 +13285,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13428,7 +13327,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c7"
+        className="c6"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13437,19 +13336,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c8"
+          className="c7"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c9"
+          className="c8"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c10"
+          className="c9"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13483,11 +13382,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c11"
+          className="c10"
         >
           <svg
             aria-hidden="true"
@@ -13513,7 +13412,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c12"
+          className="c11"
           fill="none"
           height="32px"
           sx={
@@ -13549,7 +13448,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c2 {
+  .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13569,7 +13468,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -13577,7 +13476,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -13587,7 +13486,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13595,11 +13494,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c10 {
+.c9 {
   visibility: hidden;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -13612,7 +13511,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c11 {
+.c10 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -13646,6 +13545,13 @@ 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,
@@ -13683,22 +13589,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -13708,13 +13604,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 0;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -13725,11 +13621,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -13762,13 +13658,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -13808,16 +13704,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -13842,11 +13738,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -13861,25 +13757,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
     <div
-      className="c2"
+      className="c1"
       display="flex"
     >
       <div
-        className="c3"
+        className="c2"
       >
         <input
           aria-invalid="false"
-          className="c4"
+          className="c3"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -13887,7 +13779,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13896,19 +13788,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13938,7 +13830,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13947,19 +13839,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -13989,7 +13881,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -13998,19 +13890,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -14040,7 +13932,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14049,19 +13941,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -14091,7 +13983,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14100,19 +13992,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -14142,7 +14034,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14151,19 +14043,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -14193,7 +14085,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14202,19 +14094,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -14244,7 +14136,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c5"
+        className="c4"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14253,19 +14145,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c6"
+          className="c5"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c7"
+          className="c6"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c8"
+          className="c7"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -14299,11 +14191,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c9"
+        className="c8"
         display="flex"
       >
         <div
-          className="c10"
+          className="c9"
         >
           <svg
             aria-hidden="true"
@@ -14329,7 +14221,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c11"
+          className="c10"
           fill="none"
           height="32px"
           sx={
@@ -14365,7 +14257,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c5 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14385,7 +14277,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c4 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -14393,7 +14285,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c5 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -14403,7 +14295,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14411,15 +14303,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   visibility: hidden;
 }
 
-.c12 {
+.c11 {
   visibility: visible;
 }
 
-.c10 {
+.c9 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -14432,7 +14324,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -14443,7 +14335,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c13 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -14484,6 +14376,13 @@ 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,
@@ -14521,22 +14420,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -14546,13 +14435,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -14563,11 +14452,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -14598,13 +14487,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -14644,16 +14533,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 16px;
 }
 
-.c11:hover,
-.c11:focus {
+.c10:hover,
+.c10:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c11:active {
+.c10:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -14678,11 +14567,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c8:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c8:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -14691,10 +14580,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -14702,7 +14587,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="small"
   >
@@ -14710,11 +14595,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -14740,7 +14625,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -14776,15 +14661,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c5"
+      className="c4"
       display="flex"
     >
       <div
-        className="c6"
+        className="c5"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c6"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -14792,7 +14677,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14801,19 +14686,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14843,7 +14728,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14852,19 +14737,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14894,7 +14779,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14903,19 +14788,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14945,7 +14830,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -14954,19 +14839,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -14996,7 +14881,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15005,19 +14890,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -15047,7 +14932,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15056,19 +14941,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -15098,7 +14983,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15107,19 +14992,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -15149,7 +15034,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15158,19 +15043,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="small"
           tabIndex={-1}
@@ -15204,11 +15089,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c12"
+          className="c11"
         >
           <svg
             aria-hidden="true"
@@ -15234,7 +15119,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c13"
+          className="c12"
           fill="none"
           height="32px"
           sx={
@@ -15270,7 +15155,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c5 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15290,7 +15175,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c4 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -15298,7 +15183,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c5 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -15308,7 +15193,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15316,15 +15201,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   visibility: hidden;
 }
 
-.c12 {
+.c11 {
   visibility: visible;
 }
 
-.c10 {
+.c9 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -15337,7 +15222,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -15348,7 +15233,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c13 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -15382,6 +15267,13 @@ 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,
@@ -15419,22 +15311,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -15444,13 +15326,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -15461,11 +15343,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -15498,13 +15380,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -15544,16 +15426,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 32px;
 }
 
-.c11:hover,
-.c11:focus {
+.c10:hover,
+.c10:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c11:active {
+.c10:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -15578,11 +15460,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c8:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c8:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -15597,12 +15479,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
@@ -15610,11 +15488,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -15640,7 +15518,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -15676,15 +15554,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c5"
+      className="c4"
       display="flex"
     >
       <div
-        className="c6"
+        className="c5"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c6"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -15692,7 +15570,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15701,19 +15579,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15743,7 +15621,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15752,19 +15630,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15794,7 +15672,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15803,19 +15681,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15845,7 +15723,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15854,19 +15732,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15896,7 +15774,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15905,19 +15783,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15947,7 +15825,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -15956,19 +15834,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -15998,7 +15876,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16007,19 +15885,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -16049,7 +15927,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16058,19 +15936,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="xlarge"
           tabIndex={-1}
@@ -16104,11 +15982,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c12"
+          className="c11"
         >
           <svg
             aria-hidden="true"
@@ -16134,7 +16012,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c13"
+          className="c12"
           fill="none"
           height="32px"
           sx={
@@ -16170,7 +16048,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
   </span>,
-  .c5 {
+  .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16190,7 +16068,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c5 > * {
+.c4 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -16198,7 +16076,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c6 {
+.c5 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -16208,7 +16086,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16216,15 +16094,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   position: relative;
 }
 
-.c12 {
+.c11 {
   visibility: hidden;
 }
 
-.c3 {
+.c2 {
   visibility: visible;
 }
 
-.c10 {
+.c9 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -16237,7 +16115,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   border-width: 0;
 }
 
-.c4 {
+.c3 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -16248,7 +16126,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   left: 0;
 }
 
-.c13 {
+.c12 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
   position: absolute;
@@ -16282,6 +16160,13 @@ 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,
@@ -16319,22 +16204,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -16344,13 +16219,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 0;
   padding-right: 0;
 }
 
-.c7 {
+.c6 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -16361,11 +16236,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   height: 100%;
 }
 
-.c7:focus {
+.c6:focus {
   outline: 0;
 }
 
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -16396,13 +16271,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 0;
 }
 
-.c8:hover {
+.c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -16442,16 +16317,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   width: 24px;
 }
 
-.c11:hover,
-.c11:focus {
+.c10:hover,
+.c10:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c11:active {
+.c10:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c9 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -16476,11 +16351,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   text-decoration: none;
 }
 
-.c9:is(a,button,[tabIndex='0']) {
+.c8:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c9:is(a,button,[tabIndex='0']):after {
+.c8:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -16495,12 +16370,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
-    className="c0 c1"
+    className="c0"
     onClick={[Function]}
     size="medium"
   >
@@ -16508,11 +16379,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c3"
+          className="c2"
         >
           <svg
             aria-hidden="true"
@@ -16538,7 +16409,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c4"
+          className="c3"
           fill="none"
           height="32px"
           sx={
@@ -16574,15 +16445,15 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       </div>
     </span>
     <div
-      className="c5"
+      className="c4"
       display="flex"
     >
       <div
-        className="c6"
+        className="c5"
       >
         <input
           aria-invalid="false"
-          className="c7"
+          className="c6"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -16590,7 +16461,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         />
       </div>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16599,19 +16470,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           zero
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16641,7 +16512,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16650,19 +16521,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           one
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16692,7 +16563,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16701,19 +16572,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           two
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16743,7 +16614,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16752,19 +16623,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           three
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16794,7 +16665,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16803,19 +16674,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           four
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16845,7 +16716,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16854,19 +16725,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           five
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16896,7 +16767,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16905,19 +16776,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           six
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -16947,7 +16818,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         </span>
       </span>
       <span
-        className="c8"
+        className="c7"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -16956,19 +16827,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         tabIndex={0}
       >
         <span
-          className="c9"
+          className="c8"
           onClick={[Function]}
         >
           seven
         </span>
         <span
-          className="c10"
+          className="c9"
         >
            (press backspace or delete to remove)
         </span>
         <span
           aria-hidden="true"
-          className="c11"
+          className="c10"
           onClick={[Function]}
           size="large"
           tabIndex={-1}
@@ -17002,11 +16873,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
       className="TextInput-icon"
     >
       <div
-        className="c2"
+        className="c1"
         display="flex"
       >
         <div
-          className="c12"
+          className="c11"
         >
           <svg
             aria-hidden="true"
@@ -17032,7 +16903,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           </svg>
         </div>
         <svg
-          className="c13"
+          className="c12"
           fill="none"
           height="32px"
           sx={
@@ -17072,7 +16943,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 `;
 
 exports[`TextInputWithTokens renders with tokens 1`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17092,7 +16963,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -17100,7 +16971,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -17110,7 +16981,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -17146,6 +17017,13 @@ 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,
@@ -17183,22 +17061,12 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -17208,13 +17076,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -17225,11 +17093,11 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -17262,13 +17130,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding-right: 0;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
   color: #1F2328;
 }
 
-.c8 {
+.c7 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -17308,16 +17176,16 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   width: 32px;
 }
 
-.c8:hover,
-.c8:focus {
+.c7:hover,
+.c7:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c8:active {
+.c7:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -17342,11 +17210,11 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -17362,20 +17230,20 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -17383,7 +17251,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17392,19 +17260,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17434,7 +17302,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17443,19 +17311,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17485,7 +17353,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17494,19 +17362,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         two
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17536,7 +17404,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17545,19 +17413,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         three
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17587,7 +17455,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17596,19 +17464,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         four
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17638,7 +17506,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17647,19 +17515,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         five
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17689,7 +17557,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17698,19 +17566,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         six
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17740,7 +17608,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -17749,19 +17617,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         seven
       </span>
       <span
-        className="c7"
+        className="c6"
       >
          (press backspace or delete to remove)
       </span>
       <span
         aria-hidden="true"
-        className="c8"
+        className="c7"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -17795,7 +17663,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 `;
 
 exports[`TextInputWithTokens renders with tokens using a custom token component 1`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17815,7 +17683,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -17823,7 +17691,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -17856,6 +17724,13 @@ 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,
@@ -17893,22 +17768,12 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -17918,13 +17783,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -17935,11 +17800,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -17983,12 +17848,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));
 }
 
-.c5:hover {
+.c4: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);
 }
 
-.c7 {
+.c6 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -18030,16 +17895,16 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   z-index: 1;
 }
 
-.c7:hover,
-.c7:focus {
+.c6:hover,
+.c6:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c7:active {
+.c6:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -18064,11 +17929,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   text-decoration: none;
 }
 
-.c6:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c6:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -18084,20 +17949,20 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -18105,7 +17970,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       />
     </div>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18114,14 +17979,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         zero
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c6"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18151,7 +18016,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18160,14 +18025,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         one
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c6"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18197,7 +18062,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18206,14 +18071,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         two
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c6"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18243,7 +18108,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18252,14 +18117,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         three
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c6"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18289,7 +18154,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18298,14 +18163,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         four
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c6"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18335,7 +18200,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18344,14 +18209,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         five
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c6"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18381,7 +18246,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18390,14 +18255,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         six
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c6"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18427,7 +18292,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       </span>
     </span>
     <span
-      className="c5"
+      className="c4"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -18436,14 +18301,14 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       tabIndex={0}
     >
       <span
-        className="c6"
+        className="c5"
         onClick={[Function]}
       >
         seven
       </span>
       <span
         aria-hidden="true"
-        className="c7"
+        className="c6"
         onClick={[Function]}
         size="xlarge"
         tabIndex={-1}
@@ -18477,7 +18342,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 `;
 
 exports[`TextInputWithTokens renders without tokens 1`] = `
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -18497,7 +18362,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   flex-grow: 1;
 }
 
-.c2 > * {
+.c1 > * {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -18505,7 +18370,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   margin-bottom: 0.25rem;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -18538,6 +18403,13 @@ 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,
@@ -18575,22 +18447,12 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   padding: 12px;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -18600,13 +18462,13 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
+.c0 > input,
+.c0 > select {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.c4 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -18617,7 +18479,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   height: 100%;
 }
 
-.c4:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -18628,20 +18490,20 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0"
   onClick={[Function]}
   size="medium"
 >
   <div
-    className="c2"
+    className="c1"
     display="flex"
   >
     <div
-      className="c3"
+      className="c2"
     >
       <input
         aria-invalid="false"
-        className="c4"
+        className="c3"
         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 53c59b16862..764e81dd26d 100644
--- a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
@@ -1,20 +1,6 @@
 // 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;
@@ -85,6 +71,20 @@ 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 ed2dcc6d095..e261d464937 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
@@ -59,6 +59,84 @@ 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;
@@ -73,11 +151,11 @@ exports[`ActionList.Item renders consistently 1`] = `
   text-decoration: none;
 }
 
-.c1:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c0):not(.Header__StyledHeader-sc-cjezay-0 + .c0) {
+.c1:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) {
   margin-top: 0;
 }
 
-.c1:not(:first-of-type):not(.Divider__StyledDivider-sc-1s7tlfq-0 + .c0):not(.Header__StyledHeader-sc-cjezay-0 + .c0) .c2::before {
+.c1:not(:first-of-type):not(.c9 + .c0):not(.c8 + .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 9de0af301c1..2b488c64daf 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
@@ -23,6 +23,10 @@ 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 {
@@ -42,27 +46,20 @@ exports[`ActionMenu renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c0:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c0:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
@@ -71,7 +68,7 @@ exports[`ActionMenu renders consistently 1`] = `
 <button
   aria-haspopup="true"
   aria-label="menu"
-  className="c0 c1"
+  className="c0"
   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 412399621ca..9c106f86e5a 100644
--- a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -23,6 +23,10 @@ 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 {
@@ -42,34 +46,27 @@ exports[`Button renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c0:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c0:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0 c1"
+  className="c0"
 />
 `;
 
@@ -96,6 +93,10 @@ 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 {
@@ -115,34 +116,27 @@ exports[`Button respects the "disabled" prop 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c0:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c0:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0 c1"
+  className="c0"
   disabled={true}
 />
 `;
@@ -170,6 +164,10 @@ 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 {
@@ -189,34 +187,27 @@ exports[`ButtonDanger renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0: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);
 }
 
-.c1:active {
+.c0: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);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: rgba(207,34,46,0.5);
   background-color: #f6f8fa;
 }
 
 <button
-  className="c0 c1"
+  className="c0"
 />
 `;
 
@@ -243,6 +234,10 @@ 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 {
@@ -262,34 +257,27 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0: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);
 }
 
-.c1:active {
+.c0: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);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: rgba(207,34,46,0.5);
   background-color: #f6f8fa;
 }
 
 <button
-  className="c0 c1"
+  className="c0"
   disabled={true}
 />
 `;
@@ -354,6 +342,10 @@ 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 {
@@ -373,35 +365,28 @@ exports[`ButtonInvisible renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0: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);
 }
 
-.c1:active {
+.c0: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);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0 c1"
+  className="c0"
 />
 `;
 
@@ -428,6 +413,11 @@ 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 {
@@ -447,32 +437,24 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
   opacity: 0.6;
 }
 
-.c1 {
-  color: #0969da;
-  background-color: transparent;
-  border: 0;
-  border-radius: 6px;
-  box-shadow: none;
-}
-
-.c1:disabled {
+.c0:disabled {
   color: #8c959f;
 }
 
-.c1:focus {
+.c0:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:hover {
+.c0:hover {
   background-color: #f3f4f6;
 }
 
-.c1:active {
+.c0:active {
   background-color: hsla(220,14%,94%,1);
 }
 
 <button
-  className="c0 c1"
+  className="c0"
   disabled={true}
 />
 `;
@@ -500,6 +482,10 @@ 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 {
@@ -519,35 +505,28 @@ exports[`ButtonOutline renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0: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);
 }
 
-.c1:active {
+.c0: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);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0 c1"
+  className="c0"
 />
 `;
 
@@ -574,6 +553,10 @@ 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 {
@@ -593,35 +576,28 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0: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);
 }
 
-.c1:active {
+.c0: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);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0 c1"
+  className="c0"
   disabled={true}
 />
 `;
@@ -649,6 +625,10 @@ 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 {
@@ -668,31 +648,24 @@ exports[`ButtonPrimary renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0:hover {
   background-color: #1a7f37;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:active {
+.c0:active {
   background-color: hsla(137,66%,28%,1);
   box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: rgba(255,255,255,0.8);
   background-color: #94d3a2;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0 c1"
+  className="c0"
 />
 `;
 
@@ -719,6 +692,10 @@ 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 {
@@ -738,31 +715,24 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0:hover {
   background-color: #1a7f37;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:active {
+.c0:active {
   background-color: hsla(137,66%,28%,1);
   box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: rgba(255,255,255,0.8);
   background-color: #94d3a2;
   border-color: rgba(31,35,40,0.15);
 }
 
 <button
-  className="c0 c1"
+  className="c0"
   disabled={true}
 />
 `;
diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
index 2fd625b933e..ba1610c7f2c 100644
--- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
@@ -461,6 +461,17 @@ 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;
@@ -483,17 +494,6 @@ 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,10 +1074,6 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = `
   display: flex;
 }
 
-.c4 {
-  margin-right: 4px;
-}
-
 .c6 > input {
   margin-left: 0;
   margin-right: 0;
@@ -1094,6 +1090,10 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = `
   flex-direction: column;
 }
 
+.c4 {
+  margin-right: 4px;
+}
+
 .c2 {
   font-size: 16px;
   padding: 0;
@@ -1748,6 +1748,17 @@ 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;
@@ -1761,17 +1772,6 @@ 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,32 +1944,6 @@ 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;
 }
@@ -1997,6 +1971,32 @@ 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 cAIjcu cubic-bezier(0.44,0.74,0.36,1);
-  animation: 170ms cAIjcu cubic-bezier(0.44,0.74,0.36,1);
+  -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);
 }
 
 .c12 {
@@ -2250,32 +2250,6 @@ 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;
 }
@@ -2303,6 +2277,32 @@ 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 cAIjcu cubic-bezier(0.44,0.74,0.36,1);
-  animation: 170ms cAIjcu cubic-bezier(0.44,0.74,0.36,1);
+  -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);
 }
 
 .c12 {
diff --git a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
index 5ff772c8f3b..eacd73368f9 100644
--- a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
@@ -23,6 +23,10 @@ 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 {
@@ -42,39 +46,32 @@ exports[`DropdownMenu renders consistently 1`] = `
   opacity: 0.6;
 }
 
-.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 {
+.c0:hover {
   background-color: #f3f4f6;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c1:focus {
+.c0:focus {
   outline: solid 2px #0969da;
 }
 
-.c1:active {
+.c0:active {
   background-color: hsla(220,14%,94%,1);
 }
 
-.c1:disabled {
+.c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(31,35,40,0.15);
 }
 
-.c2 {
+.c1 {
   margin-left: 4px;
 }
 
 <button
   aria-haspopup="true"
-  className="c0 c1"
+  className="c0"
   id="react-aria-1"
   onClick={[Function]}
   onKeyDown={[Function]}
@@ -83,7 +80,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 >
   <svg
     aria-hidden="true"
-    className="c2"
+    className="c1"
     fill="currentColor"
     focusable="false"
     height={16}