@charcoal-ui/react 3.6.0 → 3.7.0

package/dist/index.cjs.js

@@ -110,7 +110,6 @@ function CharcoalProvider({
 
 // src/components/Button/index.tsx
 var import_react2 = require("react");
-var import_styled_components3 = __toESM(require("styled-components"));
 
 // src/_lib/index.ts
 function unreachable(value) {
@@ -134,6 +133,45 @@ function countCodePointsInString(string) {
   return Array.from(string).length;
 }
 
+// src/components/Button/lib/variantToFont.tsx
+function variantToFont(variant) {
+  switch (variant) {
+    case "Overlay":
+      return "text5";
+    case "Default":
+      return "text2";
+    case "Primary":
+      return "text5";
+    case "Navigation":
+      return "text5";
+    case "Danger":
+      return "text5";
+    default:
+      return unreachable(variant);
+  }
+}
+
+// src/components/Button/lib/variantToBackground.tsx
+function variantToBackground(variant) {
+  switch (variant) {
+    case "Overlay":
+      return "surface4";
+    case "Default":
+      return "surface3";
+    case "Primary":
+      return "brand";
+    case "Navigation":
+      return "surface6";
+    case "Danger":
+      return "assertive";
+    default:
+      return unreachable(variant);
+  }
+}
+
+// src/components/Button/StyledButton.tsx
+var import_styled_components3 = __toESM(require("styled-components"));
+
 // src/components/Clickable/index.tsx
 var React2 = __toESM(require("react"));
 var import_styled_components2 = __toESM(require("styled-components"));
@@ -204,31 +242,7 @@ var StyledClickableDiv = import_styled_components2.default.div`
   }
 `;
 
-// src/components/Button/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Button = (0, import_react2.forwardRef)(function Button2({
-  children,
-  variant = "Default",
-  size = "M",
-  fullWidth: fixed = false,
-  disabled = false,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    StyledButton,
-    {
-      ...rest,
-      disabled,
-      $background: variantToBackground(variant),
-      $color: variantToFont(variant),
-      $size: size,
-      $fullWidth: fixed,
-      ref,
-      children
-    }
-  );
-});
-var Button_default = Button;
+// src/components/Button/StyledButton.tsx
 var horizontalPaddingSmall = import_styled_components3.css`
   padding-right: 16px;
   padding-left: 16px;
@@ -251,7 +265,6 @@ var StyledButton = (0, import_styled_components3.default)(Clickable_default)`
   font-weight: bold;
 
   ${(p) => p.$size === "M" ? horizontalPaddingMedium : horizontalPaddingSmall}
-
   color: var(--charcoal-${(p) => p.$color});
   background-color: var(--charcoal-${(p) => p.$background});
   transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
@@ -279,42 +292,34 @@ var StyledButton = (0, import_styled_components3.default)(Clickable_default)`
   &[aria-disabled]:not([aria-disabled='false']) {
     opacity: 0.32;
   }
-
-  /* よく考えたらheight=32って定義が存在しないな... */
   height: ${(p) => p.$size === "M" ? 40 : 32}px;
 `;
-function variantToBackground(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "surface4";
-    case "Default":
-      return "surface3";
-    case "Primary":
-      return "brand";
-    case "Navigation":
-      return "surface6";
-    case "Danger":
-      return "assertive";
-    default:
-      return unreachable(variant);
-  }
-}
-function variantToFont(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "text5";
-    case "Default":
-      return "text2";
-    case "Primary":
-      return "text5";
-    case "Navigation":
-      return "text5";
-    case "Danger":
-      return "text5";
-    default:
-      return unreachable(variant);
-  }
-}
+
+// src/components/Button/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Button = (0, import_react2.forwardRef)(function Button2({
+  children,
+  variant = "Default",
+  size = "M",
+  fullWidth: fixed = false,
+  disabled = false,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    StyledButton,
+    {
+      ...rest,
+      disabled,
+      $background: variantToBackground(variant),
+      $color: variantToFont(variant),
+      $size: size,
+      $fullWidth: fixed,
+      ref,
+      children
+    }
+  );
+});
+var Button_default = Button;
 
 // src/components/IconButton/index.tsx
 var import_react3 = require("react");
@@ -2236,6 +2241,7 @@ var DropdownButton = import_styled_components17.default.button`
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
 
   ${import_utils8.disabledSelector} {
     cursor: default;
@@ -2246,7 +2252,7 @@ var DropdownButton = import_styled_components17.default.button`
   background-color: var(--charcoal-surface3);
   border-radius: 4px;
 
