@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2

package/lib-esm/Token/IssueLabelToken-0dbbbcdf.css

@@ -0,0 +1,2 @@
+.prc-Token-IssueLabel-ZuoEW{--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/255 + var(--label-g)*0.7152/255 + var(--label-b)*0.0722/255);--lightness-switch:max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold))*-1000),1));border-style:solid;border-width:var(--borderWidth-thin,.0625rem);position:relative}.prc-Token-IssueLabel-ZuoEW:where([data-in-color-mode*=light],[data-in-color-mode=auto]){--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));border-color:hsla(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) - 25)*1%),var(--border-alpha));color:hsl(0deg,0%,calc(var(--lightness-switch)*100%))}.prc-Token-IssueLabel-ZuoEW:where([data-in-color-mode*=dark]){--lightness-threshold:0.6;--background-alpha:0.18;--border-alpha:0.3;--lighten-by:calc((var(--lightness-threshold) - var(--perceived-lightness))*100*var(--lightness-switch));background:rgba(var(--label-r),var(--label-g),var(--label-b),var(--background-alpha));border-color:hsla(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) + var(--lighten-by))*1%),var(--border-alpha));color:hsl(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) + var(--lighten-by))*1%))}.prc-Token-IssueLabel-ZuoEW:where([data-selected=true][data-in-color-mode*=light],[data-selected=true][data-in-color-mode=auto]){background:hsl(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) - 5)*1%))}.prc-Token-IssueLabel-ZuoEW:where([data-selected=true]){outline:none}.prc-Token-IssueLabel-ZuoEW:where([data-selected=true]):after{border-radius:var(--borderRadius-full,624.9375rem);bottom:calc(var(--base-size-2,.125rem)*-1);content:"";display:block;left:calc(var(--base-size-2,.125rem)*-1);pointer-events:none;position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:calc(var(--base-size-2,.125rem)*-1);z-index:1}.prc-Token-IssueLabel-ZuoEW:where([data-selected=true][data-in-color-mode*=light],[data-selected=true][data-in-color-mode=auto]):after{box-shadow:0 0 0 2px rgb(var(--label-r),var(--label-g),var(--label-b))}.prc-Token-IssueLabel-ZuoEW:where([data-selected=true][data-in-color-mode=dark]):after{box-shadow:0 0 0 2px hsl(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) + var(--lighten-by))*1%))}.prc-Token-IssueLabel-ZuoEW:where([data-cursor-is-interactive=true]:hover[data-in-color-mode*=light],[data-cursor-is-interactive=true]:hover[data-in-color-mode=auto]){background-image:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)),rgb(var(--label-r),var(--label-g),var(--label-b)));box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium))}.prc-Token-IssueLabel-ZuoEW:where([data-cursor-is-interactive=true]:hover[data-in-color-mode=dark]){background:hsla(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) + 10)*1%),.3);box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium))}.prc-Token-IssueLabel-ZuoEW:where([data-has-remove-button=true]){padding-right:0}.prc-Token-RemoveButton-H4Dmg:where([data-has-multiple-action-targets=true]){position:relative;z-index:1}
+/*# sourceMappingURL=IssueLabelToken-0dbbbcdf.css.map */

