From 1378e771323a48e6084c5ffac7d93b54960f4a0e Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Wed, 27 Oct 2021 14:44:33 -0400
Subject: [PATCH] Replace flexbox gap property with better supported techniques
 (#1526)

* replaces flex-gap usage in components with different techniques

* cleans up silly mistakes

* adds changeset
---
 .changeset/silent-lions-prove.md              |    5 +
 src/TextInputWithTokens.tsx                   |   89 +-
 src/Token/Token.tsx                           |   18 +-
 src/Token/TokenBase.tsx                       |    5 -
 src/Token/_RemoveTokenButton.tsx              |   17 +-
 .../TextInputWithTokens.test.tsx.snap         | 6540 +++++++++--------
 .../__snapshots__/Token.test.tsx.snap         |   55 +-
 7 files changed, 3490 insertions(+), 3239 deletions(-)
 create mode 100644 .changeset/silent-lions-prove.md

diff --git a/.changeset/silent-lions-prove.md b/.changeset/silent-lions-prove.md
new file mode 100644
index 00000000000..ee7389ffbf6
--- /dev/null
+++ b/.changeset/silent-lions-prove.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+replaces flexbox gap usage with margins
diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx
index 19171db63fe..7868874d66a 100644
--- a/src/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens.tsx
@@ -1,4 +1,4 @@
-import React, {FocusEventHandler, KeyboardEventHandler, useRef, useState} from 'react'
+import React, {FocusEventHandler, KeyboardEventHandler, RefObject, useRef, useState} from 'react'
 import {omit} from '@styled-system/props'
 import {FocusKeys} from './behaviors/focusZone'
 import {useCombinedRefs} from './hooks/useCombinedRefs'
@@ -184,16 +184,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       minWidth={minWidthProp}
       maxWidth={maxWidthProp}
       variant={variantProp}
-      ref={containerRef}
       sx={{
-        alignItems: 'center',
-        flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-        gap: '0.25rem',
-
-        '> *': {
-          flexShrink: 0
-        },
-
         ...(block
           ? {
               display: 'flex',
@@ -218,40 +209,58 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       }}
     >
       <Box
+        ref={containerRef as RefObject<HTMLDivElement>}
+        display="flex"
         sx={{
-          order: 1,
-          flexGrow: 1
+          alignItems: 'center',
+          flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+          marginLeft: '-0.25rem',
+          marginBottom: '-0.25rem',
+          flexGrow: 1,
+
+          '> *': {
+            flexShrink: 0,
+            marginLeft: '0.25rem',
+            marginBottom: '0.25rem'
+          }
         }}
       >
-        {IconComponent && <IconComponent className="TextInput-icon" />}
-        <UnstyledTextInput
-          ref={combinedInputRef}
-          disabled={disabled}
-          onFocus={handleInputFocus}
-          onKeyDown={handleInputKeyDown}
-          type="text"
-          sx={{height: '100%'}}
-          {...inputPropsRest}
-        />
+        <Box
+          sx={{
+            order: 1,
+            flexGrow: 1
+          }}
+        >
+          {IconComponent && <IconComponent className="TextInput-icon" />}
+          <UnstyledTextInput
+            ref={combinedInputRef}
+            disabled={disabled}
+            onFocus={handleInputFocus}
+            onKeyDown={handleInputKeyDown}
+            type="text"
+            sx={{height: '100%'}}
+            {...inputPropsRest}
+          />
+        </Box>
+        {tokens.length && TokenComponent
+          ? tokens.map(({id, ...tokenRest}, i) => (
+              <TokenComponent
+                key={id}
+                onFocus={handleTokenFocus(i)}
+                onBlur={handleTokenBlur}
+                onKeyUp={handleTokenKeyUp}
+                isSelected={selectedTokenIndex === i}
+                onRemove={() => {
+                  handleTokenRemove(id)
+                }}
+                hideRemoveButton={hideTokenRemoveButtons}
+                size={size}
+                tabIndex={0}
+                {...tokenRest}
+              />
+            ))
+          : null}
       </Box>
-      {tokens.length && TokenComponent
-        ? tokens.map(({id, ...tokenRest}, i) => (
-            <TokenComponent
-              key={id}
-              onFocus={handleTokenFocus(i)}
-              onBlur={handleTokenBlur}
-              onKeyUp={handleTokenKeyUp}
-              isSelected={selectedTokenIndex === i}
-              onRemove={() => {
-                handleTokenRemove(id)
-              }}
-              hideRemoveButton={hideTokenRemoveButtons}
-              size={size}
-              tabIndex={0}
-              {...tokenRest}
-            />
-          ))
-        : null}
     </TextInputWrapper>
   )
 }
diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
index e4a010057ae..bfc369e4fde 100644
--- a/src/Token/Token.tsx
+++ b/src/Token/Token.tsx
@@ -44,9 +44,23 @@ const DefaultTokenStyled = styled(TokenBase)<TokenProps & {isTokenInteractive: b
   }}
 `
 
-const LeadingVisualContainer = styled('span')`
+const LeadingVisualContainer = styled('span')<Pick<TokenBaseProps, 'size'>>`
   flex-shrink: 0;
   line-height: 0;
+
+  ${props => {
+    switch (props.size) {
+      case 'large':
+      case 'extralarge':
+        return css`
+          margin-right: ${get('space.2')};
+        `
+      default:
+        return css`
+          margin-right: ${get('space.1')};
+        `
+    }
+  }}
 `
 
 const Token = forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement, TokenProps & SxProp>(
@@ -76,7 +90,7 @@ const Token = forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement
         ref={forwardedRef}
       >
         {LeadingVisual ? (
-          <LeadingVisualContainer>
+          <LeadingVisualContainer size={size}>
             <LeadingVisual />
           </LeadingVisualContainer>
         ) : null}
diff --git a/src/Token/TokenBase.tsx b/src/Token/TokenBase.tsx
index c5bf775cdd5..398deb0dcfe 100644
--- a/src/Token/TokenBase.tsx
+++ b/src/Token/TokenBase.tsx
@@ -48,7 +48,6 @@ const variants = variant<
     fontSize: number
     height: string
     lineHeight: string
-    gap: number
     paddingLeft: number
     paddingRight: number
     paddingTop: number
@@ -60,7 +59,6 @@ const variants = variant<
   variants: {
     small: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.small,
       // without setting lineHeight to match height, the "x" appears vertically mis-aligned
       lineHeight: tokenSizes.small,
@@ -73,7 +71,6 @@ const variants = variant<
     },
     medium: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.medium,
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
@@ -83,7 +80,6 @@ const variants = variant<
     },
     large: {
       fontSize: 0,
-      gap: 2,
       height: tokenSizes.large,
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
@@ -93,7 +89,6 @@ const variants = variant<
     },
     extralarge: {
       fontSize: 1,
-      gap: 2,
       height: tokenSizes.extralarge,
       lineHeight: tokenSizes.extralarge,
       paddingLeft: 3,
diff --git a/src/Token/_RemoveTokenButton.tsx b/src/Token/_RemoveTokenButton.tsx
index de6b85bca66..0eec78b9dc9 100644
--- a/src/Token/_RemoveTokenButton.tsx
+++ b/src/Token/_RemoveTokenButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {XIcon} from '@primer/octicons-react'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 import {variant} from 'styled-system'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
@@ -50,11 +50,24 @@ const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
   text-decoration: none;
   padding: 0;
   transform: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`};
-
   align-self: baseline;
   border: 0;
   border-radius: 999px;
 
+  ${props => {
+    switch (props.size) {
+      case 'large':
+      case 'extralarge':
+        return css`
+          margin-left: ${get('space.2')};
+        `
+      default:
+        return css`
+          margin-left: ${get('space.1')};
+        `
+    }
+  }}
+
   &:hover,
   &:focus {
     // TODO: choose a better functional color variable for this
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 592bcd6d5a5..10e7c19ef5f 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -2,6 +2,34 @@
 
 exports[`TextInputWithTokens renders as block layout 1`] = `
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -11,7 +39,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -22,7 +50,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -49,14 +77,6 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   padding: 6px 12px;
   display: block;
   width: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: 0.25rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -80,12 +100,6 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -97,19 +111,52 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
+    >
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
   </div>
 </span>
 `;
 
 exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -119,7 +166,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -130,7 +177,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -155,14 +202,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: 0.25rem;
   max-height: 20px;
   overflow: auto;
 }
@@ -183,13 +222,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c5 {
+.c6 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -224,22 +257,23 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 32px;
   width: 32px;
   position: relative;
   z-index: 1;
 }
 
-.c5:hover,
-.c5:focus {
+.c6:hover,
+.c6:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c5:active {
+.c6:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c4 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -265,11 +299,11 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   text-decoration: none;
 }
 
-.c4:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c4:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -278,7 +312,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   bottom: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -295,7 +329,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 14px;
-  gap: 8px;
   height: 32px;
   line-height: 32px;
   padding-left: 16px;
@@ -312,7 +345,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   position: relative;
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   color: #24292f;
 }
@@ -328,387 +361,420 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
-  </div>
-  <span
-    aria-label="zero, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
-      className="c4"
     >
-      zero
-    </span>
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
     <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      aria-label="zero, press backspace or delete to remove"
+      className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        zero
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="one, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="one, press backspace or delete to remove"
       className="c4"
-    >
-      one
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        one
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="two, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="two, press backspace or delete to remove"
       className="c4"
-    >
-      two
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        two
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="three, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="three, press backspace or delete to remove"
       className="c4"
-    >
-      three
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        three
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="four, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="four, press backspace or delete to remove"
       className="c4"
-    >
-      four
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        four
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="five, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="five, press backspace or delete to remove"
       className="c4"
-    >
-      five
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        five
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="six, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="six, press backspace or delete to remove"
       className="c4"
-    >
-      six
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        six
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="seven, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="seven, press backspace or delete to remove"
       className="c4"
-    >
-      seven
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        seven
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </span>
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -718,7 +784,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -729,7 +795,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -754,14 +820,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: 0.25rem;
 }
 
 .c0 .TextInput-icon {
@@ -780,13 +838,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c5 {
+.c6 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -821,22 +873,23 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 16px;
   width: 16px;
   position: relative;
   z-index: 1;
 }
 
-.c5:hover,
-.c5:focus {
+.c6:hover,
+.c6:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c5:active {
+.c6:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c4 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -862,11 +915,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   text-decoration: none;
 }
 
-.c4:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c4:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -875,7 +928,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   bottom: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -892,7 +945,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 16px;
   line-height: 16px;
   padding-left: 4px;
@@ -909,7 +961,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   position: relative;
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   color: #24292f;
 }
@@ -925,387 +977,420 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
-  </div>
-  <span
-    aria-label="zero, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="small"
-    tabIndex={0}
-  >
-    <span
-      className="c4"
     >
-      zero
-    </span>
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
     <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      aria-label="zero, press backspace or delete to remove"
+      className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="small"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        zero
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={12}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={12}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="one, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="small"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="small"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={12}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="one, press backspace or delete to remove"
       className="c4"
-    >
-      one
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="small"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        one
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={12}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={12}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="two, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="small"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="small"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={12}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="two, press backspace or delete to remove"
       className="c4"
-    >
-      two
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="small"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        two
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={12}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={12}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="three, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="small"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="small"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={12}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="three, press backspace or delete to remove"
       className="c4"
-    >
-      three
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="small"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        three
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={12}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={12}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="four, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="small"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="small"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={12}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="four, press backspace or delete to remove"
       className="c4"
-    >
-      four
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="small"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        four
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={12}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={12}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="five, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="small"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="small"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={12}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="five, press backspace or delete to remove"
       className="c4"
-    >
-      five
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="small"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        five
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={12}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={12}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="six, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="small"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="small"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={12}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="six, press backspace or delete to remove"
       className="c4"
-    >
-      six
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="small"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        six
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={12}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={12}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="seven, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="small"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="small"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={12}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="seven, press backspace or delete to remove"
       className="c4"
-    >
-      seven
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="small"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        seven
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={12}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={12}
-      />
+        className="c6"
+        onClick={[Function]}
+        size="small"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={12}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </span>
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -1315,7 +1400,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1326,7 +1411,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -1351,14 +1436,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: 0.25rem;
 }
 
 .c0 .TextInput-icon {
@@ -1377,13 +1454,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c5 {
+.c6 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -1418,22 +1489,23 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 20px;
   width: 20px;
   position: relative;
   z-index: 1;
 }
 
-.c5:hover,
-.c5:focus {
+.c6:hover,
+.c6:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c5:active {
+.c6:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c4 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1459,11 +1531,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   text-decoration: none;
 }
 
-.c4:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c4:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -1472,7 +1544,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   bottom: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1489,7 +1561,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -1506,7 +1577,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   position: relative;
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   color: #24292f;
 }
@@ -1522,387 +1593,420 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
-  </div>
-  <span
-    aria-label="zero, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="medium"
-    tabIndex={0}
-  >
-    <span
-      className="c4"
     >
-      zero
-    </span>
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
     <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      aria-label="zero, press backspace or delete to remove"
+      className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="medium"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        zero
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="one, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="medium"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="medium"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={15}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={15}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="one, press backspace or delete to remove"
       className="c4"
-    >
-      one
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="medium"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        one
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="two, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="medium"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="medium"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={15}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={15}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="two, press backspace or delete to remove"
       className="c4"
-    >
-      two
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="medium"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        two
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="three, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="medium"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="medium"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={15}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={15}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="three, press backspace or delete to remove"
       className="c4"
-    >
-      three
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="medium"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        three
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="four, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="medium"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="medium"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={15}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={15}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="four, press backspace or delete to remove"
       className="c4"
-    >
-      four
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="medium"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        four
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="five, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="medium"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="medium"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={15}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={15}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="five, press backspace or delete to remove"
       className="c4"
-    >
-      five
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="medium"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        five
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="six, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="medium"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="medium"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={15}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={15}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="six, press backspace or delete to remove"
       className="c4"
-    >
-      six
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="medium"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        six
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="seven, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="medium"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="medium"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={15}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={15}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="seven, press backspace or delete to remove"
       className="c4"
-    >
-      seven
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="medium"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        seven
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
+        className="c6"
+        onClick={[Function]}
+        size="medium"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={15}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={15}
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </span>
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -1912,7 +2016,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -1923,7 +2027,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -1948,14 +2052,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: 0.25rem;
 }
 
 .c0 .TextInput-icon {
@@ -1974,13 +2070,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c5 {
+.c6 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -2015,22 +2105,23 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 24px;
   width: 24px;
   position: relative;
   z-index: 1;
 }
 
-.c5:hover,
-.c5:focus {
+.c6:hover,
+.c6:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c5:active {
+.c6:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c4 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -2056,11 +2147,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   text-decoration: none;
 }
 
-.c4:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c4:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -2069,7 +2160,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   bottom: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2086,7 +2177,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 8px;
   height: 24px;
   line-height: 24px;
   padding-left: 8px;
@@ -2103,7 +2193,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   position: relative;
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   color: #24292f;
 }
@@ -2119,387 +2209,420 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
-  </div>
-  <span
-    aria-label="zero, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="large"
-    tabIndex={0}
-  >
-    <span
-      className="c4"
     >
-      zero
-    </span>
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
     <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      aria-label="zero, press backspace or delete to remove"
+      className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="large"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        zero
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={18}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={18}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="one, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="large"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="large"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={18}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={18}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="one, press backspace or delete to remove"
       className="c4"
-    >
-      one
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="large"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        one
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={18}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={18}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="two, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="large"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="large"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={18}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={18}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="two, press backspace or delete to remove"
       className="c4"
-    >
-      two
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="large"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        two
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={18}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={18}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="three, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="large"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="large"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={18}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={18}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="three, press backspace or delete to remove"
       className="c4"
-    >
-      three
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="large"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        three
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={18}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={18}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="four, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="large"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="large"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={18}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={18}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="four, press backspace or delete to remove"
       className="c4"
-    >
-      four
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="large"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        four
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={18}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={18}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="five, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="large"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="large"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={18}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={18}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="five, press backspace or delete to remove"
       className="c4"
-    >
-      five
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="large"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        five
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={18}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={18}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="six, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="large"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="large"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={18}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={18}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="six, press backspace or delete to remove"
       className="c4"
-    >
-      six
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="large"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        six
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={18}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={18}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="seven, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="large"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="large"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={18}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={18}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="seven, press backspace or delete to remove"
       className="c4"
-    >
-      seven
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="large"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        seven
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={18}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={18}
-      />
+        className="c6"
+        onClick={[Function]}
+        size="large"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={18}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={18}
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </span>
 `;
 
 exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -2509,7 +2632,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -2520,7 +2643,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -2545,14 +2668,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: 0.25rem;
 }
 
 .c0 .TextInput-icon {
@@ -2571,13 +2686,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c5 {
+.c6 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -2612,22 +2721,23 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 32px;
   width: 32px;
   position: relative;
   z-index: 1;
 }
 
-.c5:hover,
-.c5:focus {
+.c6:hover,
+.c6:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c5:active {
+.c6:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c4 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -2653,11 +2763,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   text-decoration: none;
 }
 
-.c4:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c4:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -2666,7 +2776,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   bottom: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2683,7 +2793,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 14px;
-  gap: 8px;
   height: 32px;
   line-height: 32px;
   padding-left: 16px;
@@ -2700,7 +2809,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   position: relative;
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   color: #24292f;
 }
@@ -2716,387 +2825,392 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
-  </div>
-  <span
-    aria-label="zero, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
-      className="c4"
     >
-      zero
-    </span>
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
     <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      aria-label="zero, press backspace or delete to remove"
+      className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        zero
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="one, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="one, press backspace or delete to remove"
       className="c4"
-    >
-      one
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        one
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="two, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="two, press backspace or delete to remove"
       className="c4"
-    >
-      two
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        two
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="three, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="three, press backspace or delete to remove"
       className="c4"
-    >
-      three
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        three
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="four, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="four, press backspace or delete to remove"
       className="c4"
-    >
-      four
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        four
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="five, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="five, press backspace or delete to remove"
       className="c4"
-    >
-      five
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        five
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="six, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="six, press backspace or delete to remove"
       className="c4"
-    >
-      six
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        six
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="seven, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="seven, press backspace or delete to remove"
       className="c4"
-    >
-      seven
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        seven
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </span>
 `;
 
 exports[`TextInputWithTokens renders tokens on a single line when specified 1`] = `
-.c1 {
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -3106,7 +3220,35 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   flex-grow: 1;
 }
 
-.c2 {
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3117,7 +3259,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -3142,14 +3284,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  gap: 0.25rem;
   overflow: auto;
 }
 
@@ -3169,13 +3303,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c5 {
+.c6 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -3210,22 +3338,23 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 32px;
   width: 32px;
   position: relative;
   z-index: 1;
 }
 
-.c5:hover,
-.c5:focus {
+.c6:hover,
+.c6:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c5:active {
+.c6:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c4 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3251,11 +3380,11 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   text-decoration: none;
 }
 
-.c4:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c4:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -3264,7 +3393,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   bottom: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3281,7 +3410,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   text-decoration: none;
   white-space: nowrap;
   font-size: 14px;
-  gap: 8px;
   height: 32px;
   line-height: 32px;
   padding-left: 16px;
@@ -3298,7 +3426,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   position: relative;
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   color: #24292f;
 }
@@ -3314,387 +3442,420 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
-  </div>
-  <span
-    aria-label="zero, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
-      className="c4"
     >
-      zero
-    </span>
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
     <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      aria-label="zero, press backspace or delete to remove"
+      className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        zero
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="one, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="one, press backspace or delete to remove"
       className="c4"
-    >
-      one
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        one
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="two, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="two, press backspace or delete to remove"
       className="c4"
-    >
-      two
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        two
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="three, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="three, press backspace or delete to remove"
       className="c4"
-    >
-      three
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        three
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="four, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="four, press backspace or delete to remove"
       className="c4"
-    >
-      four
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        four
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="five, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="five, press backspace or delete to remove"
       className="c4"
-    >
-      five
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        five
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="six, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="six, press backspace or delete to remove"
       className="c4"
-    >
-      six
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        six
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="seven, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="seven, press backspace or delete to remove"
       className="c4"
-    >
-      seven
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        seven
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </span>
 `;
 
 exports[`TextInputWithTokens renders tokens without a remove button when specified 1`] = `
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -3704,7 +3865,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   flex-grow: 1;
 }
 
-.c2 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -3715,7 +3876,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -3740,14 +3901,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: 0.25rem;
 }
 
 .c0 .TextInput-icon {
@@ -3766,13 +3919,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c4 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3798,11 +3945,11 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   text-decoration: none;
 }
 
-.c4:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c4:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -3811,7 +3958,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   bottom: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3828,7 +3975,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   text-decoration: none;
   white-space: nowrap;
   font-size: 14px;
-  gap: 8px;
   height: 32px;
   line-height: 32px;
   padding-left: 16px;
@@ -3844,7 +3990,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   position: relative;
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   color: #24292f;
 }
@@ -3860,155 +4006,188 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
-  </div>
-  <span
-    aria-label="zero, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
+    >
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
     <span
+      aria-label="zero, press backspace or delete to remove"
       className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="extralarge"
+      tabIndex={0}
     >
-      zero
+      <span
+        className="c5"
+      >
+        zero
+      </span>
     </span>
-  </span>
-  <span
-    aria-label="one, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
     <span
+      aria-label="one, press backspace or delete to remove"
       className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="extralarge"
+      tabIndex={0}
     >
-      one
+      <span
+        className="c5"
+      >
+        one
+      </span>
     </span>
-  </span>
-  <span
-    aria-label="two, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
     <span
+      aria-label="two, press backspace or delete to remove"
       className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="extralarge"
+      tabIndex={0}
     >
-      two
+      <span
+        className="c5"
+      >
+        two
+      </span>
     </span>
-  </span>
-  <span
-    aria-label="three, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
     <span
+      aria-label="three, press backspace or delete to remove"
       className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="extralarge"
+      tabIndex={0}
     >
-      three
+      <span
+        className="c5"
+      >
+        three
+      </span>
     </span>
-  </span>
-  <span
-    aria-label="four, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
     <span
+      aria-label="four, press backspace or delete to remove"
       className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="extralarge"
+      tabIndex={0}
     >
-      four
+      <span
+        className="c5"
+      >
+        four
+      </span>
     </span>
-  </span>
-  <span
-    aria-label="five, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
     <span
+      aria-label="five, press backspace or delete to remove"
       className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="extralarge"
+      tabIndex={0}
     >
-      five
+      <span
+        className="c5"
+      >
+        five
+      </span>
     </span>
-  </span>
-  <span
-    aria-label="six, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
     <span
+      aria-label="six, press backspace or delete to remove"
       className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="extralarge"
+      tabIndex={0}
     >
-      six
+      <span
+        className="c5"
+      >
+        six
+      </span>
     </span>
-  </span>
-  <span
-    aria-label="seven, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
     <span
+      aria-label="seven, press backspace or delete to remove"
       className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="extralarge"
+      tabIndex={0}
     >
-      seven
+      <span
+        className="c5"
+      >
+        seven
+      </span>
     </span>
-  </span>
+  </div>
 </span>
 `;
 
 exports[`TextInputWithTokens renders with tokens 1`] = `
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -4018,7 +4197,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4029,7 +4208,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -4054,14 +4233,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: 0.25rem;
 }
 
 .c0 .TextInput-icon {
@@ -4080,13 +4251,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c5 {
+.c6 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -4121,22 +4286,23 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 32px;
   width: 32px;
   position: relative;
   z-index: 1;
 }
 
-.c5:hover,
-.c5:focus {
+.c6:hover,
+.c6:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c5:active {
+.c6:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c4 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -4162,11 +4328,11 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   text-decoration: none;
 }
 
-.c4:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c4:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -4175,7 +4341,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   bottom: 0;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -4192,7 +4358,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 14px;
-  gap: 8px;
   height: 32px;
   line-height: 32px;
   padding-left: 16px;
@@ -4209,7 +4374,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   position: relative;
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgba(175,184,193,0.2);
   color: #24292f;
 }
@@ -4225,387 +4390,420 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
-  </div>
-  <span
-    aria-label="zero, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
-      className="c4"
     >
-      zero
-    </span>
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
     <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      aria-label="zero, press backspace or delete to remove"
+      className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        zero
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="one, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="one, press backspace or delete to remove"
       className="c4"
-    >
-      one
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        one
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="two, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="two, press backspace or delete to remove"
       className="c4"
-    >
-      two
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        two
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="three, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="three, press backspace or delete to remove"
       className="c4"
-    >
-      three
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        three
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="four, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="four, press backspace or delete to remove"
       className="c4"
-    >
-      four
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        four
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="five, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="five, press backspace or delete to remove"
       className="c4"
-    >
-      five
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        five
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="six, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="six, press backspace or delete to remove"
       className="c4"
-    >
-      six
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        six
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="seven, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="seven, press backspace or delete to remove"
       className="c4"
-    >
-      seven
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        seven
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </span>
 `;
 
 exports[`TextInputWithTokens renders with tokens using a custom token component 1`] = `
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -4615,7 +4813,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   flex-grow: 1;
 }
 
-.c2 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -4626,7 +4824,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -4651,14 +4849,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: 0.25rem;
 }
 
 .c0 .TextInput-icon {
@@ -4677,13 +4867,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -4700,7 +4884,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   text-decoration: none;
   white-space: nowrap;
   font-size: 14px;
-  gap: 8px;
   height: 32px;
   line-height: 32px;
   padding-left: 16px;
@@ -4727,7 +4910,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
 }
 
-.c5 {
+.c6 {
   background-color: transparent;
   font-family: inherit;
   color: currentColor;
@@ -4762,22 +4945,23 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 32px;
   width: 32px;
   position: relative;
   z-index: 1;
 }
 
-.c5:hover,
-.c5:focus {
+.c6:hover,
+.c6:focus {
   background-color: rgba(175,184,193,0.2);
 }
 
-.c5:active {
+.c6:active {
   background-color: rgba(234,238,242,0.5);
 }
 
-.c4 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -4803,11 +4987,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   text-decoration: none;
 }
 
-.c4:is(a,button,[tabIndex='0']) {
+.c5:is(a,button,[tabIndex='0']) {
   cursor: pointer;
 }
 
-.c4:is(a,button,[tabIndex='0']):after {
+.c5:is(a,button,[tabIndex='0']):after {
   content: '';
   position: absolute;
   left: 0;
@@ -4827,387 +5011,420 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
-  </div>
-  <span
-    aria-label="zero, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
-      className="c4"
     >
-      zero
-    </span>
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
     <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      aria-label="zero, press backspace or delete to remove"
+      className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        zero
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="one, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="one, press backspace or delete to remove"
       className="c4"
-    >
-      one
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        one
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="two, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="two, press backspace or delete to remove"
       className="c4"
-    >
-      two
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        two
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="three, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="three, press backspace or delete to remove"
       className="c4"
-    >
-      three
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        three
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="four, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="four, press backspace or delete to remove"
       className="c4"
-    >
-      four
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        four
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="five, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="five, press backspace or delete to remove"
       className="c4"
-    >
-      five
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        five
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="six, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="six, press backspace or delete to remove"
       className="c4"
-    >
-      six
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        six
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
-    </span>
-  </span>
-  <span
-    aria-label="seven, press backspace or delete to remove"
-    className="c3"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onRemove={[Function]}
-    size="extralarge"
-    tabIndex={0}
-  >
-    <span
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="seven, press backspace or delete to remove"
       className="c4"
-    >
-      seven
-    </span>
-    <span
-      aria-hidden="true"
-      className="c5"
-      onClick={[Function]}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
       size="extralarge"
-      tabIndex={-1}
-    >
-      <svg
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+      >
+        seven
+      </span>
+      <span
         aria-hidden="true"
-        className="octicon octicon-x"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={24}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 24 24"
-        width={24}
-      />
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
     </span>
-  </span>
+  </div>
 </span>
 `;
 
 exports[`TextInputWithTokens renders without tokens 1`] = `
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
@@ -5217,7 +5434,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   flex-grow: 1;
 }
 
-.c2 {
+.c3 {
   border: 0;
   font-size: inherit;
   font-family: inherit;
@@ -5228,7 +5445,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   height: 100%;
 }
 
-.c2:focus {
+.c3:focus {
   outline: 0;
 }
 
@@ -5253,14 +5470,6 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: 0.25rem;
 }
 
 .c0 .TextInput-icon {
@@ -5279,12 +5488,6 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c0 > * {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
 @media (min-width:768px) {
   .c0 {
     font-size: 14px;
@@ -5296,13 +5499,18 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 >
   <div
     className="c1"
+    display="flex"
   >
-    <input
+    <div
       className="c2"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-    />
+    >
+      <input
+        className="c3"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
   </div>
 </span>
 `;
diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap
index 03e2d83263d..fb7ad3a693c 100644
--- a/src/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Token.test.tsx.snap
@@ -46,6 +46,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 16px;
   width: 16px;
 }
@@ -115,7 +116,6 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 16px;
   line-height: 16px;
   padding-left: 4px;
@@ -139,6 +139,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   -ms-flex-negative: 0;
   flex-shrink: 0;
   line-height: 0;
+  margin-right: 4px;
 }
 
 .c2 {
@@ -157,6 +158,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
 >
   <span
     className="c1"
+    size="small"
   >
     <span
       className="c2"
@@ -254,6 +256,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 20px;
   width: 20px;
 }
@@ -323,7 +326,6 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -347,6 +349,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   -ms-flex-negative: 0;
   flex-shrink: 0;
   line-height: 0;
+  margin-right: 4px;
 }
 
 .c2 {
@@ -365,6 +368,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
 >
   <span
     className="c1"
+    size="medium"
   >
     <span
       className="c2"
@@ -462,6 +466,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 24px;
   width: 24px;
 }
@@ -531,7 +536,6 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 8px;
   height: 24px;
   line-height: 24px;
   padding-left: 8px;
@@ -555,6 +559,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   -ms-flex-negative: 0;
   flex-shrink: 0;
   line-height: 0;
+  margin-right: 8px;
 }
 
 .c2 {
@@ -573,6 +578,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
 >
   <span
     className="c1"
+    size="large"
   >
     <span
       className="c2"
@@ -670,6 +676,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 32px;
   width: 32px;
 }
@@ -739,7 +746,6 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 14px;
-  gap: 8px;
   height: 32px;
   line-height: 32px;
   padding-left: 16px;
@@ -763,6 +769,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   -ms-flex-negative: 0;
   flex-shrink: 0;
   line-height: 0;
+  margin-right: 8px;
 }
 
 .c2 {
@@ -781,6 +788,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
 >
   <span
     className="c1"
+    size="extralarge"
   >
     <span
       className="c2"
@@ -889,7 +897,6 @@ exports[`Token components AvatarToken renders consistently 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -983,7 +990,6 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -1006,6 +1012,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
   -ms-flex-negative: 0;
   flex-shrink: 0;
   line-height: 0;
+  margin-right: 4px;
 }
 
 .c2 {
@@ -1022,6 +1029,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
 >
   <span
     className="c1"
+    size="medium"
   >
     <span
       className="c2"
@@ -1090,6 +1098,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 20px;
   width: 20px;
 }
@@ -1159,7 +1168,6 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -1183,6 +1191,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   -ms-flex-negative: 0;
   flex-shrink: 0;
   line-height: 0;
+  margin-right: 4px;
 }
 
 .c2 {
@@ -1201,6 +1210,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
 >
   <span
     className="c1"
+    size="medium"
   >
     <span
       className="c2"
@@ -1270,7 +1280,6 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 16px;
   line-height: 16px;
   padding-left: 4px;
@@ -1332,6 +1341,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 16px;
   width: 16px;
 }
@@ -1446,7 +1456,6 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -1508,6 +1517,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 20px;
   width: 20px;
 }
@@ -1622,7 +1632,6 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 8px;
   height: 24px;
   line-height: 24px;
   padding-left: 8px;
@@ -1684,6 +1693,7 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 24px;
   width: 24px;
 }
@@ -1798,7 +1808,6 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 14px;
-  gap: 8px;
   height: 32px;
   line-height: 32px;
   padding-left: 16px;
@@ -1860,6 +1869,7 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 32px;
   width: 32px;
 }
@@ -2013,7 +2023,6 @@ exports[`Token components IssueLabelToken renders consistently 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -2058,7 +2067,6 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -2120,6 +2128,7 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 20px;
   width: 20px;
 }
@@ -2234,7 +2243,6 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -2296,6 +2304,7 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 20px;
   width: 20px;
 }
@@ -2410,7 +2419,6 @@ exports[`Token components IssueLabelToken renders isSelected 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -2524,7 +2532,6 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -2586,6 +2593,7 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 20px;
   width: 20px;
 }
@@ -2718,6 +2726,7 @@ exports[`Token components Token renders all sizes 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 16px;
   width: 16px;
 }
@@ -2787,7 +2796,6 @@ exports[`Token components Token renders all sizes 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 16px;
   line-height: 16px;
   padding-left: 4px;
@@ -2884,6 +2892,7 @@ exports[`Token components Token renders all sizes 2`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 20px;
   width: 20px;
 }
@@ -2953,7 +2962,6 @@ exports[`Token components Token renders all sizes 2`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -3050,6 +3058,7 @@ exports[`Token components Token renders all sizes 3`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 24px;
   width: 24px;
 }
@@ -3119,7 +3128,6 @@ exports[`Token components Token renders all sizes 3`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 8px;
   height: 24px;
   line-height: 24px;
   padding-left: 8px;
@@ -3216,6 +3224,7 @@ exports[`Token components Token renders all sizes 4`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 8px;
   height: 32px;
   width: 32px;
 }
@@ -3285,7 +3294,6 @@ exports[`Token components Token renders all sizes 4`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 14px;
-  gap: 8px;
   height: 32px;
   line-height: 32px;
   padding-left: 16px;
@@ -3403,7 +3411,6 @@ exports[`Token components Token renders consistently 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -3487,7 +3494,6 @@ exports[`Token components Token renders isSelected 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -3573,7 +3579,6 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;
@@ -3594,6 +3599,7 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
   -ms-flex-negative: 0;
   flex-shrink: 0;
   line-height: 0;
+  margin-right: 4px;
 }
 
 <span
@@ -3603,6 +3609,7 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
 >
   <span
     className="c1"
+    size="medium"
   >
     <div
       style={
@@ -3656,6 +3663,7 @@ exports[`Token components Token renders with a remove button 1`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
+  margin-left: 4px;
   height: 20px;
   width: 20px;
 }
@@ -3725,7 +3733,6 @@ exports[`Token components Token renders with a remove button 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  gap: 4px;
   height: 20px;
   line-height: 20px;
   padding-left: 8px;