From c77e73b8e66d21e225454d6ccb6d352f453497c3 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 24 Mar 2022 15:55:56 -0400
Subject: [PATCH 1/6] adds 'xlarge' token size to align w/ ADR

---
 docs/content/TextInputWithTokens.mdx          |    4 +-
 docs/content/Token.mdx                        |   12 +-
 src/TextInputWithTokens.tsx                   |    8 +-
 src/Token/Token.tsx                           |    1 +
 src/Token/TokenBase.tsx                       |   30 +-
 src/Token/_RemoveTokenButton.tsx              |    6 +
 .../TextInputWithTokens.test.tsx.snap         | 1308 +++++++++++++----
 .../__snapshots__/Token.test.tsx.snap         |  641 +++++++-
 src/stories/TextInputWithTokens.stories.tsx   |    4 +-
 9 files changed, 1630 insertions(+), 384 deletions(-)

diff --git a/docs/content/TextInputWithTokens.mdx b/docs/content/TextInputWithTokens.mdx
index 52c35873354..d8978aad5d8 100644
--- a/docs/content/TextInputWithTokens.mdx
+++ b/docs/content/TextInputWithTokens.mdx
@@ -419,8 +419,8 @@ render(<WithIconAndLoadingIndicator />)
   />
   <PropsTableRow
     name="size"
-    type="'small' | 'medium' | 'large' | 'extralarge'"
-    defaultValue="extralarge"
+    type="'small' | 'medium' | 'large' | 'xlarge'"
+    defaultValue="xlarge"
     description="The size of the tokens and text input"
   />
   <PropsTableRow
diff --git a/docs/content/Token.mdx b/docs/content/Token.mdx
index f2a735c6e83..fd597c2e2fc 100644
--- a/docs/content/Token.mdx
+++ b/docs/content/Token.mdx
@@ -103,8 +103,8 @@ All types of tokens may have the same interactive qualities as links or buttons.
         }}
       />
       <Token
-        size="extralarge"
-        text="'extralarge' Token"
+        size="xlarge"
+        text="'xlarge' Token"
         onRemove={() => {
           console.log('remove me')
         }}
@@ -267,8 +267,8 @@ Tokens that represent Issue labels should use the `IssueLabelToken` component.
       />
       <IssueLabelToken
         fillColor="#0366d6"
-        size="extralarge"
-        text="'extralarge' Token"
+        size="xlarge"
+        text="'xlarge' Token"
         onRemove={() => {
           console.log('remove me')
         }}
@@ -355,8 +355,8 @@ Tokens that represent GitHub users should use the `AvatarToken` component.
       />
       <AvatarToken
         avatarSrc="https://avatars.githubusercontent.com/mperrotti"
-        size="extralarge"
-        text="'extralarge' Token"
+        size="xlarge"
+        text="'xlarge' Token"
         onRemove={() => {
           console.log('remove me')
         }}
diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx
index 4ab12930433..6d7b79997f0 100644
--- a/src/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens.tsx
@@ -59,7 +59,8 @@ const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
   small: 0,
   medium: 1,
   large: 1,
-  extralarge: 2
+  extralarge: 2,
+  xlarge: 2 // will eventually replace "extralarge" per this ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md
 }
 
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
@@ -239,7 +240,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     small: 'small',
     medium: 'small',
     large: 'medium',
-    extralarge: 'medium'
+    extralarge: 'medium',
+    xlarge: 'medium' // will eventually replace "extralarge" per this ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md
   }
   const showLeadingLoadingIndicator =
     loading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing'))
@@ -370,7 +372,7 @@ const TextInputWithTokens = React.forwardRef(TextInputWithTokensInnerComponent)
 
 TextInputWithTokens.defaultProps = {
   tokenComponent: Token,
-  size: 'extralarge',
+  size: 'xlarge',
   hideTokenRemoveButtons: false,
   preventTokenWrapping: false,
   loaderPosition: 'auto'
diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
index bfc369e4fde..1ccfec414f3 100644
--- a/src/Token/Token.tsx
+++ b/src/Token/Token.tsx
@@ -52,6 +52,7 @@ const LeadingVisualContainer = styled('span')<Pick<TokenBaseProps, 'size'>>`
     switch (props.size) {
       case 'large':
       case 'extralarge':
+      case 'xlarge':
         return css`
           margin-right: ${get('space.2')};
         `
diff --git a/src/Token/TokenBase.tsx b/src/Token/TokenBase.tsx
index 398deb0dcfe..d93294106c3 100644
--- a/src/Token/TokenBase.tsx
+++ b/src/Token/TokenBase.tsx
@@ -4,13 +4,18 @@ import {variant} from 'styled-system'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 
-export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'extralarge'
+// TODO: remove invalid "extralarge" size name in next breaking change
+// ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md
+export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'extralarge' | 'xlarge'
+
+const xlargeSize = '32px'
 
 export const tokenSizes: Record<TokenSizeKeys, string> = {
   small: '16px',
   medium: '20px',
   large: '24px',
-  extralarge: '32px'
+  extralarge: xlargeSize,
+  xlarge: xlargeSize
 }
 
 export const defaultTokenSize: TokenSizeKeys = 'medium'
@@ -43,6 +48,16 @@ export interface TokenBaseProps
 export const isTokenInteractive = ({as = 'span', onClick, onFocus, tabIndex = -1}: TokenBaseProps) =>
   Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as))
 
+const xlargeVariantStyles = {
+  fontSize: 1,
+  height: tokenSizes.xlarge,
+  lineHeight: tokenSizes.xlarge,
+  paddingLeft: 3,
+  paddingRight: 3,
+  paddingTop: 0,
+  paddingBottom: 0
+}
+
 const variants = variant<
   {
     fontSize: number
@@ -87,15 +102,8 @@ const variants = variant<
       paddingTop: 0,
       paddingBottom: 0
     },
-    extralarge: {
-      fontSize: 1,
-      height: tokenSizes.extralarge,
-      lineHeight: tokenSizes.extralarge,
-      paddingLeft: 3,
-      paddingRight: 3,
-      paddingTop: 0,
-      paddingBottom: 0
-    }
+    extralarge: xlargeVariantStyles,
+    xlarge: xlargeVariantStyles
   }
 })
 
diff --git a/src/Token/_RemoveTokenButton.tsx b/src/Token/_RemoveTokenButton.tsx
index 0eec78b9dc9..1bd9a08a26a 100644
--- a/src/Token/_RemoveTokenButton.tsx
+++ b/src/Token/_RemoveTokenButton.tsx
@@ -31,6 +31,11 @@ const variants = variant<{height: string; width: string}, TokenSizeKeys>({
     extralarge: {
       height: tokenSizes.extralarge,
       width: tokenSizes.extralarge
+    },
+    // xlarge will eventually replace "extralarge" per this ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md
+    xlarge: {
+      height: tokenSizes.xlarge,
+      width: tokenSizes.xlarge
     }
   }
 })
@@ -58,6 +63,7 @@ const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
     switch (props.size) {
       case 'large':
       case 'extralarge':
+      case 'xlarge':
         return css`
           margin-left: ${get('space.2')};
         `
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index c4f02a602bc..85f6c7182f7 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -320,7 +320,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -333,7 +333,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -368,7 +368,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -381,7 +381,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -416,7 +416,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -429,7 +429,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -464,7 +464,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -477,7 +477,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -512,7 +512,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -525,7 +525,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -560,7 +560,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -573,7 +573,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -608,7 +608,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -621,7 +621,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -656,7 +656,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -669,7 +669,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -1025,7 +1025,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -1038,7 +1038,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -1073,7 +1073,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -1086,7 +1086,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -1600,7 +1600,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -1613,7 +1613,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -1648,7 +1648,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -1661,7 +1661,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -1696,7 +1696,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -1709,7 +1709,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -1744,7 +1744,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -1757,7 +1757,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -1792,7 +1792,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -1805,7 +1805,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -1840,7 +1840,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -1853,7 +1853,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -1888,7 +1888,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -1901,7 +1901,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -1936,7 +1936,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -1949,7 +1949,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -3636,7 +3636,681 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="large"
+      size="large"
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+        onClick={[Function]}
+      >
+        zero
+      </span>
+      <span
+        aria-hidden="true"
+        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",
+              "overflow": "visible",
+              "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"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="large"
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+        onClick={[Function]}
+      >
+        one
+      </span>
+      <span
+        aria-hidden="true"
+        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",
+              "overflow": "visible",
+              "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"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="large"
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+        onClick={[Function]}
+      >
+        two
+      </span>
+      <span
+        aria-hidden="true"
+        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",
+              "overflow": "visible",
+              "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"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="large"
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+        onClick={[Function]}
+      >
+        three
+      </span>
+      <span
+        aria-hidden="true"
+        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",
+              "overflow": "visible",
+              "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"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="large"
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+        onClick={[Function]}
+      >
+        four
+      </span>
+      <span
+        aria-hidden="true"
+        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",
+              "overflow": "visible",
+              "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"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="large"
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+        onClick={[Function]}
+      >
+        five
+      </span>
+      <span
+        aria-hidden="true"
+        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",
+              "overflow": "visible",
+              "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"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="large"
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+        onClick={[Function]}
+      >
+        six
+      </span>
+      <span
+        aria-hidden="true"
+        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",
+              "overflow": "visible",
+              "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"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="large"
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+        onClick={[Function]}
+      >
+        seven
+      </span>
+      <span
+        aria-hidden="true"
+        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",
+              "overflow": "visible",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={18}
+        />
+      </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;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
+.c6 {
+  background-color: transparent;
+  font-family: inherit;
+  color: currentColor;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0;
+  -webkit-transform: translate(1px,-1px);
+  -ms-transform: translate(1px,-1px);
+  transform: translate(1px,-1px);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c6:hover,
+.c6:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c6:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c5 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+  width: auto;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  line-height: 1;
+  color: currentColor;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c5:is(a,button,[tabIndex='0']) {
+  cursor: pointer;
+}
+
+.c5:is(a,button,[tabIndex='0']):after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.c4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 999px;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-weight: 600;
+  font-family: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: rgba(234,238,242,0.5);
+  border-color: rgba(27,31,36,0.15);
+  border-style: solid;
+  border-width: 1px;
+  color: #57606a;
+  max-width: 100%;
+  padding-right: 0;
+  position: relative;
+}
+
+.c4:hover {
+  background-color: rgba(175,184,193,0.2);
+  color: #24292f;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  className="c0"
+  onClick={[Function]}
+  size="medium"
+>
+  <div
+    className="c1"
+    display="flex"
+  >
+    <div
+      className="c2"
+    >
+      <input
+        aria-invalid="false"
+        className="c3"
+        onBlur={[Function]}
+        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}
     >
       <span
@@ -3649,7 +4323,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="large"
+        size="extralarge"
         tabIndex={-1}
       >
         <svg
@@ -3657,11 +4331,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
           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>",
+              "__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={18}
+          height={24}
           role="img"
           style={
             Object {
@@ -3671,8 +4345,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
-          width={18}
+          viewBox="0 0 24 24"
+          width={24}
         />
       </span>
     </span>
@@ -3684,7 +4358,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="large"
+      size="extralarge"
       tabIndex={0}
     >
       <span
@@ -3697,7 +4371,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="large"
+        size="extralarge"
         tabIndex={-1}
       >
         <svg
@@ -3705,11 +4379,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
           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>",
+              "__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={18}
+          height={24}
           role="img"
           style={
             Object {
@@ -3719,8 +4393,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
-          width={18}
+          viewBox="0 0 24 24"
+          width={24}
         />
       </span>
     </span>
@@ -3732,7 +4406,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="large"
+      size="extralarge"
       tabIndex={0}
     >
       <span
@@ -3745,7 +4419,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="large"
+        size="extralarge"
         tabIndex={-1}
       >
         <svg
@@ -3753,11 +4427,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
           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>",
+              "__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={18}
+          height={24}
           role="img"
           style={
             Object {
@@ -3767,8 +4441,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
-          width={18}
+          viewBox="0 0 24 24"
+          width={24}
         />
       </span>
     </span>
@@ -3780,7 +4454,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="large"
+      size="extralarge"
       tabIndex={0}
     >
       <span
@@ -3793,7 +4467,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="large"
+        size="extralarge"
         tabIndex={-1}
       >
         <svg
@@ -3801,11 +4475,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
           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>",
+              "__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={18}
+          height={24}
           role="img"
           style={
             Object {
@@ -3815,8 +4489,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
-          width={18}
+          viewBox="0 0 24 24"
+          width={24}
         />
       </span>
     </span>
@@ -3828,7 +4502,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="large"
+      size="extralarge"
       tabIndex={0}
     >
       <span
@@ -3841,7 +4515,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="large"
+        size="extralarge"
         tabIndex={-1}
       >
         <svg
@@ -3849,11 +4523,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
           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>",
+              "__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={18}
+          height={24}
           role="img"
           style={
             Object {
@@ -3863,8 +4537,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
-          width={18}
+          viewBox="0 0 24 24"
+          width={24}
         />
       </span>
     </span>
@@ -3876,7 +4550,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="large"
+      size="extralarge"
       tabIndex={0}
     >
       <span
@@ -3889,7 +4563,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="large"
+        size="extralarge"
         tabIndex={-1}
       >
         <svg
@@ -3897,11 +4571,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
           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>",
+              "__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={18}
+          height={24}
           role="img"
           style={
             Object {
@@ -3911,8 +4585,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
-          width={18}
+          viewBox="0 0 24 24"
+          width={24}
         />
       </span>
     </span>
@@ -3924,7 +4598,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="large"
+      size="extralarge"
       tabIndex={0}
     >
       <span
@@ -3937,7 +4611,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="large"
+        size="extralarge"
         tabIndex={-1}
       >
         <svg
@@ -3945,11 +4619,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
           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>",
+              "__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={18}
+          height={24}
           role="img"
           style={
             Object {
@@ -3959,8 +4633,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
-          width={18}
+          viewBox="0 0 24 24"
+          width={24}
         />
       </span>
     </span>
@@ -3972,7 +4646,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="large"
+      size="extralarge"
       tabIndex={0}
     >
       <span
@@ -3985,7 +4659,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="large"
+        size="extralarge"
         tabIndex={-1}
       >
         <svg
@@ -3993,11 +4667,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
           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>",
+              "__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={18}
+          height={24}
           role="img"
           style={
             Object {
@@ -4007,8 +4681,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
               "verticalAlign": "text-bottom",
             }
           }
-          viewBox="0 0 16 16"
-          width={18}
+          viewBox="0 0 24 24"
+          width={24}
         />
       </span>
     </span>
@@ -4016,7 +4690,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 </span>
 `;
 
-exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
+exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4310,7 +4984,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -4323,7 +4997,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -4358,7 +5032,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -4371,7 +5045,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -4406,7 +5080,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -4419,7 +5093,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -4454,7 +5128,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -4467,7 +5141,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -4502,7 +5176,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -4515,7 +5189,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -4550,7 +5224,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -4563,7 +5237,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -4598,7 +5272,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -4611,7 +5285,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -4646,7 +5320,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -4659,7 +5333,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -4986,7 +5660,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -4999,7 +5673,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -5034,7 +5708,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5047,7 +5721,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -5082,7 +5756,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5095,7 +5769,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -5130,7 +5804,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5143,7 +5817,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -5178,7 +5852,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5191,7 +5865,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -5226,7 +5900,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5239,7 +5913,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -5274,7 +5948,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5287,7 +5961,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -5322,7 +5996,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5335,7 +6009,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -5609,7 +6283,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5627,7 +6301,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5645,7 +6319,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5663,7 +6337,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5681,7 +6355,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5699,7 +6373,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5717,7 +6391,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -5735,7 +6409,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -6057,7 +6731,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6070,7 +6744,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6105,7 +6779,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6118,7 +6792,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6153,7 +6827,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6166,7 +6840,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6201,7 +6875,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6214,7 +6888,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6249,7 +6923,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6262,7 +6936,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6297,7 +6971,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6310,7 +6984,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6345,7 +7019,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6358,7 +7032,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6393,7 +7067,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6406,7 +7080,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6824,7 +7498,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6837,7 +7511,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6872,7 +7546,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6885,7 +7559,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6920,7 +7594,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6933,7 +7607,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -6968,7 +7642,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -6981,7 +7655,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7016,7 +7690,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7029,7 +7703,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7064,7 +7738,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7077,7 +7751,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7112,7 +7786,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7125,7 +7799,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7160,7 +7834,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7173,7 +7847,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7547,7 +8221,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7560,7 +8234,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7595,7 +8269,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7608,7 +8282,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7643,7 +8317,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7656,7 +8330,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7691,7 +8365,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7704,7 +8378,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7739,7 +8413,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7752,7 +8426,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7787,7 +8461,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7800,7 +8474,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7835,7 +8509,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7848,7 +8522,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -7883,7 +8557,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -7896,7 +8570,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -8354,7 +9028,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -8367,7 +9041,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -8402,7 +9076,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -8415,7 +9089,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -8450,7 +9124,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -8463,7 +9137,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -8498,7 +9172,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -8511,7 +9185,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -8546,7 +9220,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -8559,7 +9233,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -8594,7 +9268,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -8607,7 +9281,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -8642,7 +9316,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -8655,7 +9329,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -8690,7 +9364,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -8703,7 +9377,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -9161,7 +9835,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -9174,7 +9848,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -9209,7 +9883,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -9222,7 +9896,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -9257,7 +9931,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -9270,7 +9944,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -9305,7 +9979,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -9318,7 +9992,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -9353,7 +10027,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -9366,7 +10040,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -9401,7 +10075,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -9414,7 +10088,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -9449,7 +10123,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -9462,7 +10136,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -9497,7 +10171,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -9510,7 +10184,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -9968,7 +10642,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -9981,7 +10655,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10016,7 +10690,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10029,7 +10703,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10064,7 +10738,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10077,7 +10751,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10112,7 +10786,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10125,7 +10799,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10160,7 +10834,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10173,7 +10847,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10208,7 +10882,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10221,7 +10895,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10256,7 +10930,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10269,7 +10943,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10304,7 +10978,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10317,7 +10991,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10700,7 +11374,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10713,7 +11387,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10748,7 +11422,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10761,7 +11435,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10796,7 +11470,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10809,7 +11483,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10844,7 +11518,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10857,7 +11531,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10892,7 +11566,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10905,7 +11579,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10940,7 +11614,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -10953,7 +11627,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -10988,7 +11662,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -11001,7 +11675,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -11036,7 +11710,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -11049,7 +11723,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -11507,7 +12181,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -11520,7 +12194,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -11555,7 +12229,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -11568,7 +12242,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -11603,7 +12277,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -11616,7 +12290,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -11651,7 +12325,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -11664,7 +12338,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -11699,7 +12373,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -11712,7 +12386,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -11747,7 +12421,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -11760,7 +12434,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -11795,7 +12469,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -11808,7 +12482,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -11843,7 +12517,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -11856,7 +12530,7 @@ Array [
           aria-hidden="true"
           className="c8"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -12270,7 +12944,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -12283,7 +12957,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -12318,7 +12992,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -12331,7 +13005,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -12366,7 +13040,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -12379,7 +13053,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -12414,7 +13088,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -12427,7 +13101,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -12462,7 +13136,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -12475,7 +13149,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -12510,7 +13184,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -12523,7 +13197,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -12558,7 +13232,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -12571,7 +13245,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -12606,7 +13280,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -12619,7 +13293,7 @@ Array [
           aria-hidden="true"
           className="c6"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -13971,7 +14645,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -13984,7 +14658,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -14019,7 +14693,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -14032,7 +14706,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -14067,7 +14741,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -14080,7 +14754,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -14115,7 +14789,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -14128,7 +14802,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -14163,7 +14837,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -14176,7 +14850,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -14211,7 +14885,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -14224,7 +14898,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -14259,7 +14933,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -14272,7 +14946,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -14307,7 +14981,7 @@ Array [
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onRemove={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={0}
       >
         <span
@@ -14320,7 +14994,7 @@ Array [
           aria-hidden="true"
           className="c9"
           onClick={[Function]}
-          size="extralarge"
+          size="xlarge"
           tabIndex={-1}
         >
           <svg
@@ -15562,7 +16236,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -15575,7 +16249,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -15610,7 +16284,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -15623,7 +16297,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -15658,7 +16332,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -15671,7 +16345,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -15706,7 +16380,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -15719,7 +16393,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -15754,7 +16428,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -15767,7 +16441,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -15802,7 +16476,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -15815,7 +16489,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -15850,7 +16524,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -15863,7 +16537,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -15898,7 +16572,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -15911,7 +16585,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -16241,7 +16915,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -16254,7 +16928,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -16289,7 +16963,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -16302,7 +16976,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -16337,7 +17011,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -16350,7 +17024,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -16385,7 +17059,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -16398,7 +17072,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -16433,7 +17107,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -16446,7 +17120,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -16481,7 +17155,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -16494,7 +17168,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -16529,7 +17203,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -16542,7 +17216,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
@@ -16577,7 +17251,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onRemove={[Function]}
-      size="extralarge"
+      size="xlarge"
       tabIndex={0}
     >
       <span
@@ -16590,7 +17264,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
         aria-hidden="true"
         className="c6"
         onClick={[Function]}
-        size="extralarge"
+        size="xlarge"
         tabIndex={-1}
       >
         <svg
diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap
index a50979b01ba..f16b0d27a3a 100644
--- a/src/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Token.test.tsx.snap
@@ -844,6 +844,217 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
 </span>
 `;
 
+exports[`Token components AvatarToken renders all sizes 5`] = `
+.c3 {
+  display: inline-block;
+  overflow: hidden;
+  line-height: 1;
+  vertical-align: middle;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+
+.c5 {
+  background-color: transparent;
+  font-family: inherit;
+  color: currentColor;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0;
+  -webkit-transform: translate(1px,-1px);
+  -ms-transform: translate(1px,-1px);
+  transform: translate(1px,-1px);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+}
+
+.c5:hover,
+.c5:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c5:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c4 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+  width: auto;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  line-height: 1;
+  color: currentColor;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:is(a,button,[tabIndex='0']) {
+  cursor: pointer;
+}
+
+.c4:is(a,button,[tabIndex='0']):after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 999px;
+  cursor: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-weight: 600;
+  font-family: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 4px;
+  background-color: rgba(234,238,242,0.5);
+  border-color: rgba(27,31,36,0.15);
+  border-style: solid;
+  border-width: 1px;
+  color: #57606a;
+  max-width: 100%;
+  padding-right: 0;
+  position: relative;
+  padding-left: 4px;
+}
+
+.c1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  line-height: 0;
+  margin-right: 8px;
+}
+
+.c2 {
+  --spacing: calc(4px * 2);
+  display: block;
+  height: calc(32px - var(--spacing));
+  width: calc(32px - var(--spacing));
+}
+
+<span
+  aria-label="token, press backspace or delete to remove"
+  className="c0"
+  onKeyDown={[Function]}
+  onRemove={[MockFunction]}
+  size="xlarge"
+>
+  <span
+    className="c1"
+    size="xlarge"
+  >
+    <span
+      className="c2"
+    >
+      <img
+        alt=""
+        className="c3"
+        height={32}
+        size={32}
+        src="https://avatars.githubusercontent.com/mperrotti"
+        width={32}
+      />
+    </span>
+  </span>
+  <span
+    className="c4"
+  >
+    token
+  </span>
+  <button
+    aria-hidden="false"
+    aria-label="Remove token"
+    className="c5"
+    onClick={[Function]}
+    size="xlarge"
+  >
+    <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",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 24 24"
+      width={24}
+    />
+  </button>
+</span>
+`;
+
 exports[`Token components AvatarToken renders consistently 1`] = `
 .c1 {
   -webkit-box-flex: 1;
@@ -1230,16 +1441,193 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
     </span>
   </span>
   <span
-    className="c4"
+    className="c4"
+  >
+    token
+  </span>
+  <button
+    aria-hidden="false"
+    aria-label="Remove token"
+    className="c5"
+    onClick={[Function]}
+    size="medium"
+  >
+    <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",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={15}
+    />
+  </button>
+</span>
+`;
+
+exports[`Token components IssueLabelToken renders all sizes 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 999px;
+  cursor: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-weight: 600;
+  font-family: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  font-size: 12px;
+  height: 16px;
+  line-height: 16px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0;
+  padding-bottom: 0;
+  --label-r: 153;
+  --label-g: 153;
+  --label-b: 153;
+  --label-h: 0;
+  --label-s: 0;
+  --label-l: 60;
+  --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
+  --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
+  padding-right: 0;
+  position: relative;
+  --lightness-threshold: 0.453;
+  --border-threshold: 0.96;
+  --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));
+  background: rgb(var(--label-r),var(--label-g),var(--label-b));
+  color: hsl(0,0%,calc(var(--lightness-switch) * 100%));
+  border-width: 1px;
+  border-style: solid;
+  border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
+}
+
+.c2 {
+  background-color: transparent;
+  font-family: inherit;
+  color: currentColor;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0;
+  -webkit-transform: translate(1px,-1px);
+  -ms-transform: translate(1px,-1px);
+  transform: translate(1px,-1px);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 4px;
+  height: 16px;
+  width: 16px;
+}
+
+.c2:hover,
+.c2:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c2:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c1 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+  width: auto;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  line-height: 1;
+  color: currentColor;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:is(a,button,[tabIndex='0']) {
+  cursor: pointer;
+}
+
+.c1:is(a,button,[tabIndex='0']):after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+<span
+  aria-label="token, press backspace or delete to remove"
+  className="c0"
+  onKeyDown={[Function]}
+  onRemove={[MockFunction]}
+  size="small"
+>
+  <span
+    className="c1"
   >
     token
   </span>
   <button
     aria-hidden="false"
     aria-label="Remove token"
-    className="c5"
+    className="c2"
     onClick={[Function]}
-    size="medium"
+    size="small"
   >
     <svg
       aria-hidden="true"
@@ -1250,7 +1638,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
         }
       }
       fill="currentColor"
-      height={15}
+      height={12}
       role="img"
       style={
         Object {
@@ -1261,13 +1649,13 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
         }
       }
       viewBox="0 0 16 16"
-      width={15}
+      width={12}
     />
   </button>
 </span>
 `;
 
-exports[`Token components IssueLabelToken renders all sizes 1`] = `
+exports[`Token components IssueLabelToken renders all sizes 2`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1285,10 +1673,10 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  height: 16px;
-  line-height: 16px;
-  padding-left: 4px;
-  padding-right: 4px;
+  height: 20px;
+  line-height: 20px;
+  padding-left: 8px;
+  padding-right: 8px;
   padding-top: 0;
   padding-bottom: 0;
   --label-r: 153;
@@ -1347,8 +1735,8 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
   border: 0;
   border-radius: 999px;
   margin-left: 4px;
-  height: 16px;
-  width: 16px;
+  height: 20px;
+  width: 20px;
 }
 
 .c2:hover,
@@ -1404,7 +1792,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
   className="c0"
   onKeyDown={[Function]}
   onRemove={[MockFunction]}
-  size="small"
+  size="medium"
 >
   <span
     className="c1"
@@ -1416,7 +1804,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
     aria-label="Remove token"
     className="c2"
     onClick={[Function]}
-    size="small"
+    size="medium"
   >
     <svg
       aria-hidden="true"
@@ -1427,7 +1815,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
         }
       }
       fill="currentColor"