package/lib-esm/Token/IssueLabelToken-0dbbbcdf.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Token/IssueLabelToken.module.css"],"names":[],"mappings":"AAAA,4BAEE,aAAc,CACd,aAAc,CACd,aAAc,CACd,WAAY,CACZ,WAAY,CACZ,YAAa,CACb,6GAEC,CACD,sGAA2G,CAI3G,kBAAmB,CADnB,6CAAqC,CADrC,iBAGF,CAGA,yFACE,2BAA4B,CAC5B,uBAAwB,CACxB,6FAAkG,CAElG,4DAA+D,CAI/D,4GAAoH,CAFpH,qDAGF,CAGA,8DACE,yBAA0B,CAC1B,uBAAwB,CACxB,kBAAmB,CACnB,wGAA+G,CAG/G,qFAAyF,CAIzF,2HAKC,CAPD,+FASF,CAGA,iIAKE,oFACF,CAEA,wDACE,YACF,CAEA,8DAUE,kDAAuC,CAJvC,0CAAqC,CALrC,UAAW,CAOX,aAAc,CADd,wCAAmC,CAEnC,mBAAoB,CAPpB,iBAAkB,CAGlB,yCAAoC,CADpC,uCAAkC,CADlC,SAQF,CAEA,uIAKE,sEACF,CAEA,uFAEE,8GACF,CAGA,uKAIE,sLAIG,CACH,kEACF,CAEA,oGAEE,yFAAsG,CACtG,kEACF,CAGA,iEACE,eACF,CAEA,6EACE,iBAAkB,CAClB,SACF","file":"IssueLabelToken-0dbbbcdf.css","sourcesContent":[".IssueLabel {\n  /* Color variables - dynamically set via inline CSS custom properties */\n  --label-r: 153;\n  --label-g: 153;\n  --label-b: 153;\n  --label-h: 0;\n  --label-s: 0;\n  --label-l: 60;\n  --perceived-lightness: calc(\n    ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255\n  );\n  --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));\n\n  position: relative;\n  border-width: var(--borderWidth-thin);\n  border-style: solid;\n}\n\n/* Light mode styles */\n.IssueLabel:where([data-in-color-mode*='light'], [data-in-color-mode='auto']) {\n  --lightness-threshold: 0.453;\n  --border-threshold: 0.96;\n  --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));\n  /* stylelint-disable-next-line primer/colors */\n  background: rgb(var(--label-r), var(--label-g), var(--label-b));\n  /* stylelint-disable-next-line primer/colors */\n  color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));\n  /* stylelint-disable-next-line primer/colors */\n  border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));\n}\n\n/* Dark mode styles */\n.IssueLabel:where([data-in-color-mode*='dark']) {\n  --lightness-threshold: 0.6;\n  --background-alpha: 0.18;\n  --border-alpha: 0.3;\n  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));\n\n  /* stylelint-disable-next-line primer/colors */\n  background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));\n  /* stylelint-disable-next-line primer/colors */\n  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));\n  /* stylelint-disable primer/colors */\n  border-color: hsla(\n    var(--label-h),\n    calc(var(--label-s) * 1%),\n    calc((var(--label-l) + var(--lighten-by)) * 1%),\n    var(--border-alpha)\n  );\n  /* stylelint-enable primer/colors */\n}\n\n/* Selected state */\n.IssueLabel:where(\n    [data-selected='true'][data-in-color-mode*='light'],\n    [data-selected='true'][data-in-color-mode='auto']\n  ) {\n  /* stylelint-disable-next-line primer/colors */\n  background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));\n}\n\n.IssueLabel:where([data-selected='true']) {\n  outline: none;\n}\n\n.IssueLabel:where([data-selected='true'])::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--base-size-2) * -1);\n  right: calc(var(--base-size-2) * -1);\n  bottom: calc(var(--base-size-2) * -1);\n  left: calc(var(--base-size-2) * -1);\n  display: block;\n  pointer-events: none;\n  border-radius: var(--borderRadius-full);\n}\n\n.IssueLabel:where(\n    [data-selected='true'][data-in-color-mode*='light'],\n    [data-selected='true'][data-in-color-mode='auto']\n  )::after {\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));\n}\n\n.IssueLabel:where([data-selected='true'][data-in-color-mode='dark'])::after {\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 0 0 2px hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));\n}\n\n/* Interactive hover states */\n.IssueLabel:where(\n    [data-cursor-is-interactive='true']:hover[data-in-color-mode*='light'],\n    [data-cursor-is-interactive='true']:hover[data-in-color-mode='auto']\n  ) {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),\n    linear-gradient(\n      rgb(var(--label-r), var(--label-g), var(--label-b)),\n      rgb(var(--label-r), var(--label-g), var(--label-b))\n    );\n  box-shadow: var(--shadow-resting-medium);\n}\n\n.IssueLabel:where([data-cursor-is-interactive='true']:hover[data-in-color-mode='dark']) {\n  /* stylelint-disable-next-line primer/colors */\n  background: hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);\n  box-shadow: var(--shadow-resting-medium);\n}\n\n/* Remove button styling */\n.IssueLabel:where([data-has-remove-button='true']) {\n  padding-right: 0;\n}\n\n.RemoveButton:where([data-has-multiple-action-targets='true']) {\n  position: relative;\n  z-index: 1;\n}\n"]}

