@charcoal-ui/react 2.8.0 → 2.10.0

package/dist/index.cjs.js

@@ -35,21 +35,21 @@ __export(src_exports, {
   DropdownSelectorItem: () => DropdownSelectorItem,
   Icon: () => Icon_default,
   IconButton: () => IconButton_default,
-  LoadingSpinner: () => LoadingSpinner,
+  LoadingSpinner: () => LoadingSpinner_default,
   LoadingSpinnerIcon: () => LoadingSpinnerIcon,
-  Modal: () => Modal,
+  Modal: () => Modal_default,
   ModalAlign: () => ModalAlign,
   ModalBody: () => ModalBody,
   ModalButtons: () => ModalButtons,
   ModalHeader: () => ModalHeader,
-  MultiSelect: () => MultiSelect,
+  MultiSelect: () => MultiSelect_default,
   MultiSelectGroup: () => MultiSelectGroup,
   OverlayProvider: () => import_overlays.OverlayProvider,
-  Radio: () => Radio,
+  Radio: () => Radio_default,
   RadioGroup: () => RadioGroup,
   SSRProvider: () => import_ssr.SSRProvider,
   SegmentedControl: () => SegmentedControl_default,
-  Switch: () => SwitchCheckbox,
+  Switch: () => Switch_default,
   TagItem: () => TagItem_default,
   TextField: () => TextField_default,
   useComponentAbstraction: () => useComponentAbstraction
@@ -376,12 +376,7 @@ var import_react6 = __toESM(require("react"));
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_warning = __toESM(require("warning"));
 var import_utils2 = require("@charcoal-ui/utils");
-function Radio({
-  value,
-  forceChecked = false,
-  disabled = false,
-  children
-}) {
+var Radio = (0, import_react6.forwardRef)(function RadioInner({ value, forceChecked = false, disabled = false, children, className }, ref) {
   const {
     name,
     selected,
@@ -403,7 +398,7 @@ function Radio({
     },
     [onChange]
   );
-  return /* @__PURE__ */ import_react6.default.createElement(RadioRoot, { "aria-disabled": isDisabled || isReadonly }, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(RadioRoot, { "aria-disabled": isDisabled || isReadonly, className }, /* @__PURE__ */ import_react6.default.createElement(
     RadioInput,
     {
       name,
@@ -411,10 +406,12 @@ function Radio({
       checked: forceChecked || isSelected,
       hasError,
       onChange: handleChange,
-      disabled: isDisabled || isReadonly
+      disabled: isDisabled || isReadonly,
+      ref
     }
   ), children != null && /* @__PURE__ */ import_react6.default.createElement(RadioLabel, null, children));
-}
+});
+var Radio_default = (0, import_react6.memo)(Radio);
 var RadioRoot = import_styled_components6.default.label`
   display: grid;
   grid-template-columns: auto 1fr;
@@ -437,6 +434,8 @@ var RadioInput = import_styled_components6.default.input.attrs({ type: "radio" }
     width: 20px;
     height: 20px;
 
+    cursor: pointer;
+
     ${({ hasError = false }) => theme((o) => [
   o.borderRadius("oval"),
   o.bg.surface1.hover.press,
@@ -554,63 +553,68 @@ var MultiSelectGroupContext = (0, import_react7.createContext)({
 });
 
 // src/components/MultiSelect/index.tsx
-function MultiSelect({
-  value,
-  forceChecked = false,
-  disabled = false,
-  onChange,
-  variant = "default",
-  children
-}) {
-  const {
-    name,
-    selected,
-    disabled: parentDisabled,
-    readonly,
-    hasError,
-    onChange: parentOnChange
-  } = (0, import_react8.useContext)(MultiSelectGroupContext);
-  (0, import_warning2.default)(
-    name !== void 0,
-    `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
-  );
-  const isSelected = selected.includes(value) || forceChecked;
-  const isDisabled = disabled || parentDisabled || readonly;
-  const handleChange = (0, import_react8.useCallback)(
-    (event) => {
-      if (!(event.currentTarget instanceof HTMLInputElement)) {
-        return;
+var MultiSelect = (0, import_react8.forwardRef)(
+  function MultiSelectInner({
+    value,
+    forceChecked = false,
+    disabled = false,
+    onChange,
+    variant = "default",
+    className,
+    children
+  }, ref) {
+    const {
+      name,
+      selected,
+      disabled: parentDisabled,
+      readonly,
+      hasError,
+      onChange: parentOnChange
+    } = (0, import_react8.useContext)(MultiSelectGroupContext);
+    (0, import_warning2.default)(
+      name !== void 0,
+      `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
+    );
+    const isSelected = selected.includes(value) || forceChecked;
+    const isDisabled = disabled || parentDisabled || readonly;
+    const handleChange = (0, import_react8.useCallback)(
+      (event) => {
+        if (!(event.currentTarget instanceof HTMLInputElement)) {
+          return;
+        }
+        if (onChange)
+          onChange({ value, selected: event.currentTarget.checked });
+        parentOnChange({ value, selected: event.currentTarget.checked });
+      },
+      [onChange, parentOnChange, value]
+    );
+    return /* @__PURE__ */ import_react8.default.createElement(MultiSelectRoot, { "aria-disabled": isDisabled, className }, /* @__PURE__ */ import_react8.default.createElement(
+      MultiSelectInput,
+      {
+        ...{
+          name,
+          value,
+          hasError
+        },
+        checked: isSelected,
+        disabled: isDisabled,
+        onChange: handleChange,
+        overlay: variant === "overlay",
+        "aria-invalid": hasError,
+        ref
       }
-      if (onChange)
-        onChange({ value, selected: event.currentTarget.checked });
-      parentOnChange({ value, selected: event.currentTarget.checked });
-    },
-    [onChange, parentOnChange, value]
-  );
-  return /* @__PURE__ */ import_react8.default.createElement(MultiSelectRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ import_react8.default.createElement(
-    MultiSelectInput,
-    {
-      ...{
-        name,
-        value,
-        hasError
+    ), /* @__PURE__ */ import_react8.default.createElement(
+      MultiSelectInputOverlay,
+      {
+        overlay: variant === "overlay",
+        hasError,
+        "aria-hidden": true
       },
-      checked: isSelected,
-      disabled: isDisabled,
-      onChange: handleChange,
-      overlay: variant === "overlay",
-      "aria-invalid": hasError
-    }
-  ), /* @__PURE__ */ import_react8.default.createElement(
-    MultiSelectInputOverlay,
-    {
-      overlay: variant === "overlay",
-      hasError,
-      "aria-hidden": true
-    },
-    /* @__PURE__ */ import_react8.default.createElement("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
-  ), Boolean(children) && /* @__PURE__ */ import_react8.default.createElement(MultiSelectLabel, null, children));
-}
+      /* @__PURE__ */ import_react8.default.createElement("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
+    ), Boolean(children) && /* @__PURE__ */ import_react8.default.createElement(MultiSelectLabel, null, children));
+  }
+);
+var MultiSelect_default = (0, import_react8.memo)(MultiSelect);
 var MultiSelectRoot = import_styled_components7.default.label`
   display: grid;
   grid-template-columns: auto 1fr;
@@ -727,24 +731,28 @@ var import_react9 = __toESM(require("react"));
 var import_react_stately = require("react-stately");
 var import_styled_components8 = __toESM(require("styled-components"));
 var import_utils4 = require("@charcoal-ui/utils");
-function SwitchCheckbox(props) {
-  const { disabled, className } = props;
-  const ariaSwitchProps = (0, import_react9.useMemo)(
-    () => ({
-      ...props,
-      "aria-label": "children" in props ? void 0 : props.label,
-      isDisabled: props.disabled,
-      isSelected: props.checked
-    }),
-    [props]
-  );
-  const state = (0, import_react_stately.useToggleState)(ariaSwitchProps);
-  const ref = (0, import_react9.useRef)(null);
-  const {
-    inputProps: { className: _className, type: _type, ...rest }
-  } = (0, import_switch.useSwitch)(ariaSwitchProps, state, ref);
-  return /* @__PURE__ */ import_react9.default.createElement(Label, { className, "aria-disabled": disabled }, /* @__PURE__ */ import_react9.default.createElement(SwitchInput, { ...rest, ref }), "children" in props ? /* @__PURE__ */ import_react9.default.createElement(LabelInner, null, props.children) : void 0);
-}
+var import_utils5 = require("@react-aria/utils");
+var SwitchCheckbox = (0, import_react9.forwardRef)(
+  function SwitchCheckboxInner(props, external) {
+    const { disabled, className } = props;
+    const ariaSwitchProps = (0, import_react9.useMemo)(
+      () => ({
+        ...props,
+        "aria-label": "children" in props ? void 0 : props.label,
+        isDisabled: props.disabled,
+        isSelected: props.checked
+      }),
+      [props]
+    );
+    const state = (0, import_react_stately.useToggleState)(ariaSwitchProps);
+    const ref = (0, import_utils5.useObjectRef)(external);
+    const {
+      inputProps: { className: _className, type: _type, ...rest }
+    } = (0, import_switch.useSwitch)(ariaSwitchProps, state, ref);
+    return /* @__PURE__ */ import_react9.default.createElement(Label, { className, "aria-disabled": disabled }, /* @__PURE__ */ import_react9.default.createElement(SwitchInput, { ...rest, ref }), "children" in props ? /* @__PURE__ */ import_react9.default.createElement(LabelInner, null, props.children) : void 0);
+  }
+);
+var Switch_default = (0, import_react9.memo)(SwitchCheckbox);
 var Label = import_styled_components8.default.label`
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -908,7 +916,7 @@ var TextField = import_react11.default.forwardRef(
   }
 );
 var TextField_default = TextField;
-var SingleLineTextField = import_react11.default.forwardRef(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef4) {
+var SingleLineTextField = import_react11.default.forwardRef(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef9) {
   const {
     className,
     showLabel = false,
@@ -992,7 +1000,7 @@ var SingleLineTextField = import_react11.default.forwardRef(function SingleLineT
   ), /* @__PURE__ */ import_react11.default.createElement(StyledInputContainer, null, /* @__PURE__ */ import_react11.default.createElement(PrefixContainer, { ref: prefixRef }, /* @__PURE__ */ import_react11.default.createElement(Affix, null, prefix)), /* @__PURE__ */ import_react11.default.createElement(
     StyledInput,
     {
-      ref: mergeRefs(forwardRef4, ariaRef),
+      ref: mergeRefs(forwardRef9, ariaRef),
       invalid,
       extraLeftPadding: prefixWidth,
       extraRightPadding: suffixWidth,
@@ -1007,7 +1015,7 @@ var SingleLineTextField = import_react11.default.forwardRef(function SingleLineT
     assistiveText
   ));
 });
-var MultiLineTextField = import_react11.default.forwardRef(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef4) {
+var MultiLineTextField = import_react11.default.forwardRef(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef9) {
   const {
     className,
     showCount = false,
@@ -1093,7 +1101,7 @@ var MultiLineTextField = import_react11.default.forwardRef(function MultiLineTex
     /* @__PURE__ */ import_react11.default.createElement(
       StyledTextarea,
       {
-        ref: mergeRefs(textareaRef, forwardRef4, ariaRef),
+        ref: mergeRefs(textareaRef, forwardRef9, ariaRef),
         rows,
         noBottomPadding: showCount,
         ...inputProps
@@ -1128,6 +1136,7 @@ var PrefixContainer = import_styled_components10.default.span`
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
+  z-index: 1;
 `;
 var SuffixContainer = import_styled_components10.default.span`
   position: absolute;
@@ -1289,25 +1298,22 @@ function columnSystem(span, column, gutter) {
 }
 
 // src/components/Modal/index.tsx
-var import_utils5 = require("@charcoal-ui/utils");
+var import_utils6 = require("@charcoal-ui/utils");
 var import_styled11 = require("@charcoal-ui/styled");
 var import_react_spring = require("react-spring");
+var import_utils7 = require("@react-aria/utils");
 var DEFAULT_Z_INDEX = 10;
-function Modal({
-  children,
-  zIndex = DEFAULT_Z_INDEX,
-  portalContainer,
-  ...props
-}) {
+var Modal = (0, import_react13.forwardRef)(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
   const {
     title,
     size = "M",
     bottomSheet = false,
     isDismissable,
     onClose,
+    className,
     isOpen = false
   } = props;
-  const ref = (0, import_react13.useRef)(null);
+  const ref = (0, import_utils7.useObjectRef)(external);
   const { overlayProps, underlayProps } = (0, import_overlays2.useOverlay)(props, ref);
   const { modalProps } = (0, import_overlays2.useModalOverlay)(
     props,
@@ -1325,7 +1331,7 @@ function Modal({
   );
   const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
   const theme4 = (0, import_styled_components11.useTheme)();
-  const isMobile = (0, import_styled11.useMedia)((0, import_utils5.maxWidth)(theme4.breakpoint.screen1)) ?? false;
+  const isMobile = (0, import_styled11.useMedia)((0, import_utils6.maxWidth)(theme4.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const transition = (0, import_react_spring.useTransition)(isOpen, {
     from: {
@@ -1360,7 +1366,8 @@ function Modal({
           ...dialogProps,
           style: transitionEnabled ? { transform } : {},
           size,
-          bottomSheet
+          bottomSheet,
+          className
         },
         /* @__PURE__ */ import_react13.default.createElement(
           ModalContext.Provider,
@@ -1380,7 +1387,8 @@ function Modal({
       )))
     ))
   );
-}
+});
+var Modal_default = (0, import_react13.memo)(Modal);
 var ModalContext = import_react13.default.createContext({
   titleProps: {},
   title: "",
@@ -1420,7 +1428,7 @@ var DialogContainer = import_styled_components11.default.div`
   }
 }}px;
 
-  @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
+  @media ${({ theme: theme4 }) => (0, import_utils6.maxWidth)(theme4.breakpoint.screen1)} {
     width: calc(100% - 48px);
     ${(p) => p.bottomSheet !== false && import_styled_components11.css`
         margin: 0;
@@ -1438,7 +1446,7 @@ var ModalDialog = (0, import_react_spring.animated)(import_styled_components11.d
   padding: 24px 0;
 
   ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-  @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
+  @media ${({ theme: theme4 }) => (0, import_utils6.maxWidth)(theme4.breakpoint.screen1)} {
     ${(p) => p.bottomSheet !== false && import_styled_components11.css`
         border-radius: 0;
         ${p.bottomSheet === "full" && import_styled_components11.css`
@@ -1496,13 +1504,22 @@ var ModalButtons = import_styled_components12.default.div`
 // src/components/LoadingSpinner/index.tsx
 var import_react15 = __toESM(require("react"));
 var import_styled_components13 = __toESM(require("styled-components"));
-function LoadingSpinner({
-  size = 48,
-  padding = 16,
-  transparent = false
-}) {
-  return /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerIcon, null));
-}
+var LoadingSpinner = (0, import_react15.forwardRef)(
+  function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, className }, ref) {
+    return /* @__PURE__ */ import_react15.default.createElement(
+      LoadingSpinnerRoot,
+      {
+        size,
+        padding,
+        transparent,
+        className,
+        ref
+      },
+      /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerIcon, null)
+    );
+  }
+);
+var LoadingSpinner_default = (0, import_react15.memo)(LoadingSpinner);
 var LoadingSpinnerRoot = import_styled_components13.default.div.attrs({ role: "progressbar" })`
   box-sizing: content-box;
   margin: auto;
@@ -1559,7 +1576,7 @@ var LoadingSpinnerIcon = import_react15.default.forwardRef(function LoadingSpinn
 var import_react20 = __toESM(require("react"));
 var import_styled_components19 = __toESM(require("styled-components"));
 var import_react_stately2 = require("react-stately");
-var import_utils8 = require("@charcoal-ui/utils");
+var import_utils10 = require("@charcoal-ui/utils");
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
 var import_select = require("@react-aria/select");
 var import_button = require("@react-aria/button");
@@ -1579,19 +1596,19 @@ var import_styled_components16 = __toESM(require("styled-components"));
 var import_react16 = __toESM(require("react"));
 var import_styled_components14 = __toESM(require("styled-components"));
 var import_listbox = require("@react-aria/listbox");
-var import_utils6 = require("@react-aria/utils");
+var import_utils8 = require("@react-aria/utils");
 var import_focus2 = require("@react-aria/focus");
-var import_utils7 = require("@charcoal-ui/utils");
+var import_utils9 = require("@charcoal-ui/utils");
 function Option({ item, state, mode }) {
   const ref = (0, import_react16.useRef)(null);
   const { optionProps, isSelected } = (0, import_listbox.useOption)(item, state, ref);
   const { focusProps } = (0, import_focus2.useFocusRing)();
-  return /* @__PURE__ */ import_react16.default.createElement(OptionRoot, { ...(0, import_utils6.mergeProps)(optionProps, focusProps), ref, mode }, /* @__PURE__ */ import_react16.default.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ import_react16.default.createElement(OptionText, null, item.rendered));
+  return /* @__PURE__ */ import_react16.default.createElement(OptionRoot, { ...(0, import_utils8.mergeProps)(optionProps, focusProps), ref, mode }, /* @__PURE__ */ import_react16.default.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ import_react16.default.createElement(OptionText, null, item.rendered));
 }
 var OptionRoot = import_styled_components14.default.li`
   display: flex;
   align-items: center;
-  gap: ${({ theme: theme4 }) => (0, import_utils7.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme4 }) => (0, import_utils9.px)(theme4.spacing[4])};
   height: 40px;
   cursor: pointer;
   outline: none;
@@ -1825,7 +1842,7 @@ var DropdownSelectorRoot = import_styled_components19.default.div`
   display: inline-block;
   width: 100%;
 
-  ${import_utils8.disabledSelector} {
+  ${import_utils10.disabledSelector} {
     cursor: default;
     ${theme((o) => o.disabled)}
   }
@@ -1848,7 +1865,7 @@ var DropdownButton = import_styled_components19.default.button`
   box-sizing: border-box;
   cursor: pointer;
 
-  ${import_utils8.disabledSelector} {
+  ${import_utils10.disabledSelector} {
     cursor: default;
   }
 
@@ -1882,7 +1899,7 @@ var import_react22 = __toESM(require("react"));
 var import_react_stately3 = require("react-stately");
 var import_radio = require("@react-aria/radio");
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_utils9 = require("@charcoal-ui/utils");
+var import_utils11 = require("@charcoal-ui/utils");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
 var import_react21 = __toESM(require("react"));
@@ -1920,23 +1937,35 @@ var SegmentedControl = (0, import_react22.forwardRef)(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
     }, [props.data]);
-    return /* @__PURE__ */ import_react22.default.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ import_react22.default.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ import_react22.default.createElement(
-      Segmented,
+    return /* @__PURE__ */ import_react22.default.createElement(
+      SegmentedControlRoot,
       {
-        key: item.value,
-        value: item.value,
-        disabled: item.disabled
+        ref,
+        ...radioGroupProps,
+        className: props.className
       },
-      item.label
-    ))));
+      /* @__PURE__ */ import_react22.default.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ import_react22.default.createElement(
+        Segmented,
+        {
+          key: item.value,
+          value: item.value,
+          disabled: item.disabled
+        },
+        item.label
+      )))
+    );
   }
 );
 var SegmentedControl_default = (0, import_react22.memo)(SegmentedControl);
-var Segmented = ({ children, ...props }) => {
+var Segmented = (props) => {
   const state = useRadioContext();
   const ref = (0, import_react22.useRef)(null);
   const ariaRadioProps = (0, import_react22.useMemo)(
-    () => ({ ...props, isDisabled: props.disabled }),
+    () => ({
+      value: props.value,
+      isDisabled: props.disabled,
+      children: props.children
+    }),
     [props]
   );
   const { inputProps, isDisabled, isSelected } = (0, import_radio.useRadio)(
@@ -1951,7 +1980,7 @@ var Segmented = ({ children, ...props }) => {
       checked: isSelected
     },
     /* @__PURE__ */ import_react22.default.createElement(SegmentedInput, { ...inputProps, ref }),
-    /* @__PURE__ */ import_react22.default.createElement(RadioLabel2, null, /* @__PURE__ */ import_react22.default.createElement(SegmentedLabelInner, null, children))
+    /* @__PURE__ */ import_react22.default.createElement(RadioLabel2, null, /* @__PURE__ */ import_react22.default.createElement(SegmentedLabelInner, null, props.children))
   );
 };
 var SegmentedControlRoot = import_styled_components20.default.div`
@@ -1967,7 +1996,7 @@ var SegmentedRoot = import_styled_components20.default.label`
   cursor: pointer;
   height: 32px;
 
-  ${import_utils9.disabledSelector} {
+  ${import_utils11.disabledSelector} {
     cursor: default;
   }
 
@@ -2007,9 +2036,9 @@ var SegmentedLabelInner = import_styled_components20.default.div`
 var import_react23 = __toESM(require("react"));
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
-var import_utils10 = require("@react-aria/utils");
+var import_utils12 = require("@react-aria/utils");
 var import_react_stately4 = require("react-stately");
-var import_utils11 = require("@charcoal-ui/utils");
+var import_utils13 = require("@charcoal-ui/utils");
 var Checkbox = (0, import_react23.forwardRef)(
   function CheckboxInner(props, ref) {
     const ariaCheckboxProps = (0, import_react23.useMemo)(
@@ -2023,10 +2052,10 @@ var Checkbox = (0, import_react23.forwardRef)(
       [props]
     );
     const state = (0, import_react_stately4.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils10.useObjectRef)(ref);
+    const objectRef = (0, import_utils12.useObjectRef)(ref);
     const { inputProps } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-    return /* @__PURE__ */ import_react23.default.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ import_react23.default.createElement(CheckboxRoot, null, /* @__PURE__ */ import_react23.default.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ import_react23.default.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ import_react23.default.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ import_react23.default.createElement(InputLabel, null, props.children));
+    return /* @__PURE__ */ import_react23.default.createElement(InputRoot, { "aria-disabled": isDisabled, className: props.className }, /* @__PURE__ */ import_react23.default.createElement(CheckboxRoot, null, /* @__PURE__ */ import_react23.default.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ import_react23.default.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ import_react23.default.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ import_react23.default.createElement(InputLabel, null, props.children));
   }
 );
 var Checkbox_default = (0, import_react23.memo)(Checkbox);
@@ -2038,11 +2067,11 @@ var InputRoot = import_styled_components21.default.label`
   display: flex;
 
   cursor: pointer;
-  ${import_utils11.disabledSelector} {
+  ${import_utils13.disabledSelector} {
     cursor: default;
   }
 
-  gap: ${({ theme: theme4 }) => (0, import_utils11.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme4 }) => (0, import_utils13.px)(theme4.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
 var CheckboxRoot = import_styled_components21.default.div`
@@ -2094,9 +2123,9 @@ var InputLabel = import_styled_components21.default.div`
 
 // src/components/TagItem/index.tsx
 var import_react24 = __toESM(require("react"));
-var import_utils12 = require("@react-aria/utils");
+var import_utils14 = require("@react-aria/utils");
 var import_styled_components22 = __toESM(require("styled-components"));
-var import_utils13 = require("@charcoal-ui/utils");
+var import_utils15 = require("@charcoal-ui/utils");
 var import_button2 = require("@react-aria/button");
 var sizeMap = {
   S: 32,
@@ -2114,7 +2143,7 @@ var TagItem = (0, import_react24.forwardRef)(
     className,
     ...props
   }, _ref) {
-    const ref = (0, import_utils12.useObjectRef)(_ref);
+    const ref = (0, import_utils14.useObjectRef)(_ref);
     const ariaButtonProps = (0, import_react24.useMemo)(
       () => ({
         elementType: "a",
@@ -2160,7 +2189,7 @@ var TagItemRoot = import_styled_components22.default.a`
   ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
 ])}
 
-  ${import_utils13.disabledSelector} {
+  ${import_utils15.disabledSelector} {
     ${theme((o) => [o.disabled])}
     cursor: default;
   }
@@ -2194,7 +2223,7 @@ var Background = import_styled_components22.default.div`
 `;
 var Inner = import_styled_components22.default.div`
   display: inline-flex;
-  gap: ${({ theme: theme4 }) => (0, import_utils13.px)(theme4.spacing[8])};
+  gap: ${({ theme: theme4 }) => (0, import_utils15.px)(theme4.spacing[8])};
   align-items: center;
   z-index: 2;
 `;