-  transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow, 0.2s background-color;
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
@@ -2256,6 +2262,9 @@ var DropdownButton = import_styled_components17.default.button`
       outline: none;
       box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
     }
+    &:hover {
+      background-color: var(--charcoal-surface3-hover);
+    }
   }
 
   ${({ invalid }) => invalid === true && import_styled_components17.css`
@@ -2271,20 +2280,9 @@ var DropdownButtonText = import_styled_components17.default.span`
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 var DropdownButtonIcon = (0, import_styled_components17.default)(Icon_default)`
   color: var(--charcoal-text2);
@@ -2452,20 +2450,7 @@ var StyledSpan = import_styled_components19.default.span`
   font-size: 14px;
   line-height: 22px;
   color: var(--charcoal-text2);
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+  padding: 9px 0;
 
   display: flex;
   align-items: center;
@@ -2505,15 +2490,248 @@ var StyledLi2 = import_styled_components20.default.li`
 `;
 
 // src/components/SegmentedControl/index.tsx
+var import_react27 = require("react");
+
+// ../../node_modules/@react-stately/form/dist/import.mjs
+var import_react23 = require("react");
+var $e5be200c675c3b3a$export$aca958c65c314e6c = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valueMissing: false,
+  valid: true
+};
+var $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
+  ...$e5be200c675c3b3a$export$aca958c65c314e6c,
+  customError: true,
+  valid: false
+};
+var $e5be200c675c3b3a$export$dad6ae84456c676a = {
+  isInvalid: false,
+  validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
+  validationErrors: []
+};
+var $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, import_react23.createContext)({});
+var $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
+function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
+  if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
+    let { realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
+    return {
+      realtimeValidation,
+      displayValidation,
+      updateValidation,
+      resetValidation,
+      commitValidation
+    };
+  }
+  return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
+}
+function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
+  let { isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = "aria" } = props;
+  if (validationState)
+    isInvalid || (isInvalid = validationState === "invalid");
+  let controlledError = isInvalid ? {
+    isInvalid: true,
+    validationErrors: [],
+    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
+  } : null;
+  let clientError = (0, import_react23.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [
+    validate,
+    value
+  ]);
+  if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid)
+    builtinValidation = null;
+  let serverErrors = (0, import_react23.useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
+  let serverErrorMessages = (0, import_react23.useMemo)(() => {
+    if (name)
+      return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
+    return [];
+  }, [
+    serverErrors,
+    name
+  ]);
+  let [lastServerErrors, setLastServerErrors] = (0, import_react23.useState)(serverErrors);
+  let [isServerErrorCleared, setServerErrorCleared] = (0, import_react23.useState)(false);
+  if (serverErrors !== lastServerErrors) {
+    setLastServerErrors(serverErrors);
+    setServerErrorCleared(false);
+  }
+  let serverError = (0, import_react23.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
+    isServerErrorCleared,
+    serverErrorMessages
+  ]);
+  let nextValidation = (0, import_react23.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let [currentValidity, setCurrentValidity] = (0, import_react23.useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let lastError = (0, import_react23.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let commitValidation = () => {
+    if (!commitQueued)
+      return;
+    setCommitQueued(false);
+    let error = clientError || builtinValidation || nextValidation.current;
+    if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
+      lastError.current = error;
+      setCurrentValidity(error);
+    }
+  };
+  let [commitQueued, setCommitQueued] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(commitValidation);
+  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
+  let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
+  return {
+    realtimeValidation,
+    displayValidation,
+    updateValidation(value2) {
+      if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value2))
+        setCurrentValidity(value2);
+      else
+        nextValidation.current = value2;
+    },
+    resetValidation() {
+      let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
+      if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
+        lastError.current = error;
+        setCurrentValidity(error);
+      }
+      if (validationBehavior === "native")
+        setCommitQueued(false);
+      setServerErrorCleared(true);
+    },
+    commitValidation() {
+      if (validationBehavior === "native")
+        setCommitQueued(true);
+      setServerErrorCleared(true);
+    }
+  };
+}
+function $e5be200c675c3b3a$var$asArray(v) {
+  if (!v)
+    return [];
+  return Array.isArray(v) ? v : [
+    v
+  ];
+}
+function $e5be200c675c3b3a$var$runValidate(validate, value) {
+  if (typeof validate === "function") {
+    let e = validate(value);
+    if (e && typeof e !== "boolean")
+      return $e5be200c675c3b3a$var$asArray(e);
+  }
+  return [];
+}
+function $e5be200c675c3b3a$var$getValidationResult(errors) {
+  return errors.length ? {
+    isInvalid: true,
+    validationErrors: errors,
+    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
+  } : null;
+}
+function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
+  if (a === b)
+    return true;
+  return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
+}
+
+// ../../node_modules/@react-stately/utils/dist/import.mjs
 var import_react24 = require("react");
-var import_react_stately2 = require("react-stately");
-var import_radio = require("@react-aria/radio");
+function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
+  let [stateValue, setStateValue] = (0, import_react24.useState)(value || defaultValue);
+  let isControlledRef = (0, import_react24.useRef)(value !== void 0);
+  let isControlled = value !== void 0;
+  (0, import_react24.useEffect)(() => {
+    let wasControlled = isControlledRef.current;
+    if (wasControlled !== isControlled)
+      console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
+    isControlledRef.current = isControlled;
+  }, [
+    isControlled
+  ]);
+  let currentValue = isControlled ? value : stateValue;
+  let setValue = (0, import_react24.useCallback)((value2, ...args) => {
+    let onChangeCaller = (value3, ...onChangeArgs) => {
+      if (onChange) {
+        if (!Object.is(currentValue, value3))
+          onChange(value3, ...onChangeArgs);
+      }
+      if (!isControlled)
+        currentValue = value3;
+    };
+    if (typeof value2 === "function") {
+      console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320");
+      let updateFunction = (oldValue, ...functionArgs) => {
+        let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
+        onChangeCaller(interceptedValue, ...args);
+        if (!isControlled)
+          return interceptedValue;
+        return oldValue;
+      };
+      setStateValue(updateFunction);
+    } else {
+      if (!isControlled)
+        setStateValue(value2);
+      onChangeCaller(value2, ...args);
+    }
+  }, [
+    isControlled,
+    currentValue,
+    onChange
+  ]);
+  return [
+    currentValue,
+    setValue
+  ];
+}
+
+// ../../node_modules/@react-stately/radio/dist/import.mjs
+var import_react25 = require("react");
+var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
+var $a54cdc5c1942b639$var$i = 0;
+function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
+  let name = (0, import_react25.useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
+    props.name
+  ]);
+  var _props_defaultValue;
+  let [selectedValue, setSelected] = (0, $458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
+  let [lastFocusedValue, setLastFocusedValue] = (0, import_react25.useState)(null);
+  let validation = (0, $e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
+    ...props,
+    value: selectedValue
+  });
+  let setSelectedValue = (value) => {
+    if (!props.isReadOnly && !props.isDisabled) {
+      setSelected(value);
+      validation.commitValidation();
+    }
+  };
+  let isInvalid = validation.displayValidation.isInvalid;
+  return {
+    ...validation,
+    name,
+    selectedValue,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    isDisabled: props.isDisabled || false,
+    isReadOnly: props.isReadOnly || false,
+    isRequired: props.isRequired || false,
+    validationState: props.validationState || (isInvalid ? "invalid" : null),
+    isInvalid
+  };
+}
+
+// src/components/SegmentedControl/index.tsx
+var import_radio2 = require("@react-aria/radio");
 var import_styled_components21 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react23 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioContext = (0, import_react23.createContext)(null);
+var RadioContext = (0, import_react26.createContext)(null);
 var RadioProvider = ({
   value,
   children
@@ -2521,7 +2739,7 @@ var RadioProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react23.useContext)(RadioContext);
+  const state = (0, import_react26.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
@@ -2529,9 +2747,9 @@ var useRadioContext = () => {
 
 // src/components/SegmentedControl/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react24.forwardRef)(
+var SegmentedControl = (0, import_react27.forwardRef)(
   function SegmentedControlInner(props, ref) {
-    const ariaRadioGroupProps = (0, import_react24.useMemo)(
+    const ariaRadioGroupProps = (0, import_react27.useMemo)(
       () => ({
         ...props,
         isDisabled: props.disabled,
@@ -2541,9 +2759,9 @@ var SegmentedControl = (0, import_react24.forwardRef)(
       }),
       [props]
     );
-    const state = (0, import_react_stately2.useRadioGroupState)(ariaRadioGroupProps);
-    const { radioGroupProps } = (0, import_radio.useRadioGroup)(ariaRadioGroupProps, state);
-    const segmentedControlItems = (0, import_react24.useMemo)(() => {
+    const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(ariaRadioGroupProps);
+    const { radioGroupProps } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
+    const segmentedControlItems = (0, import_react27.useMemo)(() => {
       return props.data.map(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
@@ -2567,11 +2785,11 @@ var SegmentedControl = (0, import_react24.forwardRef)(
     );
   }
 );
-var SegmentedControl_default = (0, import_react24.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react27.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react24.useRef)(null);
-  const ariaRadioProps = (0, import_react24.useMemo)(
+  const ref = (0, import_react27.useRef)(null);
+  const ariaRadioProps = (0, import_react27.useMemo)(
     () => ({
       value: props.value,
       isDisabled: props.disabled,
@@ -2579,7 +2797,7 @@ var Segmented = (props) => {
     }),
     [props]
   );
-  const { inputProps, isDisabled, isSelected } = (0, import_radio.useRadio)(
+  const { inputProps, isDisabled, isSelected } = (0, import_radio2.useRadio)(
     ariaRadioProps,
     state,
     ref
@@ -2667,16 +2885,16 @@ var SegmentedLabelInner = import_styled_components21.default.div`
 `;
 
 // src/components/Checkbox/index.tsx
-var import_react25 = require("react");
+var import_react28 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
-var import_utils9 = require("@react-aria/utils");
-var import_react_stately3 = require("react-stately");
-var import_utils10 = require("@charcoal-ui/utils");
+var import_utils10 = require("@react-aria/utils");
+var import_react_stately2 = require("react-stately");
+var import_utils11 = require("@charcoal-ui/utils");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Checkbox = (0, import_react25.forwardRef)(
+var Checkbox = (0, import_react28.forwardRef)(
   function CheckboxInner({ invalid = false, ...props }, ref) {
-    const ariaCheckboxProps = (0, import_react25.useMemo)(
+    const ariaCheckboxProps = (0, import_react28.useMemo)(
       () => ({
         ...props,
         isInValid: invalid,
@@ -2688,8 +2906,8 @@ var Checkbox = (0, import_react25.forwardRef)(
       }),
       [invalid, props]
     );
-    const state = (0, import_react_stately3.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils9.useObjectRef)(ref);
+    const state = (0, import_react_stately2.useToggleState)(ariaCheckboxProps);
+    const objectRef = (0, import_utils10.useObjectRef)(ref);
     const { inputProps } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
@@ -2701,7 +2919,7 @@ var Checkbox = (0, import_react25.forwardRef)(
     ] });
   }
 );
-var Checkbox_default = (0, import_react25.memo)(Checkbox);
+var Checkbox_default = (0, import_react28.memo)(Checkbox);
 var hiddenCss = import_styled_components22.css`
   visibility: hidden;
 `;
@@ -2710,7 +2928,7 @@ var InputRoot = import_styled_components22.default.label`
   display: flex;
 
   cursor: pointer;