package/lib-esm/Token/IssueLabelToken.js

@@ -8,28 +8,6 @@ import classes from './IssueLabelToken.module.css.js';
 import { clsx } from 'clsx';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const tokenBorderWidthPx = 1;
-const lightModeStyles = {
-  '--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%))',
-  borderWidth: tokenBorderWidthPx,
-  borderStyle: 'solid',
-  borderColor: 'hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha))'
-};
-const darkModeStyles = {
-  '--lightness-threshold': '0.6',
-  '--background-alpha': '0.18',
-  '--border-alpha': '0.3',
-  '--lighten-by': 'calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch))',
-  borderWidth: tokenBorderWidthPx,
-  borderStyle: 'solid',
-  background: 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))',
-  color: 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))',
-  borderColor: 'hsla(var(--label-h), calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%),var(--border-alpha))'
-};
 const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     as,
@@ -58,56 +36,18 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     e.stopPropagation();
     onRemove && onRemove();
   };
-  const labelStyles = useMemo(() => {
+  const customProperties = useMemo(() => {
     const [r, g, b] = parseToRgba(fillColor);
     const [h, s, l] = parseToHsla(fillColor);
-    const isLightScheme = !(resolvedColorScheme !== null && resolvedColorScheme !== void 0 && resolvedColorScheme.startsWith('dark')); // fall back to light colors for unknown schemes
-
-    // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
-    // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon.
     return {
       '--label-r': String(r),
       '--label-g': String(g),
       '--label-b': String(b),
       '--label-h': String(Math.round(h)),
       '--label-s': String(Math.round(s * 100)),
-      '--label-l': String(Math.round(l * 100)),
-      '--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))',
-      paddingRight: hideRemoveButton || !onRemove ? undefined : 0,
-      position: 'relative',
-      ...(isLightScheme ? lightModeStyles : darkModeStyles),
-      ...(isSelected ? {
-        background: isLightScheme ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))' : darkModeStyles.background,
-        ':focus': {
-          outline: 'none'
-        },
-        ':after': {
-          content: '""',
-          position: 'absolute',
-          zIndex: 1,
-          top: `-${tokenBorderWidthPx * 2}px`,
-          right: `-${tokenBorderWidthPx * 2}px`,
-          bottom: `-${tokenBorderWidthPx * 2}px`,
-          left: `-${tokenBorderWidthPx * 2}px`,
-          display: 'block',
-          pointerEvents: 'none',
-          boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${isLightScheme ? 'rgb(var(--label-r), var(--label-g), var(--label-b))' : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))'}`,
-          borderRadius: '999px'
-        }
-      } : {}),
-      ...(isTokenInteractive(props) ? {
-        '&:hover': {
-          ...(isLightScheme ? {
-            backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)), rgb(var(--label-r),var(--label-g),var(--label-b)))'
-          } : {
-            background: 'hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);'
-          }),
-          boxShadow: 'shadow.medium'
-        }
-      } : {})
+      '--label-l': String(Math.round(l * 100))
     };
