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

package/lib/TextInputWithTokens/TextInputWithTokens.js

@@ -30,81 +30,106 @@ const overflowCountFontSizeMap = {
 
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent(t0, forwardedRef) {
-  const $ = reactCompilerRuntime.c(139);
+  const $ = reactCompilerRuntime.c(137);
   let IconComponent;
   let LeadingVisual;
+  let TokenComponent;
   let TrailingVisual;
   let block;
   let className;
   let contrast;
   let disabled;
+  let hideTokenRemoveButtons;
+  let loaderPosition;
   let loading;
   let maxHeight;
   let maxWidthProp;
   let minWidthProp;
   let onTokenRemove;
-  let rest;
+  let preventTokenWrapping;
+  let size;
   let style;
   let sxProp;
   let t1;
-  let t2;
-  let t3;
-  let t4;
-  let t5;
   let tokens;
   let validationStatus;
   let variantProp;
   let visibleTokenCount;
   let widthProp;
   if ($[0] !== t0) {
-    ({
-      icon: IconComponent,
-      leadingVisual: LeadingVisual,
-      trailingVisual: TrailingVisual,
-      loading,
-      loaderPosition: t1,
-      contrast,
-      className,
-      block,
-      disabled,
-      sx: sxProp,
-      tokens,
-      onTokenRemove,
-      tokenComponent: t2,
-      preventTokenWrapping: t3,
-      size: t4,
-      hideTokenRemoveButtons: t5,
-      maxHeight,
-      width: widthProp,
-      minWidth: minWidthProp,
-      maxWidth: maxWidthProp,
-      validationStatus,
-      variant: variantProp,
-      visibleTokenCount,
-      style,
+    const {
+      icon: t2,
+      leadingVisual: t3,
+      trailingVisual: t4,
+      loading: t5,
+      loaderPosition: t6,
+      contrast: t7,
+      className: t8,
+      block: t9,
+      disabled: t10,
+      sx: t11,
+      tokens: t12,
+      onTokenRemove: t13,
+      tokenComponent: t14,
+      preventTokenWrapping: t15,
+      size: t16,
+      hideTokenRemoveButtons: t17,
+      maxHeight: t18,
+      width: t19,
+      minWidth: t20,
+      maxWidth: t21,
+      validationStatus: t22,
+      variant: t23,
+      visibleTokenCount: t24,
+      style: t25,
       ...rest
-    } = t0);
+    } = t0;
+    IconComponent = t2;
+    LeadingVisual = t3;
+    TrailingVisual = t4;
+    loading = t5;
+    contrast = t7;
+    className = t8;
+    block = t9;
+    disabled = t10;
+    sxProp = t11;
+    tokens = t12;
+    onTokenRemove = t13;
+    maxHeight = t18;
+    widthProp = t19;
+    minWidthProp = t20;
+    maxWidthProp = t21;
+    validationStatus = t22;
+    variantProp = t23;
+    visibleTokenCount = t24;
+    style = t25;
+    loaderPosition = t6 === undefined ? "auto" : t6;
+    TokenComponent = t14 === undefined ? Token : t14;
+    preventTokenWrapping = t15 === undefined ? false : t15;
+    size = t16 === undefined ? "xlarge" : t16;
+    hideTokenRemoveButtons = t17 === undefined ? false : t17;
+    t1 = props.omit(rest);
     $[0] = t0;
     $[1] = IconComponent;
     $[2] = LeadingVisual;
-    $[3] = TrailingVisual;
-    $[4] = block;
-    $[5] = className;
-    $[6] = contrast;
-    $[7] = disabled;
-    $[8] = loading;
-    $[9] = maxHeight;
-    $[10] = maxWidthProp;
-    $[11] = minWidthProp;
-    $[12] = onTokenRemove;
-    $[13] = rest;
-    $[14] = style;
-    $[15] = sxProp;
-    $[16] = t1;
-    $[17] = t2;
-    $[18] = t3;
-    $[19] = t4;
-    $[20] = t5;
+    $[3] = TokenComponent;
+    $[4] = TrailingVisual;
+    $[5] = block;
+    $[6] = className;
+    $[7] = contrast;
+    $[8] = disabled;
+    $[9] = hideTokenRemoveButtons;
+    $[10] = loaderPosition;
+    $[11] = loading;
+    $[12] = maxHeight;
+    $[13] = maxWidthProp;
+    $[14] = minWidthProp;
+    $[15] = onTokenRemove;
+    $[16] = preventTokenWrapping;
+    $[17] = size;
+    $[18] = style;
+    $[19] = sxProp;
+    $[20] = t1;
     $[21] = tokens;
     $[22] = validationStatus;
     $[23] = variantProp;
@@ -113,79 +138,66 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
   } else {
     IconComponent = $[1];
     LeadingVisual = $[2];
-    TrailingVisual = $[3];
-    block = $[4];
-    className = $[5];
-    contrast = $[6];
-    disabled = $[7];
-    loading = $[8];
-    maxHeight = $[9];
-    maxWidthProp = $[10];
-    minWidthProp = $[11];
-    onTokenRemove = $[12];
-    rest = $[13];
-    style = $[14];
-    sxProp = $[15];
-    t1 = $[16];
-    t2 = $[17];
-    t3 = $[18];
-    t4 = $[19];
-    t5 = $[20];
+    TokenComponent = $[3];
+    TrailingVisual = $[4];
+    block = $[5];
+    className = $[6];
+    contrast = $[7];
+    disabled = $[8];
+    hideTokenRemoveButtons = $[9];
+    loaderPosition = $[10];
+    loading = $[11];
+    maxHeight = $[12];
+    maxWidthProp = $[13];
+    minWidthProp = $[14];
+    onTokenRemove = $[15];
+    preventTokenWrapping = $[16];
+    size = $[17];
+    style = $[18];
+    sxProp = $[19];
+    t1 = $[20];
     tokens = $[21];
     validationStatus = $[22];
     variantProp = $[23];
     visibleTokenCount = $[24];
     widthProp = $[25];
   }
-  const loaderPosition = t1 === undefined ? "auto" : t1;
-  const TokenComponent = t2 === undefined ? Token : t2;
-  const preventTokenWrapping = t3 === undefined ? false : t3;
-  const size = t4 === undefined ? "xlarge" : t4;
-  const hideTokenRemoveButtons = t5 === undefined ? false : t5;
-  let t6;
-  if ($[26] !== rest) {
-    t6 = props.omit(rest);
-    $[26] = rest;
-    $[27] = t6;
-  } else {
-    t6 = $[27];
-  }
   let inputPropsRest;
   let onBlur;
   let onFocus;
   let onKeyDown;
-  if ($[28] !== t6) {
+  if ($[26] !== t1) {
     ({
       onBlur,
       onFocus,
       onKeyDown,
       ...inputPropsRest
-    } = t6);
-    $[28] = t6;
-    $[29] = inputPropsRest;
-    $[30] = onBlur;
-    $[31] = onFocus;
-    $[32] = onKeyDown;
+    } = t1);
+    $[26] = t1;
+    $[27] = inputPropsRest;
+    $[28] = onBlur;
+    $[29] = onFocus;
+    $[30] = onKeyDown;
   } else {
-    inputPropsRest = $[29];
-    onBlur = $[30];
-    onFocus = $[31];
-    onKeyDown = $[32];
+    inputPropsRest = $[27];
+    onBlur = $[28];
+    onFocus = $[29];
+    onKeyDown = $[30];
   }
   const ref = React.useRef(null);
   useRefObjectAsForwardedRef.useRefObjectAsForwardedRef(forwardedRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = React.useState();
   const [tokensAreTruncated, setTokensAreTruncated] = React.useState(Boolean(visibleTokenCount));
-  let t7;
-  if ($[33] !== selectedTokenIndex) {
-    t7 = [selectedTokenIndex];
-    $[33] = selectedTokenIndex;
-    $[34] = t7;
+  let t2;
+  if ($[31] !== selectedTokenIndex) {
+    t2 = [selectedTokenIndex];
+    $[31] = selectedTokenIndex;
+    $[32] = t2;
   } else {
-    t7 = $[34];
+    t2 = $[32];
   }
   const {
-    containerRef: t8
+    containerRef: t3
   } = useFocusZone.useFocusZone({
     focusOutBehavior: "wrap",
     bindKeys: behaviors.FocusKeys.ArrowHorizontal | behaviors.FocusKeys.HomeAndEnd,
@@ -207,11 +219,11 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
       }
       return (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[nextIndex];
     }
-  }, t7);
-  const containerRef = t8;
-  let t9;
-  if ($[35] !== containerRef || $[36] !== onTokenRemove || $[37] !== selectedTokenIndex) {
-    t9 = tokenId => {
+  }, t2);
+  const containerRef = t3;
+  let t4;
+  if ($[33] !== containerRef || $[34] !== onTokenRemove || $[35] !== selectedTokenIndex) {
+    t4 = tokenId => {
       onTokenRemove(tokenId);
       setTimeout(() => {
         var _containerRef$current2, _containerRef$current3;
@@ -225,30 +237,30 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
         }
       }, 0);
     };
-    $[35] = containerRef;
-    $[36] = onTokenRemove;
-    $[37] = selectedTokenIndex;
-    $[38] = t9;
+    $[33] = containerRef;
+    $[34] = onTokenRemove;
+    $[35] = selectedTokenIndex;
+    $[36] = t4;
   } else {
-    t9 = $[38];
+    t4 = $[36];
   }
-  const handleTokenRemove = t9;
-  let t10;
-  if ($[39] !== disabled) {
-    t10 = tokenIndex => () => {
+  const handleTokenRemove = t4;
+  let t5;
+  if ($[37] !== disabled) {
+    t5 = tokenIndex => () => {
       if (!disabled) {
         setSelectedTokenIndex(tokenIndex);
       }
     };
-    $[39] = disabled;
-    $[40] = t10;
+    $[37] = disabled;
+    $[38] = t5;
   } else {
-    t10 = $[40];
+    t5 = $[38];
   }
-  const handleTokenFocus = t10;
-  let t11;
-  if ($[41] !== containerRef || $[42] !== visibleTokenCount) {
-    t11 = () => {
+  const handleTokenFocus = t5;
+  let t6;
+  if ($[39] !== containerRef || $[40] !== visibleTokenCount) {
+    t6 = () => {
       setSelectedTokenIndex(undefined);
       setTimeout(() => {
         var _containerRef$current4;
@@ -257,43 +269,43 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
         }
       }, 0);
     };
-    $[41] = containerRef;
-    $[42] = visibleTokenCount;
-    $[43] = t11;
+    $[39] = containerRef;
+    $[40] = visibleTokenCount;
+    $[41] = t6;
   } else {
-    t11 = $[43];
+    t6 = $[41];
   }
-  const handleTokenBlur = t11;
-  let t12;
-  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = event => {
+  const handleTokenBlur = t6;
+  let t7;
+  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = event => {
       if (event.key === "Escape") {
         var _ref$current2;
         (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
       }
     };
-    $[44] = t12;
+    $[42] = t7;
   } else {
-    t12 = $[44];
+    t7 = $[42];
   }
-  const handleTokenKeyUp = t12;
-  let t13;
-  if ($[45] !== onFocus || $[46] !== visibleTokenCount) {
-    t13 = event_0 => {
+  const handleTokenKeyUp = t7;
+  let t8;
+  if ($[43] !== onFocus || $[44] !== visibleTokenCount) {
+    t8 = event_0 => {
       onFocus && onFocus(event_0);
       setSelectedTokenIndex(undefined);
       visibleTokenCount && setTokensAreTruncated(false);
     };
-    $[45] = onFocus;
-    $[46] = visibleTokenCount;
-    $[47] = t13;
+    $[43] = onFocus;
+    $[44] = visibleTokenCount;
+    $[45] = t8;
   } else {
-    t13 = $[47];
+    t8 = $[45];
   }
-  const handleInputFocus = t13;
-  let t14;
-  if ($[48] !== containerRef || $[49] !== onBlur || $[50] !== visibleTokenCount) {
-    t14 = event_1 => {
+  const handleInputFocus = t8;
+  let t9;
+  if ($[46] !== containerRef || $[47] !== onBlur || $[48] !== visibleTokenCount) {
+    t9 = event_1 => {
       onBlur && onBlur(event_1);
       setTimeout(() => {
         var _containerRef$current5;
@@ -302,17 +314,17 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
         }
       }, 0);
     };
-    $[48] = containerRef;
-    $[49] = onBlur;
-    $[50] = visibleTokenCount;
-    $[51] = t14;
+    $[46] = containerRef;
+    $[47] = onBlur;
+    $[48] = visibleTokenCount;
+    $[49] = t9;
   } else {
-    t14 = $[51];
+    t9 = $[49];
   }
-  const handleInputBlur = t14;
-  let t15;
-  if ($[52] !== handleTokenRemove || $[53] !== onKeyDown || $[54] !== tokens) {
-    t15 = e => {
+  const handleInputBlur = t9;
+  let t10;
+  if ($[50] !== handleTokenRemove || $[51] !== onKeyDown || $[52] !== tokens) {
+    t10 = e => {
       var _ref$current3;
       if (onKeyDown) {
         onKeyDown(e);
@@ -332,116 +344,116 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
         }, 0);
       }
     };
-    $[52] = handleTokenRemove;
-    $[53] = onKeyDown;
-    $[54] = tokens;
-    $[55] = t15;
+    $[50] = handleTokenRemove;
+    $[51] = onKeyDown;
+    $[52] = tokens;
+    $[53] = t10;
   } else {
-    t15 = $[55];
+    t10 = $[53];
   }
-  const handleInputKeyDown = t15;
-  let t16;
-  if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
-    t16 = () => {
+  const handleInputKeyDown = t10;
+  let t11;
+  if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = () => {
       var _ref$current5;
       (_ref$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.focus();
     };
-    $[56] = t16;
+    $[54] = t11;
   } else {
-    t16 = $[56];
+    t11 = $[54];
   }
-  const focusInput = t16;
+  const focusInput = t11;
   const preventTokenClickPropagation = _temp3;
-  let t17;
-  if ($[57] !== tokens || $[58] !== tokensAreTruncated || $[59] !== visibleTokenCount) {
-    t17 = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
-    $[57] = tokens;
-    $[58] = tokensAreTruncated;
-    $[59] = visibleTokenCount;
-    $[60] = t17;
+  let t12;
+  if ($[55] !== tokens || $[56] !== tokensAreTruncated || $[57] !== visibleTokenCount) {
+    t12 = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
+    $[55] = tokens;
+    $[56] = tokensAreTruncated;
+    $[57] = visibleTokenCount;
+    $[58] = t12;
   } else {
-    t17 = $[60];
+    t12 = $[58];
   }
-  const visibleTokens = t17;
-  let t18;
-  if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
-    t18 = {
+  const visibleTokens = t12;
+  let t13;
+  if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = {
       small: "small",
       medium: "small",
       large: "medium",
       xlarge: "medium"
     };
-    $[61] = t18;
+    $[59] = t13;
   } else {
-    t18 = $[61];
+    t13 = $[59];
   }
-  const inputSizeMap = t18;
+  const inputSizeMap = t13;
   const showLeadingLoadingIndicator = loading && (loaderPosition === "leading" || Boolean(LeadingVisual && loaderPosition !== "trailing"));
   const showTrailingLoadingIndicator = loading && (loaderPosition === "trailing" || loaderPosition === "auto" && !LeadingVisual);
-  const t19 = Boolean(LeadingVisual || showLeadingLoadingIndicator);
-  const t20 = Boolean(TrailingVisual || showTrailingLoadingIndicator);
-  const t21 = inputSizeMap[size];
-  const t22 = Boolean(preventTokenWrapping || maxHeight) || undefined;
-  let t23;
-  if ($[62] !== className) {
-    t23 = clsx.clsx(className, TextInputWithTokens_module.TextInputWrapper);
-    $[62] = className;
-    $[63] = t23;
+  const t14 = Boolean(LeadingVisual || showLeadingLoadingIndicator);
+  const t15 = Boolean(TrailingVisual || showTrailingLoadingIndicator);
+  const t16 = inputSizeMap[size];
+  const t17 = Boolean(preventTokenWrapping || maxHeight) || undefined;
+  let t18;
+  if ($[60] !== className) {
+    t18 = clsx.clsx(className, TextInputWithTokens_module.TextInputWrapper);
+    $[60] = className;
+    $[61] = t18;
   } else {
-    t23 = $[63];
+    t18 = $[61];
   }
-  let t24;
-  if ($[64] !== maxHeight || $[65] !== style) {
-    t24 = maxHeight ? {
+  let t19;
+  if ($[62] !== maxHeight || $[63] !== style) {
+    t19 = maxHeight ? {
       maxHeight,
       ...style
     } : style;
-    $[64] = maxHeight;
-    $[65] = style;
-    $[66] = t24;
+    $[62] = maxHeight;
+    $[63] = style;
+    $[64] = t19;
   } else {
-    t24 = $[66];
+    t19 = $[64];
   }
-  let t25;
-  if ($[67] !== IconComponent || $[68] !== LeadingVisual) {
-    t25 = IconComponent && !LeadingVisual && /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
+  let t20;
+  if ($[65] !== IconComponent || $[66] !== LeadingVisual) {
+    t20 = IconComponent && !LeadingVisual && /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
       className: "TextInput-icon"
     });
-    $[67] = IconComponent;
-    $[68] = LeadingVisual;
-    $[69] = t25;
+    $[65] = IconComponent;
+    $[66] = LeadingVisual;
+    $[67] = t20;
   } else {
-    t25 = $[69];
+    t20 = $[67];
   }
-  const t26 = typeof loading === "boolean";
-  let t27;
-  if ($[70] !== LeadingVisual) {
-    t27 = typeof LeadingVisual !== "string" && reactIs.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntime.jsx(LeadingVisual, {}) : LeadingVisual;
-    $[70] = LeadingVisual;
-    $[71] = t27;
+  const t21 = typeof loading === "boolean";
+  let t22;
+  if ($[68] !== LeadingVisual) {
+    t22 = typeof LeadingVisual !== "string" && reactIs.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntime.jsx(LeadingVisual, {}) : LeadingVisual;
+    $[68] = LeadingVisual;
+    $[69] = t22;
   } else {
-    t27 = $[71];
+    t22 = $[69];
   }
-  let t28;
-  if ($[72] !== showLeadingLoadingIndicator || $[73] !== t26 || $[74] !== t27) {
-    t28 = /*#__PURE__*/jsxRuntime.jsx(TextInputInnerVisualSlot, {
-      hasLoadingIndicator: t26,
+  let t23;
+  if ($[70] !== showLeadingLoadingIndicator || $[71] !== t21 || $[72] !== t22) {
+    t23 = /*#__PURE__*/jsxRuntime.jsx(TextInputInnerVisualSlot, {
+      hasLoadingIndicator: t21,
       visualPosition: "leading",
       showLoadingIndicator: showLeadingLoadingIndicator,
-      children: t27
+      children: t22
     });
-    $[72] = showLeadingLoadingIndicator;
-    $[73] = t26;
-    $[74] = t27;
-    $[75] = t28;
+    $[70] = showLeadingLoadingIndicator;
+    $[71] = t21;
+    $[72] = t22;
+    $[73] = t23;
   } else {
-    t28 = $[75];
+    t23 = $[73];
   }
-  const t29 = containerRef;
-  const t30 = validationStatus === "error" ? "true" : "false";
-  let t31;
-  if ($[76] !== disabled || $[77] !== handleInputBlur || $[78] !== handleInputFocus || $[79] !== handleInputKeyDown || $[80] !== inputPropsRest || $[81] !== t30) {
-    t31 = /*#__PURE__*/jsxRuntime.jsx("div", {
+  const t24 = containerRef;
+  const t25 = validationStatus === "error" ? "true" : "false";
+  let t26;
+  if ($[74] !== disabled || $[75] !== handleInputBlur || $[76] !== handleInputFocus || $[77] !== handleInputKeyDown || $[78] !== inputPropsRest || $[79] !== t25) {
+    t26 = /*#__PURE__*/jsxRuntime.jsx("div", {
       className: TextInputWithTokens_module.InputWrapper,
       children: /*#__PURE__*/jsxRuntime.jsx(UnstyledTextInput, {
         ref: ref,
@@ -451,29 +463,29 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
         onKeyDown: handleInputKeyDown,
         type: "text",
         className: TextInputWithTokens_module.UnstyledTextInput,
-        "aria-invalid": t30,
+        "aria-invalid": t25,
         ...inputPropsRest
       })
     });
-    $[76] = disabled;
-    $[77] = handleInputBlur;
-    $[78] = handleInputFocus;
-    $[79] = handleInputKeyDown;
-    $[80] = inputPropsRest;
-    $[81] = t30;
-    $[82] = t31;
+    $[74] = disabled;
+    $[75] = handleInputBlur;
+    $[76] = handleInputFocus;
+    $[77] = handleInputKeyDown;
+    $[78] = inputPropsRest;
+    $[79] = t25;
+    $[80] = t26;
   } else {
-    t31 = $[82];
+    t26 = $[80];
   }
-  let t32;
-  if ($[83] !== TokenComponent || $[84] !== disabled || $[85] !== handleTokenBlur || $[86] !== handleTokenFocus || $[87] !== handleTokenRemove || $[88] !== hideTokenRemoveButtons || $[89] !== selectedTokenIndex || $[90] !== size || $[91] !== visibleTokens) {
-    let t33;
-    if ($[93] !== TokenComponent || $[94] !== disabled || $[95] !== handleTokenBlur || $[96] !== handleTokenFocus || $[97] !== handleTokenRemove || $[98] !== hideTokenRemoveButtons || $[99] !== selectedTokenIndex || $[100] !== size) {
-      t33 = (t34, i) => {
+  let t27;
+  if ($[81] !== TokenComponent || $[82] !== disabled || $[83] !== handleTokenBlur || $[84] !== handleTokenFocus || $[85] !== handleTokenRemove || $[86] !== hideTokenRemoveButtons || $[87] !== selectedTokenIndex || $[88] !== size || $[89] !== visibleTokens) {
+    let t28;
+    if ($[91] !== TokenComponent || $[92] !== disabled || $[93] !== handleTokenBlur || $[94] !== handleTokenFocus || $[95] !== handleTokenRemove || $[96] !== hideTokenRemoveButtons || $[97] !== selectedTokenIndex || $[98] !== size) {
+      t28 = (t29, i) => {
         const {
           id,
           ...tokenRest
-        } = t34;
+        } = t29;
         return /*#__PURE__*/jsxRuntime.jsx(TokenComponent, {
           disabled: disabled,
           onFocus: handleTokenFocus(i),
@@ -490,133 +502,133 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
           ...tokenRest
         }, id);
       };
-      $[93] = TokenComponent;
-      $[94] = disabled;
-      $[95] = handleTokenBlur;
-      $[96] = handleTokenFocus;
-      $[97] = handleTokenRemove;
-      $[98] = hideTokenRemoveButtons;
-      $[99] = selectedTokenIndex;
-      $[100] = size;
-      $[101] = t33;
+      $[91] = TokenComponent;
+      $[92] = disabled;
+      $[93] = handleTokenBlur;
+      $[94] = handleTokenFocus;
+      $[95] = handleTokenRemove;
+      $[96] = hideTokenRemoveButtons;
+      $[97] = selectedTokenIndex;
+      $[98] = size;
+      $[99] = t28;
     } else {
-      t33 = $[101];
+      t28 = $[99];
     }
-    t32 = visibleTokens.map(t33);
-    $[83] = TokenComponent;
-    $[84] = disabled;
-    $[85] = handleTokenBlur;
-    $[86] = handleTokenFocus;
-    $[87] = handleTokenRemove;
-    $[88] = hideTokenRemoveButtons;
-    $[89] = selectedTokenIndex;
-    $[90] = size;
-    $[91] = visibleTokens;
-    $[92] = t32;
+    t27 = visibleTokens.map(t28);
+    $[81] = TokenComponent;
+    $[82] = disabled;
+    $[83] = handleTokenBlur;
+    $[84] = handleTokenFocus;
+    $[85] = handleTokenRemove;
+    $[86] = hideTokenRemoveButtons;
+    $[87] = selectedTokenIndex;
+    $[88] = size;
+    $[89] = visibleTokens;
+    $[90] = t27;
   } else {
-    t32 = $[92];
+    t27 = $[90];
   }
-  let t33;
-  if ($[102] !== size || $[103] !== tokens || $[104] !== tokensAreTruncated || $[105] !== visibleTokens.length) {
-    t33 = tokensAreTruncated && tokens.length - visibleTokens.length ? /*#__PURE__*/jsxRuntime.jsxs(Text, {
+  let t28;
+  if ($[100] !== size || $[101] !== tokens || $[102] !== tokensAreTruncated || $[103] !== visibleTokens.length) {
+    t28 = tokensAreTruncated && tokens.length - visibleTokens.length ? /*#__PURE__*/jsxRuntime.jsxs(Text, {
       color: "fg.muted",
       fontSize: overflowCountFontSizeMap[size],
       children: ["+", tokens.length - visibleTokens.length]
     }) : null;
-    $[102] = size;
-    $[103] = tokens;
-    $[104] = tokensAreTruncated;
-    $[105] = visibleTokens.length;
-    $[106] = t33;
+    $[100] = size;
+    $[101] = tokens;
+    $[102] = tokensAreTruncated;
+    $[103] = visibleTokens.length;
+    $[104] = t28;
   } else {
-    t33 = $[106];
+    t28 = $[104];
   }
-  let t34;
-  if ($[107] !== preventTokenWrapping || $[108] !== t29 || $[109] !== t31 || $[110] !== t32 || $[111] !== t33) {
-    t34 = /*#__PURE__*/jsxRuntime.jsxs("div", {
-      ref: t29,
+  let t29;
+  if ($[105] !== preventTokenWrapping || $[106] !== t24 || $[107] !== t26 || $[108] !== t27 || $[109] !== t28) {
+    t29 = /*#__PURE__*/jsxRuntime.jsxs("div", {
+      ref: t24,
       className: TextInputWithTokens_module.Container,
       "data-prevent-token-wrapping": preventTokenWrapping,
-      children: [t31, t32, t33]
+      children: [t26, t27, t28]
     });
-    $[107] = preventTokenWrapping;
-    $[108] = t29;
-    $[109] = t31;
-    $[110] = t32;
-    $[111] = t33;
-    $[112] = t34;
+    $[105] = preventTokenWrapping;
+    $[106] = t24;
+    $[107] = t26;
+    $[108] = t27;
+    $[109] = t28;
+    $[110] = t29;
   } else {
-    t34 = $[112];
+    t29 = $[110];
   }
-  const t35 = typeof loading === "boolean";
-  let t36;
-  if ($[113] !== TrailingVisual) {
-    t36 = typeof TrailingVisual !== "string" && reactIs.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntime.jsx(TrailingVisual, {}) : TrailingVisual;
-    $[113] = TrailingVisual;
-    $[114] = t36;
+  const t30 = typeof loading === "boolean";
+  let t31;
+  if ($[111] !== TrailingVisual) {
+    t31 = typeof TrailingVisual !== "string" && reactIs.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntime.jsx(TrailingVisual, {}) : TrailingVisual;
+    $[111] = TrailingVisual;
+    $[112] = t31;
   } else {
-    t36 = $[114];
+    t31 = $[112];
   }
-  let t37;
-  if ($[115] !== showTrailingLoadingIndicator || $[116] !== t35 || $[117] !== t36) {
-    t37 = /*#__PURE__*/jsxRuntime.jsx(TextInputInnerVisualSlot, {
-      hasLoadingIndicator: t35,
+  let t32;
+  if ($[113] !== showTrailingLoadingIndicator || $[114] !== t30 || $[115] !== t31) {
+    t32 = /*#__PURE__*/jsxRuntime.jsx(TextInputInnerVisualSlot, {
+      hasLoadingIndicator: t30,
       visualPosition: "trailing",
       showLoadingIndicator: showTrailingLoadingIndicator,
-      children: t36
+      children: t31
     });
-    $[115] = showTrailingLoadingIndicator;
-    $[116] = t35;
-    $[117] = t36;
-    $[118] = t37;
+    $[113] = showTrailingLoadingIndicator;
+    $[114] = t30;
+    $[115] = t31;
+    $[116] = t32;
   } else {
-    t37 = $[118];
+    t32 = $[116];
   }
-  let t38;
-  if ($[119] !== block || $[120] !== contrast || $[121] !== disabled || $[122] !== maxWidthProp || $[123] !== minWidthProp || $[124] !== sxProp || $[125] !== t19 || $[126] !== t20 || $[127] !== t21 || $[128] !== t22 || $[129] !== t23 || $[130] !== t24 || $[131] !== t25 || $[132] !== t28 || $[133] !== t34 || $[134] !== t37 || $[135] !== validationStatus || $[136] !== variantProp || $[137] !== widthProp) {
-    t38 = /*#__PURE__*/jsxRuntime.jsxs(TextInputWrapper.TextInputWrapper, {
+  let t33;
+  if ($[117] !== block || $[118] !== contrast || $[119] !== disabled || $[120] !== maxWidthProp || $[121] !== minWidthProp || $[122] !== sxProp || $[123] !== t14 || $[124] !== t15 || $[125] !== t16 || $[126] !== t17 || $[127] !== t18 || $[128] !== t19 || $[129] !== t20 || $[130] !== t23 || $[131] !== t29 || $[132] !== t32 || $[133] !== validationStatus || $[134] !== variantProp || $[135] !== widthProp) {
+    t33 = /*#__PURE__*/jsxRuntime.jsxs(TextInputWrapper.TextInputWrapper, {
       block: block,
       contrast: contrast,
       disabled: disabled,
-      hasLeadingVisual: t19,
-      hasTrailingVisual: t20,
+      hasLeadingVisual: t14,
+      hasTrailingVisual: t15,
       width: widthProp,
       minWidth: minWidthProp,
       maxWidth: maxWidthProp,
-      size: t21,
+      size: t16,
       validationStatus: validationStatus,
       variant: variantProp,
       onClick: focusInput,
-      "data-token-wrapping": t22,
-      className: t23,
-      style: t24,
+      "data-token-wrapping": t17,
+      className: t18,
+      style: t19,
       sx: sxProp,
-      children: [t25, t28, t34, t37]
+      children: [t20, t23, t29, t32]
     });
-    $[119] = block;
-    $[120] = contrast;
-    $[121] = disabled;
-    $[122] = maxWidthProp;
-    $[123] = minWidthProp;
-    $[124] = sxProp;
-    $[125] = t19;
-    $[126] = t20;
-    $[127] = t21;
-    $[128] = t22;
-    $[129] = t23;
-    $[130] = t24;
-    $[131] = t25;
-    $[132] = t28;
-    $[133] = t34;
-    $[134] = t37;
-    $[135] = validationStatus;
-    $[136] = variantProp;
-    $[137] = widthProp;
-    $[138] = t38;
+    $[117] = block;
+    $[118] = contrast;
+    $[119] = disabled;
+    $[120] = maxWidthProp;
+    $[121] = minWidthProp;
+    $[122] = sxProp;
+    $[123] = t14;
+    $[124] = t15;
+    $[125] = t16;
+    $[126] = t17;
+    $[127] = t18;
+    $[128] = t19;
+    $[129] = t20;
+    $[130] = t23;
+    $[131] = t29;
+    $[132] = t32;
+    $[133] = validationStatus;
+    $[134] = variantProp;
+    $[135] = widthProp;
+    $[136] = t33;
   } else {
-    t38 = $[138];
+    t33 = $[136];
   }
-  return t38;
+  return t33;
 }
 function _temp3(event_2) {
   event_2.stopPropagation();