-      height={12}
+      height={15}
       role="img"
       style={
         Object {
@@ -1438,13 +1826,13 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
         }
       }
       viewBox="0 0 16 16"
-      width={12}
+      width={15}
     />
   </button>
 </span>
 `;
 
-exports[`Token components IssueLabelToken renders all sizes 2`] = `
+exports[`Token components IssueLabelToken renders all sizes 3`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1462,8 +1850,8 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
   text-decoration: none;
   white-space: nowrap;
   font-size: 12px;
-  height: 20px;
-  line-height: 20px;
+  height: 24px;
+  line-height: 24px;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 0;
@@ -1523,9 +1911,9 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
-  margin-left: 4px;
-  height: 20px;
-  width: 20px;
+  margin-left: 8px;
+  height: 24px;
+  width: 24px;
 }
 
 .c2:hover,
@@ -1581,7 +1969,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
   className="c0"
   onKeyDown={[Function]}
   onRemove={[MockFunction]}
-  size="medium"
+  size="large"
 >
   <span
     className="c1"
@@ -1593,7 +1981,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
     aria-label="Remove token"
     className="c2"
     onClick={[Function]}
-    size="medium"
+    size="large"
   >
     <svg
       aria-hidden="true"
@@ -1604,7 +1992,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
         }
       }
       fill="currentColor"