-  ${import_utils10.disabledSelector} {
+  ${import_utils11.disabledSelector} {
     cursor: default;
   }
 
@@ -2796,17 +3014,17 @@ var InputLabel = import_styled_components22.default.div`
 `;
 
 // src/components/TagItem/index.tsx
-var import_react26 = require("react");
-var import_utils11 = require("@react-aria/utils");
+var import_react29 = require("react");
+var import_utils12 = require("@react-aria/utils");
 var import_styled_components23 = __toESM(require("styled-components"));
-var import_utils12 = require("@charcoal-ui/utils");
+var import_utils13 = require("@charcoal-ui/utils");
 var import_button = require("@react-aria/button");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react26.forwardRef)(
+var TagItem = (0, import_react29.forwardRef)(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2818,8 +3036,8 @@ var TagItem = (0, import_react26.forwardRef)(
     className,
     ...props
   }, _ref) {
-    const ref = (0, import_utils11.useObjectRef)(_ref);
-    const ariaButtonProps = (0, import_react26.useMemo)(
+    const ref = (0, import_utils12.useObjectRef)(_ref);
+    const ariaButtonProps = (0, import_react29.useMemo)(
       () => ({
         elementType: "a",
         isDisabled: disabled,
@@ -2851,10 +3069,10 @@ var TagItem = (0, import_react26.forwardRef)(
     );
   }
 );
-var TagItem_default = (0, import_react26.memo)(TagItem);
+var TagItem_default = (0, import_react29.memo)(TagItem);
 var horizontalPadding = ({ left, right }) => import_styled_components23.css`
-  padding-right: ${(0, import_utils12.px)(right)};
-  padding-left: ${(0, import_utils12.px)(left)};
+  padding-right: ${(0, import_utils13.px)(right)};
+  padding-left: ${(0, import_utils13.px)(left)};
 `;
 var tagItemRootSize = (size) => {
   switch (size) {