diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png
index 59316f1eac5..71a556920ad 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png
index 59316f1eac5..71a556920ad 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png
index 6dc0c91a7cf..63a5334ac5b 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png
index a250e79d82b..395bd12f740 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png differ
diff --git a/examples/theming/package.json b/examples/theming/package.json
index ae1e7ad48db..f43a50be556 100644
--- a/examples/theming/package.json
+++ b/examples/theming/package.json
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/octicons-react": "^19.9.0",
+    "@primer/octicons-react": "^19.14.0",
     "@primer/react": "37.9.1",
     "clsx": "^1.2.1",
     "next": "^14.2.15",
diff --git a/package-lock.json b/package-lock.json
index cee50500406..668646abaf6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -99,7 +99,7 @@
       "name": "example-theming",
       "version": "0.0.0",
       "dependencies": {
-        "@primer/octicons-react": "^19.9.0",
+        "@primer/octicons-react": "^19.14.0",
         "@primer/react": "37.9.1",
         "clsx": "^1.2.1",
         "next": "^14.2.15",
@@ -6060,9 +6060,9 @@
       }
     },
     "node_modules/@primer/octicons-react": {
-      "version": "19.13.0",
-      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.13.0.tgz",
-      "integrity": "sha512-EhE/d7SenURyL24iz8+2ZgZtMbT2vYvDzl/e2lAznxcYa2uhP8CWbKCKy2dqW/FPf4ZREGcvN+fecsjqIi8KVQ==",
+      "version": "19.14.0",
+      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.14.0.tgz",
+      "integrity": "sha512-EKeavGV7s2HYac3ybb+6vfyqHGMUeG+OlZAus5ORfEjzXlorDAIjZ59fszVJj9DI6ArfFK/Cvg8V4JRfeUHjcw==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
index e3848f074b3..773d889325c 100644
--- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -1363,11 +1363,13 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
               >
                 <svg
                   aria-hidden="true"
-                  class="c9"
+                  class="octicon octicon-chevron-down c9"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -1884,11 +1886,13 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
               >
                 <svg
                   aria-hidden="true"
-                  class="c9"
+                  class="octicon octicon-chevron-down c9"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
diff --git a/packages/react/src/Octicon/Octicon.tsx b/packages/react/src/Octicon/Octicon.tsx
index 4257b638c5c..a0c52454789 100644
--- a/packages/react/src/Octicon/Octicon.tsx
+++ b/packages/react/src/Octicon/Octicon.tsx
@@ -5,7 +5,7 @@ import type {SxProp} from '../sx'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 
-type StyledOcticonProps = {icon: React.ElementType; color?: string} & IconProps
+type StyledOcticonProps = {icon: React.ElementType; color?: string} & IconProps & SxProp
 
 const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref<SVGSVGElement>) => {
   const {icon: IconComponent, ...rest} = props
@@ -15,7 +15,11 @@ const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref<SVGSVGE
 /**
  * @deprecated Use the icon component directly from `@primer/octicons-react` instead
  */
-const Octicon = styled(Icon)<SxProp>`
+const Octicon = styled(Icon).withConfig({
+  shouldForwardProp(prop) {
+    return prop !== 'sx'
+  },
+})<SxProp>`
   ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}
 `
 
diff --git a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
index 66f67f91bdf..0f1fb59491d 100644
--- a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
+++ b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
@@ -34,16 +34,15 @@ exports[`StateLabel renders children 1`] = `
 >
   <svg
     aria-label="Issue"
-    className="c1"
+    className="octicon octicon-issue-opened c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -95,16 +94,15 @@ exports[`StateLabel respects the status prop 1`] = `
 >
   <svg
     aria-label="Issue"
-    className="c1"
+    className="octicon octicon-issue-opened c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -155,16 +153,15 @@ exports[`StateLabel respects the status prop 2`] = `
 >
   <svg
     aria-label="Issue"
-    className="c1"
+    className="octicon octicon-issue-closed c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -215,16 +212,15 @@ exports[`StateLabel respects the status prop 3`] = `
 >
   <svg
     aria-label="Issue, not planned"
-    className="c1"
+    className="octicon octicon-skip c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -272,16 +268,15 @@ exports[`StateLabel respects the status prop 4`] = `
 >
   <svg
     aria-label="Pull request"
-    className="c1"
+    className="octicon octicon-git-merge c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -329,16 +324,15 @@ exports[`StateLabel respects the status prop 5`] = `
 >
   <svg
     aria-label="Pull request"