-      height={15}
+      height={18}
       role="img"
       style={
         Object {
@@ -1615,13 +2003,13 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
         }
       }
       viewBox="0 0 16 16"
-      width={15}
+      width={18}
     />
   </button>
 </span>
 `;
 
-exports[`Token components IssueLabelToken renders all sizes 3`] = `
+exports[`Token components IssueLabelToken renders all sizes 4`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1638,11 +2026,11 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   white-space: nowrap;
-  font-size: 12px;
-  height: 24px;
-  line-height: 24px;
-  padding-left: 8px;
-  padding-right: 8px;
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
   --label-r: 153;
@@ -1701,8 +2089,8 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
   border: 0;
   border-radius: 999px;
   margin-left: 8px;
-  height: 24px;
-  width: 24px;
+  height: 32px;
+  width: 32px;
 }
 
 .c2:hover,
@@ -1758,7 +2146,7 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
   className="c0"
   onKeyDown={[Function]}
   onRemove={[MockFunction]}
-  size="large"
+  size="extralarge"
 >
   <span
     className="c1"
@@ -1770,18 +2158,18 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
     aria-label="Remove token"
     className="c2"
     onClick={[Function]}
-    size="large"
+    size="extralarge"
   >
     <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>",
+          "__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={18}
+      height={24}
       role="img"
       style={
         Object {
@@ -1791,14 +2179,14 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
-      width={18}
+      viewBox="0 0 24 24"
+      width={24}
     />
   </button>
 </span>
 `;
 
-exports[`Token components IssueLabelToken renders all sizes 4`] = `
+exports[`Token components IssueLabelToken renders all sizes 5`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1935,7 +2323,7 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
   className="c0"
   onKeyDown={[Function]}
   onRemove={[MockFunction]}
-  size="extralarge"
+  size="xlarge"
 >
   <span
     className="c1"
@@ -1947,7 +2335,7 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
     aria-label="Remove token"
     className="c2"
     onClick={[Function]}
-    size="extralarge"
+    size="xlarge"
   >
     <svg
       aria-hidden="true"
@@ -3370,6 +3758,173 @@ exports[`Token components Token renders all sizes 4`] = `
 </span>
 `;
 
+exports[`Token components Token renders all sizes 5`] = `
+.c2 {
+  background-color: transparent;
+  font-family: inherit;
+  color: currentColor;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0;
+  -webkit-transform: translate(1px,-1px);
+  -ms-transform: translate(1px,-1px);
+  transform: translate(1px,-1px);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+}
+
+.c2:hover,
+.c2:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c2:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c1 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+  width: auto;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  line-height: 1;
+  color: currentColor;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:is(a,button,[tabIndex='0']) {
+  cursor: pointer;
+}
+
+.c1:is(a,button,[tabIndex='0']):after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 999px;
+  cursor: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-weight: 600;
+  font-family: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: rgba(234,238,242,0.5);
+  border-color: rgba(27,31,36,0.15);
+  border-style: solid;
+  border-width: 1px;
+  color: #57606a;
+  max-width: 100%;
+  padding-right: 0;
+  position: relative;
+}
+
+<span
+  aria-label="token, press backspace or delete to remove"
+  className="c0"
+  onKeyDown={[Function]}
+  onRemove={[MockFunction]}
+  size="xlarge"
+>
+  <span
+    className="c1"
+  >
+    token
+  </span>
+  <button
+    aria-hidden="false"
+    aria-label="Remove token"
+    className="c2"
+    onClick={[Function]}
+    size="xlarge"
+  >
+    <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",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 24 24"
+      width={24}
+    />
+  </button>
+</span>
+`;
+
 exports[`Token components Token renders consistently 1`] = `
 .c1 {
   -webkit-box-flex: 1;
diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx
index 084d3179f90..f0d7225fa48 100644
--- a/src/stories/TextInputWithTokens.stories.tsx
+++ b/src/stories/TextInputWithTokens.stories.tsx
@@ -64,8 +64,8 @@ export default {
     },
     size: {
       name: 'size (token size)',
-      defaultValue: 'extralarge',
-      options: ['small', 'medium', 'large', 'extralarge'],
+      defaultValue: 'xlarge',
+      options: ['small', 'medium', 'large', 'xlarge'],
       control: {
         type: 'radio'
       }

From 063bbaa0d7e5fb866ae1fa9ad4191b6834c2bd5d Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 24 Mar 2022 16:26:27 -0400
Subject: [PATCH 2/6] updates docs to guide customers away from using small
 token sizes for AvatarTokens or leadingVisual

---
 docs/content/Token.mdx        | 76 ++++++++++++++---------------------
 src/stories/Token.stories.tsx |  9 ++++-
 2 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/docs/content/Token.mdx b/docs/content/Token.mdx
index fd597c2e2fc..930eceed5fb 100644
--- a/docs/content/Token.mdx
+++ b/docs/content/Token.mdx
@@ -55,7 +55,7 @@ All types of tokens may have the same interactive qualities as links or buttons.
     <Text fontSize={0} display="block" color="fg.subtle">
       With `leadingVisual` passed
     </Text>
-    <Token text="Default Token" leadingVisual={() => <span>✨</span>} />
+    <Token text="Default Token" leadingVisual={GitBranchIcon} />
   </div>
 
   <div>
@@ -81,39 +81,36 @@ All types of tokens may have the same interactive qualities as links or buttons.
         gap: 2
       }}
     >
-      <Token
-        size="small"
-        text="'small' Token"
-        onRemove={() => {
-          console.log('remove me')
-        }}
-      />
-      <Token
-        size="medium"
-        text="'medium' Token"
-        onRemove={() => {
-          console.log('remove me')
-        }}
-      />
-      <Token
-        size="large"
-        text="'large' Token (default)"
-        onRemove={() => {
-          console.log('remove me')
-        }}
-      />
-      <Token
-        size="xlarge"
-        text="'xlarge' Token"
-        onRemove={() => {
-          console.log('remove me')
-        }}
-      />
+      <Token size="small" text="'small' Token" />
+      <Token size="medium" text="'medium' Token" />
+      <Token size="large" text="'large' Token (default)" />
+      <Token size="xlarge" text="'xlarge' Token" />
     </Box>
   </div>
 </Box>
 ```
 
+### With leadingVisual
+
+<Note variant="warning">
+  A <InlineCode>leadingVisual</InlineCode> should not be used with the <InlineCode>small</InlineCode> size option
+</Note>
+
+```jsx live
+<Box
+  display="flex"
+  sx={{
+    alignItems: 'start',
+    flexDirection: 'column',
+    gap: 6
+  }}
+>
+  <Token size="medium" text="'medium' Token" leadingVisual={GitBranchIcon} />
+  <Token size="large" text="'large' Token (default)" leadingVisual={GitBranchIcon} />
+  <Token size="xlarge" text="'xlarge' Token" leadingVisual={GitBranchIcon} />
+</Box>
+```
+
 ### Interactive tokens
 
 If any token is interactive (it is a link or a button), it will become focusable, and react to being hovered or focused on.
@@ -282,6 +279,11 @@ Tokens that represent Issue labels should use the `IssueLabelToken` component.
 
 Tokens that represent GitHub users should use the `AvatarToken` component.
 
+<Note variant="warning">
+  This component should not be used with the <InlineCode>small</InlineCode> or <InlineCode>medium</InlineCode> size
+  option
+</Note>
+
 ```jsx live
 <Box
   display="flex"
@@ -329,22 +331,6 @@ Tokens that represent GitHub users should use the `AvatarToken` component.
         gap: 2
       }}
     >
-      <AvatarToken
-        avatarSrc="https://avatars.githubusercontent.com/mperrotti"
-        size="small"
-        text="'small' Token"
-        onRemove={() => {
-          console.log('remove me')
-        }}
-      />
-      <AvatarToken
-        avatarSrc="https://avatars.githubusercontent.com/mperrotti"
-        size="medium"
-        text="'medium' Token"
-        onRemove={() => {
-          console.log('remove me')
-        }}
-      />
       <AvatarToken
         avatarSrc="https://avatars.githubusercontent.com/mperrotti"
         size="large"
diff --git a/src/stories/Token.stories.tsx b/src/stories/Token.stories.tsx
index af620cc8d57..7703aa4709a 100644
--- a/src/stories/Token.stories.tsx
+++ b/src/stories/Token.stories.tsx
@@ -15,6 +15,13 @@ export default {
   argTypes: {
     text: {
       defaultValue: 'Token'
+    },
+    size: {
+      defaultValue: 'medium',
+      control: {
+        options: ['small', 'medium', 'large', 'xlarge'],
+        type: 'radio'
+      }
     }
   },
   decorators: [
@@ -98,7 +105,7 @@ Interactive.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemo
 export const WithLeadingVisual = (args: Omit<TokenProps, 'ref'>) => {
   return (
     <ExampleCollectionContainer>
-      <Token {...args} leadingVisual={() => <GitBranchIcon />} />
+      <Token {...args} leadingVisual={GitBranchIcon} />
     </ExampleCollectionContainer>
   )
 }

From f0f6b397887ea0935567d507e5a358578c83a5d6 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 24 Mar 2022 16:29:28 -0400
Subject: [PATCH 3/6] updates types to allow all types of tokens to hide the
 remove button

---
 src/Token/IssueLabelToken.tsx | 4 ----
 src/Token/Token.tsx           | 4 ----
 src/Token/TokenBase.tsx       | 4 ++++
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/Token/IssueLabelToken.tsx b/src/Token/IssueLabelToken.tsx
index 70608c9fda4..7082583b0cd 100644
--- a/src/Token/IssueLabelToken.tsx
+++ b/src/Token/IssueLabelToken.tsx
@@ -11,10 +11,6 @@ export interface IssueLabelTokenProps extends TokenBaseProps {
    * The color that corresponds to the label
    */
   fillColor?: string
-  /**
-   * Whether the remove button should be rendered in the token
-   */
-  hideRemoveButton?: boolean
 }
 
 const tokenBorderWidthPx = 1
diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
index 1ccfec414f3..e404b408f89 100644
--- a/src/Token/Token.tsx
+++ b/src/Token/Token.tsx
@@ -12,10 +12,6 @@ export interface TokenProps extends TokenBaseProps {
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   leadingVisual?: React.ComponentType<any>
-  /**
-   * Whether the remove button should be rendered in the token
-   */
-  hideRemoveButton?: boolean
 }
 
 const tokenBorderWidthPx = 1
diff --git a/src/Token/TokenBase.tsx b/src/Token/TokenBase.tsx
index d93294106c3..8f12636c5fc 100644
--- a/src/Token/TokenBase.tsx
+++ b/src/Token/TokenBase.tsx
@@ -27,6 +27,10 @@ export interface TokenBaseProps
    * The function that gets called when a user clicks the remove button, or keys "Backspace" or "Delete" when focused on the token
    */
   onRemove?: () => void
+  /**
+   * Whether the remove button should be rendered in the token
+   */
+  hideRemoveButton?: boolean
   /**
    * Whether the token is selected
    */

From acaf01898ce20e19cd1f0b171e92c200a2f9c38a Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 24 Mar 2022 16:36:38 -0400
Subject: [PATCH 4/6] rewording

---
 docs/content/Token.mdx    | 3 ++-
 src/Token/AvatarToken.tsx | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/content/Token.mdx b/docs/content/Token.mdx
index 930eceed5fb..b79fd627f47 100644
--- a/docs/content/Token.mdx
+++ b/docs/content/Token.mdx
@@ -93,7 +93,8 @@ All types of tokens may have the same interactive qualities as links or buttons.
 ### With leadingVisual
 
 <Note variant="warning">
-  A <InlineCode>leadingVisual</InlineCode> should not be used with the <InlineCode>small</InlineCode> size option
+  A <InlineCode>leadingVisual</InlineCode> should not be used with the <InlineCode>small</InlineCode> size option if
+  you're rendering an icon from Octicons
 </Note>
 
 ```jsx live
diff --git a/src/Token/AvatarToken.tsx b/src/Token/AvatarToken.tsx
index 5519ca93134..b9f462505ec 100644
--- a/src/Token/AvatarToken.tsx
+++ b/src/Token/AvatarToken.tsx
@@ -5,6 +5,7 @@ import {TokenBaseProps, defaultTokenSize, tokenSizes, TokenSizeKeys} from './Tok
 import Token from './Token'
 import {Avatar} from '..'
 
+// TODO: update props to only accept 'large' and 'xlarge' on the next breaking change
 export interface AvatarTokenProps extends TokenBaseProps {
   avatarSrc: string
 }

From 282079b5f1287fa535535f1dba0baac6d3aeabc8 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 24 Mar 2022 16:36:47 -0400
Subject: [PATCH 5/6] adds changeset

---
 .changeset/six-trains-guess.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/six-trains-guess.md

diff --git a/.changeset/six-trains-guess.md b/.changeset/six-trains-guess.md
new file mode 100644
index 00000000000..58c33619e10
--- /dev/null
+++ b/.changeset/six-trains-guess.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Updates the API for token components to align with our size-naming ADR, avatar guidelines, and icon guidelines

From 931d73b73ff5a83230d70be109768f5c6c2da3d5 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Tue, 29 Mar 2022 17:20:00 -0400
Subject: [PATCH 6/6] marks 'extralarge' as deprecated

---
 src/Token/TokenBase.tsx                                      | 5 +++--
 .../__snapshots__/TextInputWithTokens.test.tsx.snap          | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Token/TokenBase.tsx b/src/Token/TokenBase.tsx
index 8f12636c5fc..0567dee6182 100644
--- a/src/Token/TokenBase.tsx
+++ b/src/Token/TokenBase.tsx
@@ -5,8 +5,9 @@ import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 
 // TODO: remove invalid "extralarge" size name in next breaking change
-// ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md
-export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'extralarge' | 'xlarge'
+/** @deprecated 'extralarge' to be removed to align with size naming ADR https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md **/
+type ExtraLarge = 'extralarge'
+export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'xlarge' | ExtraLarge
 
 const xlargeSize = '32px'
 
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 76dbc25b539..b295583c0fa 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -4123,7 +4123,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   margin-right: 8px;
 }
 
-.c0 .TextInput-icon {
+.c0 .TextInput-icon,
+.c0 .TextInput-action {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;