-  }, [fillColor, resolvedColorScheme, hideRemoveButton, onRemove, isSelected, props]);
+  }, [fillColor]);
   return /*#__PURE__*/jsxs(TokenBase, {
     onRemove: onRemove,
     id: id === null || id === void 0 ? void 0 : id.toString(),
@@ -115,8 +55,10 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(classes.IssueLabel, className),
     text: text,
     size: size,
-    style: labelStyles,
+    style: customProperties,
     "data-has-remove-button": !hideRemoveButton && !!onRemove,
+    "data-selected": isSelected,
+    "data-in-color-mode": resolvedColorScheme || 'light',
     ...(!hasMultipleActionTargets ? interactiveTokenProps : {}),
     ...rest,
     ref: forwardedRef,
@@ -124,7 +66,7 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       ...(hasMultipleActionTargets ? interactiveTokenProps : {}),
       children: text
     }), !hideRemoveButton && onRemove ? /*#__PURE__*/jsx(RemoveTokenButton, {
-      borderOffset: tokenBorderWidthPx,
+      borderOffset: 1,
       onClick: onRemoveClick,
       size: size,
       "aria-hidden": hasMultipleActionTargets ? 'true' : 'false',

package/lib-esm/Token/IssueLabelToken.module.css.js

@@ -1,4 +1,4 @@
-import './IssueLabelToken-99c9b914.css';
+import './IssueLabelToken-0dbbbcdf.css';
 
 var classes = {"IssueLabel":"prc-Token-IssueLabel-ZuoEW","RemoveButton":"prc-Token-RemoveButton-H4Dmg"};
 

package/lib-esm/Token/Token.js

@@ -1,6 +1,5 @@
 import { c } from 'react-compiler-runtime';
 import { forwardRef } from 'react';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
 import TokenBase, { isTokenInteractive, defaultTokenSize } from './TokenBase.js';
 import RemoveTokenButton from './_RemoveTokenButton.js';
 import TokenTextContainer from './_TokenTextContainer.js';
@@ -49,7 +48,7 @@ const LeadingVisualContainer = t0 => {
   return t3;
 };
 const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  const $ = c(68);
+  const $ = c(66);
   let LeadingVisual;
   let as;
   let className;
@@ -61,7 +60,6 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   let rest;
   let style;
   let t0;
-  let t1;
   let text;
   if ($[0] !== props) {
     ({
@@ -74,7 +72,6 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       hideRemoveButton,
       href,
       onClick,
-      sx: t1,
       className,
       style,
       ...rest
@@ -91,8 +88,7 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     $[9] = rest;
     $[10] = style;
     $[11] = t0;
-    $[12] = t1;
-    $[13] = text;
+    $[12] = text;
   } else {
     LeadingVisual = $[1];
     as = $[2];
@@ -105,187 +101,183 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     rest = $[9];
     style = $[10];
     t0 = $[11];
-    t1 = $[12];
-    text = $[13];
+    text = $[12];
   }
   const size = t0 === undefined ? defaultTokenSize : t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  let t2;
-  if ($[14] !== hideRemoveButton || $[15] !== onRemove || $[16] !== props) {
-    t2 = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton;
-    $[14] = hideRemoveButton;
-    $[15] = onRemove;
-    $[16] = props;
-    $[17] = t2;
+  let t1;
+  if ($[13] !== hideRemoveButton || $[14] !== onRemove || $[15] !== props) {
+    t1 = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton;
+    $[13] = hideRemoveButton;
+    $[14] = onRemove;
+    $[15] = props;
+    $[16] = t1;
   } else {
-    t2 = $[17];
+    t1 = $[16];
   }
-  const hasMultipleActionTargets = t2;
-  let t3;
-  if ($[18] !== onRemove) {
-    t3 = e => {
+  const hasMultipleActionTargets = t1;
+  let t2;
+  if ($[17] !== onRemove) {
+    t2 = e => {
       e.stopPropagation();
       onRemove && onRemove();
     };
-    $[18] = onRemove;
-    $[19] = t3;
+    $[17] = onRemove;
+    $[18] = t2;
   } else {
-    t3 = $[19];
+    t2 = $[18];
   }
-  const onRemoveClick = t3;
-  let t4;
-  if ($[20] !== as || $[21] !== href || $[22] !== onClick) {
-    t4 = {
+  const onRemoveClick = t2;
+  let t3;
+  if ($[19] !== as || $[20] !== href || $[21] !== onClick) {
+    t3 = {
       as,
       href,
       onClick
     };
-    $[20] = as;
-    $[21] = href;
-    $[22] = onClick;
-    $[23] = t4;
+    $[19] = as;
+    $[20] = href;
+    $[21] = onClick;
+    $[22] = t3;
   } else {
-    t4 = $[23];
+    t3 = $[22];
   }
-  const interactiveTokenProps = t4;
-  let t5;
-  if ($[24] !== id) {
+  const interactiveTokenProps = t3;
+  let t4;
+  if ($[23] !== id) {
     var _id;
-    t5 = (_id = id) === null || _id === void 0 ? void 0 : _id.toString();
-    $[24] = id;
-    $[25] = t5;
+    t4 = (_id = id) === null || _id === void 0 ? void 0 : _id.toString();
+    $[23] = id;
+    $[24] = t4;
   } else {
-    t5 = $[25];
+    t4 = $[24];
   }
-  let t6;
-  if ($[26] !== className) {
-    t6 = clsx(className, classes.Token);
-    $[26] = className;
-    $[27] = t6;
+  let t5;
+  if ($[25] !== className) {
+    t5 = clsx(className, classes.Token);
+    $[25] = className;
+    $[26] = t5;
   } else {
-    t6 = $[27];
+    t5 = $[26];
   }
-  const t7 = !(hideRemoveButton || !onRemove);
-  let t8;
-  if ($[28] !== hasMultipleActionTargets || $[29] !== interactiveTokenProps) {
-    t8 = !hasMultipleActionTargets ? interactiveTokenProps : {};
-    $[28] = hasMultipleActionTargets;
-    $[29] = interactiveTokenProps;
-    $[30] = t8;
+  const t6 = !(hideRemoveButton || !onRemove);
+  let t7;
+  if ($[27] !== hasMultipleActionTargets || $[28] !== interactiveTokenProps) {
+    t7 = !hasMultipleActionTargets ? interactiveTokenProps : {};
+    $[27] = hasMultipleActionTargets;
+    $[28] = interactiveTokenProps;
+    $[29] = t7;
   } else {
-    t8 = $[30];
+    t7 = $[29];
   }
-  let t9;
-  if ($[31] !== style) {
-    t9 = {
+  let t8;
+  if ($[30] !== style) {
+    t8 = {
       borderWidth: `${tokenBorderWidthPx}px`,
       ...style
     };
-    $[31] = style;
-    $[32] = t9;
+    $[30] = style;
+    $[31] = t8;
   } else {
-    t9 = $[32];
+    t8 = $[31];
   }
-  let t10;
-  if ($[33] !== LeadingVisual || $[34] !== size) {
-    t10 = LeadingVisual ? /*#__PURE__*/jsx(LeadingVisualContainer, {
+  let t9;
+  if ($[32] !== LeadingVisual || $[33] !== size) {
+    t9 = LeadingVisual ? /*#__PURE__*/jsx(LeadingVisualContainer, {
       size: size,
       children: /*#__PURE__*/jsx(LeadingVisual, {})
     }) : null;
-    $[33] = LeadingVisual;
-    $[34] = size;
-    $[35] = t10;
+    $[32] = LeadingVisual;
+    $[33] = size;
+    $[34] = t9;
   } else {
-    t10 = $[35];
+    t9 = $[34];
   }
-  let t11;
-  if ($[36] !== hasMultipleActionTargets || $[37] !== interactiveTokenProps) {
-    t11 = hasMultipleActionTargets ? interactiveTokenProps : {};
-    $[36] = hasMultipleActionTargets;
-    $[37] = interactiveTokenProps;
-    $[38] = t11;
+  let t10;
+  if ($[35] !== hasMultipleActionTargets || $[36] !== interactiveTokenProps) {
+    t10 = hasMultipleActionTargets ? interactiveTokenProps : {};
+    $[35] = hasMultipleActionTargets;
+    $[36] = interactiveTokenProps;
+    $[37] = t10;
   } else {
-    t11 = $[38];
+    t10 = $[37];
   }
-  let t12;
-  if ($[39] !== onRemove) {
-    t12 = onRemove && /*#__PURE__*/jsx(VisuallyHidden, {
+  let t11;
+  if ($[38] !== onRemove) {
+    t11 = onRemove && /*#__PURE__*/jsx(VisuallyHidden, {
       children: " (press backspace or delete to remove)"
     });
-    $[39] = onRemove;
-    $[40] = t12;
+    $[38] = onRemove;
+    $[39] = t11;
   } else {
-    t12 = $[40];
+    t11 = $[39];
   }
-  let t13;
-  if ($[41] !== t11 || $[42] !== t12 || $[43] !== text) {
-    t13 = /*#__PURE__*/jsxs(TokenTextContainer, {
-      ...t11,
-      children: [text, t12]
+  let t12;
+  if ($[40] !== t10 || $[41] !== t11 || $[42] !== text) {
+    t12 = /*#__PURE__*/jsxs(TokenTextContainer, {
+      ...t10,
+      children: [text, t11]
     });
+    $[40] = t10;
     $[41] = t11;
-    $[42] = t12;
-    $[43] = text;
-    $[44] = t13;
+    $[42] = text;
+    $[43] = t12;
   } else {
-    t13 = $[44];
+    t12 = $[43];
   }
-  let t14;
-  if ($[45] !== hasMultipleActionTargets || $[46] !== hideRemoveButton || $[47] !== onRemove || $[48] !== onRemoveClick || $[49] !== props || $[50] !== size) {
-    t14 = !hideRemoveButton && onRemove ? /*#__PURE__*/jsx(RemoveTokenButton, {
+  let t13;
+  if ($[44] !== hasMultipleActionTargets || $[45] !== hideRemoveButton || $[46] !== onRemove || $[47] !== onRemoveClick || $[48] !== props || $[49] !== size) {
+    t13 = !hideRemoveButton && onRemove ? /*#__PURE__*/jsx(RemoveTokenButton, {
       borderOffset: tokenBorderWidthPx,
       onClick: onRemoveClick,
       size: size,
       isParentInteractive: isTokenInteractive(props),
       "aria-hidden": hasMultipleActionTargets ? "true" : "false"
     }) : null;
-    $[45] = hasMultipleActionTargets;
-    $[46] = hideRemoveButton;
-    $[47] = onRemove;
-    $[48] = onRemoveClick;
-    $[49] = props;
-    $[50] = size;
-    $[51] = t14;
+    $[44] = hasMultipleActionTargets;
+    $[45] = hideRemoveButton;
+    $[46] = onRemove;
+    $[47] = onRemoveClick;
+    $[48] = props;
+    $[49] = size;
+    $[50] = t13;
   } else {
-    t14 = $[51];
+    t13 = $[50];
   }
-  let t15;
-  if ($[52] !== forwardedRef || $[53] !== onRemove || $[54] !== props.isSelected || $[55] !== rest || $[56] !== size || $[57] !== sxProp || $[58] !== t10 || $[59] !== t13 || $[60] !== t14 || $[61] !== t5 || $[62] !== t6 || $[63] !== t7 || $[64] !== t8 || $[65] !== t9 || $[66] !== text) {
-    t15 = /*#__PURE__*/jsxs(TokenBase, {
+  let t14;
+  if ($[51] !== forwardedRef || $[52] !== onRemove || $[53] !== props.isSelected || $[54] !== rest || $[55] !== size || $[56] !== t12 || $[57] !== t13 || $[58] !== t4 || $[59] !== t5 || $[60] !== t6 || $[61] !== t7 || $[62] !== t8 || $[63] !== t9 || $[64] !== text) {
+    t14 = /*#__PURE__*/jsxs(TokenBase, {
       onRemove: onRemove,
-      id: t5,
-      className: t6,
+      id: t4,
+      className: t5,
       text: text,
       size: size,
-      sx: sxProp,
       "data-is-selected": props.isSelected,
-      "data-is-remove-btn": t7,
-      ...t8,
+      "data-is-remove-btn": t6,
+      ...t7,
       ...rest,
       ref: forwardedRef,
-      style: t9,
-      children: [t10, t13, t14]
+      style: t8,
+      children: [t9, t12, t13]
     });
-    $[52] = forwardedRef;
-    $[53] = onRemove;
-    $[54] = props.isSelected;
-    $[55] = rest;
-    $[56] = size;
-    $[57] = sxProp;
-    $[58] = t10;
-    $[59] = t13;
-    $[60] = t14;
-    $[61] = t5;
-    $[62] = t6;
-    $[63] = t7;
-    $[64] = t8;
-    $[65] = t9;
-    $[66] = text;
-    $[67] = t15;
+    $[51] = forwardedRef;
+    $[52] = onRemove;
+    $[53] = props.isSelected;
+    $[54] = rest;
+    $[55] = size;
+    $[56] = t12;
+    $[57] = t13;
+    $[58] = t4;
+    $[59] = t5;
+    $[60] = t6;
+    $[61] = t7;
+    $[62] = t8;
+    $[63] = t9;
+    $[64] = text;
+    $[65] = t14;
   } else {
-    t15 = $[67];
+    t14 = $[65];
   }
-  return t15;
+  return t14;
 });
 Token.displayName = 'Token';