-    className="c1"
+    className="octicon octicon-git-merge-queue c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -386,16 +380,15 @@ exports[`StateLabel respects the variant prop 1`] = `
 >
   <svg
     aria-label="Issue"
-    className="c1"
+    className="octicon octicon-issue-opened c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -446,16 +439,15 @@ exports[`StateLabel respects the variant prop 2`] = `
 >
   <svg
     aria-label="Issue"
-    className="c1"
+    className="octicon octicon-issue-opened c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
diff --git a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
index 31d7160ce05..04467681b46 100644
--- a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
@@ -203,14 +203,13 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={12}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -428,14 +427,13 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={15}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -653,14 +651,13 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={18}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -880,14 +877,13 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={24}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -1231,14 +1227,13 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={15}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -1405,14 +1400,13 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={12}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -1579,14 +1573,13 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={15}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -1753,14 +1746,13 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={18}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -1929,14 +1921,13 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={24}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -2103,14 +2094,13 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={15}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -2277,14 +2267,13 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={15}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -2562,14 +2551,13 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={15}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -2743,14 +2731,13 @@ exports[`Token components Token renders all sizes 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={12}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -2924,14 +2911,13 @@ exports[`Token components Token renders all sizes 2`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={15}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -3105,14 +3091,13 @@ exports[`Token components Token renders all sizes 3`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={18}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -3288,14 +3273,13 @@ exports[`Token components Token renders all sizes 4`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={24}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -3652,14 +3636,13 @@ exports[`Token components Token renders with a remove button 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={15}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index f5301afd6c0..e4f71f1aad4 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -1542,14 +1542,13 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             <svg
               aria-hidden="true"
               className="octicon octicon-plus"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height={16}
+              overflow="visible"
               style={
                 {
-                  "display": "inline-block",
-                  "overflow": "visible",
-                  "userSelect": "none",
                   "verticalAlign": "text-bottom",
                 }
               }
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 6996356cf3f..75591069aaa 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1413,14 +1413,13 @@ exports[`TextInput renders leadingVisual 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-search"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={16}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -1678,14 +1677,13 @@ exports[`TextInput renders leadingVisual 2`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-search"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={16}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -3321,14 +3319,13 @@ exports[`TextInput renders trailingAction icon button 1`] = `
       <svg
         aria-hidden="true"
         className="octicon octicon-search"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height={16}
+        overflow="visible"
         style={
           {
-            "display": "inline-block",
-            "overflow": "visible",
-            "userSelect": "none",
             "verticalAlign": "text-bottom",
           }
         }
@@ -4357,14 +4354,13 @@ exports[`TextInput renders trailingVisual 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-search"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={16}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -4622,14 +4618,13 @@ exports[`TextInput renders trailingVisual 2`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-search"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={16}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -6400,14 +6395,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -6799,14 +6793,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -7199,14 +7192,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -7606,14 +7598,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8006,14 +7997,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8355,14 +8345,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8707,14 +8696,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8795,14 +8783,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9146,14 +9133,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9234,14 +9220,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9586,14 +9571,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9674,14 +9658,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-search"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index d06043e9a98..1175243306b 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -423,14 +423,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-mark-github"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={16}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -490,14 +489,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -542,14 +540,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -594,14 +591,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -646,14 +642,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -698,14 +693,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -750,14 +744,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -802,14 +795,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -854,14 +846,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -882,14 +873,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
     <svg
       aria-hidden="true"
       className="octicon octicon-mark-github"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height={16}
+      overflow="visible"
       style={
         {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
@@ -1402,14 +1392,13 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -1454,14 +1443,13 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -2259,14 +2247,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -2311,14 +2298,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -2363,14 +2349,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -2415,14 +2400,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -2467,14 +2451,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -2519,14 +2502,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -2571,14 +2553,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -2623,14 +2604,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -3107,14 +3087,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={12}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -3159,14 +3138,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={12}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -3211,14 +3189,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={12}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -3263,14 +3240,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={12}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -3315,14 +3291,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={12}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -3367,14 +3342,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={12}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -3419,14 +3393,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={12}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -3471,14 +3444,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={12}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -3955,14 +3927,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={15}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4007,14 +3978,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={15}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4059,14 +4029,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={15}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4111,14 +4080,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={15}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4163,14 +4131,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={15}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4215,14 +4182,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={15}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4267,14 +4233,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={15}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4319,14 +4284,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={15}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4803,14 +4767,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={18}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4855,14 +4818,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={18}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4907,14 +4869,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={18}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -4959,14 +4920,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={18}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5011,14 +4971,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={18}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5063,14 +5022,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={18}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5115,14 +5073,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={18}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5167,14 +5124,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={18}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5653,14 +5609,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5705,14 +5660,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5757,14 +5711,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5809,14 +5762,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5861,14 +5813,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5913,14 +5864,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -5965,14 +5915,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -6017,14 +5966,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -6506,14 +6454,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -6558,14 +6505,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -6610,14 +6556,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -6662,14 +6607,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -6714,14 +6658,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -6766,14 +6709,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -6818,14 +6760,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -6870,14 +6811,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -7924,14 +7864,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -7976,14 +7915,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8028,14 +7966,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8080,14 +8017,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8132,14 +8068,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8184,14 +8119,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8236,14 +8170,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8288,14 +8221,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8878,14 +8810,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8930,14 +8861,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -8982,14 +8912,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9034,14 +8963,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9086,14 +9014,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9138,14 +9065,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9190,14 +9116,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9242,14 +9167,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9783,14 +9707,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9835,14 +9758,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9887,14 +9809,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9939,14 +9860,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -9991,14 +9911,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -10043,14 +9962,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -10095,14 +10013,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -10147,14 +10064,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -10668,14 +10584,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -10776,14 +10691,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -10828,14 +10742,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -10880,14 +10793,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -10932,14 +10844,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -10984,14 +10895,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -11036,14 +10946,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -11088,14 +10997,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -11140,14 +11048,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -11661,14 +11568,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -11769,14 +11675,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -11821,14 +11726,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -11873,14 +11777,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -11925,14 +11828,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -11977,14 +11879,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -12029,14 +11930,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -12081,14 +11981,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -12133,14 +12032,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -12655,14 +12553,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -12763,14 +12660,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -12815,14 +12711,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -12867,14 +12762,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -12919,14 +12813,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -12971,14 +12864,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -13023,14 +12915,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -13075,14 +12966,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -13127,14 +13017,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -13677,14 +13566,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -13729,14 +13617,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -13781,14 +13668,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -13833,14 +13719,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -13885,14 +13770,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -13937,14 +13821,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -13989,14 +13872,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -14041,14 +13923,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -14075,14 +13956,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -14671,14 +14551,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -14723,14 +14602,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -14775,14 +14653,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -14827,14 +14704,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -14879,14 +14755,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -14931,14 +14806,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -14983,14 +14857,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -15035,14 +14908,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -15069,14 +14941,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -15615,14 +15486,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -15667,14 +15537,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -15719,14 +15588,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -15771,14 +15639,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -15823,14 +15690,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -15875,14 +15741,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -15927,14 +15792,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -15979,14 +15843,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -16013,14 +15876,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -16538,14 +16400,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -16646,14 +16507,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={12}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -16698,14 +16558,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={12}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -16750,14 +16609,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={12}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -16802,14 +16660,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={12}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -16854,14 +16711,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={12}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -16906,14 +16762,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={12}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -16958,14 +16813,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={12}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -17010,14 +16864,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={12}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -17044,14 +16897,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -17571,14 +17423,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -17679,14 +17530,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -17731,14 +17581,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -17783,14 +17632,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -17835,14 +17683,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -17887,14 +17734,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -17939,14 +17785,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -17991,14 +17836,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -18043,14 +17887,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={24}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -18077,14 +17920,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -18602,14 +18444,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -18710,14 +18551,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={18}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -18762,14 +18602,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={18}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -18814,14 +18653,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={18}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -18866,14 +18704,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={18}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -18918,14 +18755,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={18}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -18970,14 +18806,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={18}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -19022,14 +18857,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={18}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -19074,14 +18908,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-x"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={18}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -19108,14 +18941,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           <svg
             aria-hidden="true"
             className="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height={16}
+            overflow="visible"
             style={
               {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
             }
@@ -19634,14 +19466,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -19686,14 +19517,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -19738,14 +19568,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -19790,14 +19619,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -19842,14 +19670,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -19894,14 +19721,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -19946,14 +19772,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -19998,14 +19823,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -20478,14 +20302,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -20525,14 +20348,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -20572,14 +20394,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -20619,14 +20440,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -20666,14 +20486,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -20713,14 +20532,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -20760,14 +20578,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
@@ -20807,14 +20624,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         <svg
           aria-hidden="true"
           className="octicon octicon-x"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height={24}
+          overflow="visible"
           style={
             {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }