From a450139139678d3fca776c722bd994dae026e62e Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Tue, 23 May 2023 20:20:03 +1000
Subject: [PATCH 1/2] Remove extralarge from Tokens

---
 .../TextInputWithTokens.tsx                   |   6 +-
 src/Token/Token.tsx                           |   2 +-
 src/Token/TokenBase.tsx                       |  11 +-
 src/Token/_RemoveTokenButton.tsx              |   6 -
 .../__snapshots__/Token.test.tsx.snap         | 660 +---------------
 .../TextInputWithTokens.test.tsx.snap         | 720 ------------------
 6 files changed, 44 insertions(+), 1361 deletions(-)

diff --git a/src/TextInputWithTokens/TextInputWithTokens.tsx b/src/TextInputWithTokens/TextInputWithTokens.tsx
index f665021ec1b..8775615c4d5 100644
--- a/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -60,8 +60,7 @@ const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
   small: 0,
   medium: 1,
   large: 1,
-  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
+  xlarge: 2,
 }
 
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
@@ -240,8 +239,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     small: 'small',
     medium: 'small',
     large: '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
+    xlarge: 'medium',
   }
   const showLeadingLoadingIndicator =
     loading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing'))
diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
index 9a9df8ba25d..e172e62951f 100644
--- a/src/Token/Token.tsx
+++ b/src/Token/Token.tsx
@@ -25,7 +25,7 @@ const LeadingVisualContainer: React.FC<React.PropsWithChildren<Pick<TokenBasePro
     sx={{
       flexShrink: 0,
       lineHeight: 0,
-      marginRight: size && ['large', 'extralarge', 'xlarge'].includes(size) ? 2 : 1,
+      marginRight: size && ['large', 'xlarge'].includes(size) ? 2 : 1,
     }}
   >
     {children}
diff --git a/src/Token/TokenBase.tsx b/src/Token/TokenBase.tsx
index 1bbecc97bcb..366a51edc04 100644
--- a/src/Token/TokenBase.tsx
+++ b/src/Token/TokenBase.tsx
@@ -5,19 +5,13 @@ import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
-// TODO: remove invalid "extralarge" size name in next breaking change
-/** @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'
+export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'xlarge'
 
 export const tokenSizes: Record<TokenSizeKeys, string> = {
   small: '16px',
   medium: '20px',
   large: '24px',
-  extralarge: xlargeSize,
-  xlarge: xlargeSize,
+  xlarge: '32px',
 }
 
 export const defaultTokenSize: TokenSizeKeys = 'medium'
@@ -112,7 +106,6 @@ const variants = variant<
       paddingLeft: 2,
       paddingRight: 2,
     },
-    extralarge: xlargeVariantStyles,
     xlarge: xlargeVariantStyles,
   },
 })
diff --git a/src/Token/_RemoveTokenButton.tsx b/src/Token/_RemoveTokenButton.tsx
index 33487c73cad..31f436d2989 100644
--- a/src/Token/_RemoveTokenButton.tsx
+++ b/src/Token/_RemoveTokenButton.tsx
@@ -28,11 +28,6 @@ const variants = variant<{height: string; width: string}, TokenSizeKeys>({
       height: tokenSizes.large,
       width: tokenSizes.large,
     },
-    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,
@@ -62,7 +57,6 @@ const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
   ${props => {
     switch (props.size) {
       case 'large':
-      case 'extralarge':
       case 'xlarge':
         return css`
           margin-left: ${get('space.2')};
diff --git a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
index f8b70368c1f..f42fc9f0a9e 100644
--- a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
@@ -830,231 +830,6 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   width: calc(32px - var(--spacing));
 }
 
-<span
-  className="c0"
-  onKeyDown={[Function]}
-  size="extralarge"
->
-  <div
-    className="c1"
-  >
-    <span
-      className="c2"
-    >
-      <img
-        alt=""
-        className="c3"
-        height={32}
-        size={32}
-        src="https://avatars.githubusercontent.com/mperrotti"
-        width={32}
-      />
-    </span>
-  </div>
-  <span
-    className="c4"
-  >
-    token
-  </span>
-  <span
-    className="c5"
-  >
-     (press backspace or delete to remove)
-  </span>
-  <button
-    aria-hidden="false"
-    aria-label="Remove token"
-    className="c6"
-    onClick={[Function]}
-    size="extralarge"
-  >
-    <svg
-      aria-hidden="true"
-      className="octicon octicon-x"
-      fill="currentColor"
-      focusable="false"
-      height={24}
-      role="img"
-      style={
-        {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
-          "verticalAlign": "text-bottom",
-        }
-      }
-      viewBox="0 0 24 24"
-      width={24}
-    >
-      <path
-        d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-      />
-    </svg>
-  </button>
-</span>
-`;
-
-exports[`Token components AvatarToken renders all sizes 5`] = `
-.c1 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  line-height: 0;
-  margin-right: 8px;
-}
-
-.c5 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c3 {
-  display: inline-block;
-  overflow: hidden;
-  line-height: 1;
-  vertical-align: middle;
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
-  width: 100%;
-  height: 100%;
-}
-
-.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;
-  position: relative;
-  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(31,35,40,0.15);
-  border-style: solid;
-  border-width: 1px;
-  color: #656d76;
-  max-width: 100%;
-  padding-right: 0;
-  padding-left: 4px;
-}
-
-.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;
-}
-
-.c6:hover,
-.c6:focus {
-  background-color: rgba(175,184,193,0.2);
-}
-
-.c6: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;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: normal;
-  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;
-}
-
-.c2 {
-  --spacing: calc(4px * 2);
-  display: block;
-  height: calc(32px - var(--spacing));
-  width: calc(32px - var(--spacing));
-}
-
 <span
   className="c0"
   onKeyDown={[Function]}
@@ -1537,180 +1312,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
         }
       }
       viewBox="0 0 12 12"
-      width={15}
-    >
-      <path
-        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
-      />
-    </svg>
-  </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;
-  position: relative;
-  white-space: nowrap;
-  font-size: 12px;
-  height: 16px;
-  line-height: 16px;
-  padding-left: 4px;
-  padding-right: 4px;
-  --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;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: normal;
-  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
-  className="c0"
-  onKeyDown={[Function]}
-  size="small"
->
-  <span
-    className="c1"
-  >
-    token
-  </span>
-  <button
-    aria-hidden="false"
-    aria-label="Remove token"
-    className="c2"
-    onClick={[Function]}
-    size="small"
-  >
-    <svg
-      aria-hidden="true"
-      className="octicon octicon-x"
-      fill="currentColor"
-      focusable="false"
-      height={12}
-      role="img"
-      style={
-        {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
-          "verticalAlign": "text-bottom",
-        }
-      }
-      viewBox="0 0 12 12"
-      width={12}
+      width={15}
     >
       <path
         d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
@@ -1720,7 +1322,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
 </span>
 `;
 
-exports[`Token components IssueLabelToken renders all sizes 2`] = `
+exports[`Token components IssueLabelToken renders all sizes 1`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1739,10 +1341,10 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
   position: relative;
   white-space: nowrap;
   font-size: 12px;
-  height: 20px;
-  line-height: 20px;
-  padding-left: 8px;
-  padding-right: 8px;
+  height: 16px;
+  line-height: 16px;
+  padding-left: 4px;
+  padding-right: 4px;
   --label-r: 153;
   --label-g: 153;
   --label-b: 153;
@@ -1799,8 +1401,8 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
   border: 0;
   border-radius: 999px;
   margin-left: 4px;
-  height: 20px;
-  width: 20px;
+  height: 16px;
+  width: 16px;
 }
 
 .c2:hover,
@@ -1853,7 +1455,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
 <span
   className="c0"
   onKeyDown={[Function]}
-  size="medium"
+  size="small"
 >
   <span
     className="c1"
@@ -1865,14 +1467,14 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
     aria-label="Remove token"
     className="c2"
     onClick={[Function]}
-    size="medium"
+    size="small"
   >
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
       fill="currentColor"
       focusable="false"
-      height={15}
+      height={12}
       role="img"
       style={
         {
@@ -1883,7 +1485,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
         }
       }
       viewBox="0 0 12 12"
-      width={15}
+      width={12}
     >
       <path
         d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
@@ -1893,7 +1495,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
 </span>
 `;
 
-exports[`Token components IssueLabelToken renders all sizes 3`] = `
+exports[`Token components IssueLabelToken renders all sizes 2`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1912,8 +1514,8 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
   position: relative;
   white-space: nowrap;
   font-size: 12px;
-  height: 24px;
-  line-height: 24px;
+  height: 20px;
+  line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
   --label-r: 153;
@@ -1971,9 +1573,9 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
   align-self: baseline;
   border: 0;
   border-radius: 999px;
-  margin-left: 8px;
-  height: 24px;
-  width: 24px;
+  margin-left: 4px;
+  height: 20px;
+  width: 20px;
 }
 
 .c2:hover,
@@ -2026,7 +1628,7 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
 <span
   className="c0"
   onKeyDown={[Function]}
-  size="large"
+  size="medium"
 >
   <span
     className="c1"
@@ -2038,14 +1640,14 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
     aria-label="Remove token"
     className="c2"
     onClick={[Function]}
-    size="large"
+    size="medium"
   >
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
       fill="currentColor"
       focusable="false"
-      height={18}
+      height={15}
       role="img"
       style={
         {
@@ -2055,18 +1657,18 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
-      width={18}
+      viewBox="0 0 12 12"
+      width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
 </span>
 `;
 
-exports[`Token components IssueLabelToken renders all sizes 4`] = `
+exports[`Token components IssueLabelToken renders all sizes 3`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2084,13 +1686,11 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
   text-decoration: none;
   position: relative;
   white-space: nowrap;
-  font-size: 14px;
-  height: 32px;
-  line-height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
+  font-size: 12px;
+  height: 24px;
+  line-height: 24px;
+  padding-left: 8px;
+  padding-right: 8px;
   --label-r: 153;
   --label-g: 153;
   --label-b: 153;
@@ -2147,8 +1747,8 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
   border: 0;
   border-radius: 999px;
   margin-left: 8px;
-  height: 32px;
-  width: 32px;
+  height: 24px;
+  width: 24px;
 }
 
 .c2:hover,
@@ -2201,7 +1801,7 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
 <span
   className="c0"
   onKeyDown={[Function]}
-  size="extralarge"
+  size="large"
 >
   <span
     className="c1"
@@ -2213,14 +1813,14 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
     aria-label="Remove token"
     className="c2"
     onClick={[Function]}
-    size="extralarge"
+    size="large"
   >
     <svg
       aria-hidden="true"
       className="octicon octicon-x"
       fill="currentColor"
       focusable="false"
-      height={24}
+      height={18}
       role="img"
       style={
         {
@@ -2230,18 +1830,18 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 24 24"
-      width={24}
+      viewBox="0 0 16 16"
+      width={18}
     >
       <path
-        d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
+        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
 </span>
 `;
 
-exports[`Token components IssueLabelToken renders all sizes 5`] = `
+exports[`Token components IssueLabelToken renders all sizes 4`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -3800,188 +3400,6 @@ exports[`Token components Token renders all sizes 4`] = `
   bottom: 0;
 }
 
-<span
-  className="c0"
-  onKeyDown={[Function]}
-  size="extralarge"
->
-  <span
-    className="c1"
-  >
-    token
-  </span>
-  <span
-    className="c2"
-  >
-     (press backspace or delete to remove)
-  </span>
-  <button
-    aria-hidden="false"
-    aria-label="Remove token"
-    className="c3"
-    onClick={[Function]}
-    size="extralarge"
-  >
-    <svg
-      aria-hidden="true"
-      className="octicon octicon-x"
-      fill="currentColor"
-      focusable="false"
-      height={24}
-      role="img"
-      style={
-        {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
-          "verticalAlign": "text-bottom",
-        }
-      }
-      viewBox="0 0 24 24"
-      width={24}
-    >
-      <path
-        d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-      />
-    </svg>
-  </button>
-</span>
-`;
-
-exports[`Token components Token renders all sizes 5`] = `
-.c2 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 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;
-  position: relative;
-  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(31,35,40,0.15);
-  border-style: solid;
-  border-width: 1px;
-  color: #656d76;
-  max-width: 100%;
-  padding-right: 0;
-}
-
-.c3 {
-  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;
-}
-
-.c3:hover,
-.c3:focus {
-  background-color: rgba(175,184,193,0.2);
-}
-
-.c3: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;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: normal;
-  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
   className="c0"
   onKeyDown={[Function]}
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index bd1f7ba606b..3ec7adee20e 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -4569,726 +4569,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   }
 }
 
-<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
-      className="c4"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      size="extralarge"
-      tabIndex={0}
-    >
-      <span
-        className="c5"
-        onClick={[Function]}
-      >
-        zero
-      </span>
-      <span
-        className="c6"
-      >
-         (press backspace or delete to remove)
-      </span>
-      <span
-        aria-hidden="true"
-        className="c7"
-        onClick={[Function]}
-        size="extralarge"
-        tabIndex={-1}
-      >
-        <svg
-          aria-hidden="true"
-          className="octicon octicon-x"
-          fill="currentColor"
-          focusable="false"
-          height={24}
-          role="img"
-          style={
-            {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
-          }
-          viewBox="0 0 24 24"
-          width={24}
-        >
-          <path
-            d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-          />
-        </svg>
-      </span>
-    </span>
-    <span
-      className="c4"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      size="extralarge"
-      tabIndex={0}
-    >
-      <span
-        className="c5"
-        onClick={[Function]}
-      >
-        one
-      </span>
-      <span
-        className="c6"
-      >
-         (press backspace or delete to remove)
-      </span>
-      <span
-        aria-hidden="true"
-        className="c7"
-        onClick={[Function]}
-        size="extralarge"
-        tabIndex={-1}
-      >
-        <svg
-          aria-hidden="true"
-          className="octicon octicon-x"
-          fill="currentColor"
-          focusable="false"
-          height={24}
-          role="img"
-          style={
-            {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
-          }
-          viewBox="0 0 24 24"
-          width={24}
-        >
-          <path
-            d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-          />
-        </svg>
-      </span>
-    </span>
-    <span
-      className="c4"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      size="extralarge"
-      tabIndex={0}
-    >
-      <span
-        className="c5"
-        onClick={[Function]}
-      >
-        two
-      </span>
-      <span
-        className="c6"
-      >
-         (press backspace or delete to remove)
-      </span>
-      <span
-        aria-hidden="true"
-        className="c7"
-        onClick={[Function]}
-        size="extralarge"
-        tabIndex={-1}
-      >
-        <svg
-          aria-hidden="true"
-          className="octicon octicon-x"
-          fill="currentColor"
-          focusable="false"
-          height={24}
-          role="img"
-          style={
-            {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
-          }
-          viewBox="0 0 24 24"
-          width={24}
-        >
-          <path
-            d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-          />
-        </svg>
-      </span>
-    </span>
-    <span
-      className="c4"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      size="extralarge"
-      tabIndex={0}
-    >
-      <span
-        className="c5"
-        onClick={[Function]}
-      >
-        three
-      </span>
-      <span
-        className="c6"
-      >
-         (press backspace or delete to remove)
-      </span>
-      <span
-        aria-hidden="true"
-        className="c7"
-        onClick={[Function]}
-        size="extralarge"
-        tabIndex={-1}
-      >
-        <svg
-          aria-hidden="true"
-          className="octicon octicon-x"
-          fill="currentColor"
-          focusable="false"
-          height={24}
-          role="img"
-          style={
-            {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
-          }
-          viewBox="0 0 24 24"
-          width={24}
-        >
-          <path
-            d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-          />
-        </svg>
-      </span>
-    </span>
-    <span
-      className="c4"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      size="extralarge"
-      tabIndex={0}
-    >
-      <span
-        className="c5"
-        onClick={[Function]}
-      >
-        four
-      </span>
-      <span
-        className="c6"
-      >
-         (press backspace or delete to remove)
-      </span>
-      <span
-        aria-hidden="true"
-        className="c7"
-        onClick={[Function]}
-        size="extralarge"
-        tabIndex={-1}
-      >
-        <svg
-          aria-hidden="true"
-          className="octicon octicon-x"
-          fill="currentColor"
-          focusable="false"
-          height={24}
-          role="img"
-          style={
-            {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
-          }
-          viewBox="0 0 24 24"
-          width={24}
-        >
-          <path
-            d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-          />
-        </svg>
-      </span>
-    </span>
-    <span
-      className="c4"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      size="extralarge"
-      tabIndex={0}
-    >
-      <span
-        className="c5"
-        onClick={[Function]}
-      >
-        five
-      </span>
-      <span
-        className="c6"
-      >
-         (press backspace or delete to remove)
-      </span>
-      <span
-        aria-hidden="true"
-        className="c7"
-        onClick={[Function]}
-        size="extralarge"
-        tabIndex={-1}
-      >
-        <svg
-          aria-hidden="true"
-          className="octicon octicon-x"
-          fill="currentColor"
-          focusable="false"
-          height={24}
-          role="img"
-          style={
-            {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
-          }
-          viewBox="0 0 24 24"
-          width={24}
-        >
-          <path
-            d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-          />
-        </svg>
-      </span>
-    </span>
-    <span
-      className="c4"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      size="extralarge"
-      tabIndex={0}
-    >
-      <span
-        className="c5"
-        onClick={[Function]}
-      >
-        six
-      </span>
-      <span
-        className="c6"
-      >
-         (press backspace or delete to remove)
-      </span>
-      <span
-        aria-hidden="true"
-        className="c7"
-        onClick={[Function]}
-        size="extralarge"
-        tabIndex={-1}
-      >
-        <svg
-          aria-hidden="true"
-          className="octicon octicon-x"
-          fill="currentColor"
-          focusable="false"
-          height={24}
-          role="img"
-          style={
-            {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
-          }
-          viewBox="0 0 24 24"
-          width={24}
-        >
-          <path
-            d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-          />
-        </svg>
-      </span>
-    </span>
-    <span
-      className="c4"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      size="extralarge"
-      tabIndex={0}
-    >
-      <span
-        className="c5"
-        onClick={[Function]}
-      >
-        seven
-      </span>
-      <span
-        className="c6"
-      >
-         (press backspace or delete to remove)
-      </span>
-      <span
-        aria-hidden="true"
-        className="c7"
-        onClick={[Function]}
-        size="extralarge"
-        tabIndex={-1}
-      >
-        <svg
-          aria-hidden="true"
-          className="octicon octicon-x"
-          fill="currentColor"
-          focusable="false"
-          height={24}
-          role="img"
-          style={
-            {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
-          }
-          viewBox="0 0 24 24"
-          width={24}
-        >
-          <path
-            d="M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L12 13.06l-5.22 5.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.94 12 5.72 6.78a.75.75 0 0 1 0-1.06Z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>
-</span>
-`;
-
-exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
-.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;
-}
-
-.c6 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: #1F2328;
-  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);
-  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;
-  --inner-action-size: 24px;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.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;
-  outline: none;
-  box-shadow: inset 0 0 0 1px #0969da;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c0 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0 .TextInput-icon,
-.c0 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #656d76;
-  -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;
-}
-
-.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;
-  position: relative;
-  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(31,35,40,0.15);
-  border-style: solid;
-  border-width: 1px;
-  color: #656d76;
-  max-width: 100%;
-  padding-right: 0;
-}
-
-.c4:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
-}
-
-.c7 {
-  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;
-}
-
-.c7:hover,
-.c7:focus {
-  background-color: rgba(175,184,193,0.2);
-}
-
-.c7: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;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: normal;
-  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;
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
 <span
   className="c0"
   onClick={[Function]}

From 3e372e7e6f17f4e462c0139ac9bb29e1a8f76bcc Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Tue, 23 May 2023 20:54:05 +1000
Subject: [PATCH 2/2] add changeset

---
 .changeset/great-spies-deliver.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/great-spies-deliver.md

diff --git a/.changeset/great-spies-deliver.md b/.changeset/great-spies-deliver.md
new file mode 100644
index 00000000000..3a8005ec2ef
--- /dev/null
+++ b/.changeset/great-spies-deliver.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove deprecated `extralarge` variant from `Token` and `TextInputWithToken` component