@charcoal-ui/react 2.8.0 → 2.10.0

package/dist/index.esm.js

@@ -314,16 +314,11 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-import React6, { useCallback, useContext as useContext2 } from "react";
+import React6, { forwardRef, memo, useCallback, useContext as useContext2 } from "react";
 import styled5 from "styled-components";
 import warning from "warning";
 import { px } from "@charcoal-ui/utils";
-function Radio({
-  value,
-  forceChecked = false,
-  disabled = false,
-  children
-}) {
+var Radio = forwardRef(function RadioInner({ value, forceChecked = false, disabled = false, children, className }, ref) {
   const {
     name,
     selected,
@@ -345,7 +340,7 @@ function Radio({
     },
     [onChange]
   );
-  return /* @__PURE__ */ React6.createElement(RadioRoot, { "aria-disabled": isDisabled || isReadonly }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement(RadioRoot, { "aria-disabled": isDisabled || isReadonly, className }, /* @__PURE__ */ React6.createElement(
     RadioInput,
     {
       name,
@@ -353,10 +348,12 @@ function Radio({
       checked: forceChecked || isSelected,
       hasError,
       onChange: handleChange,
-      disabled: isDisabled || isReadonly
+      disabled: isDisabled || isReadonly,
+      ref
     }
   ), children != null && /* @__PURE__ */ React6.createElement(RadioLabel, null, children));
-}
+});
+var Radio_default = memo(Radio);
 var RadioRoot = styled5.label`
   display: grid;
   grid-template-columns: auto 1fr;
@@ -379,6 +376,8 @@ var RadioInput = styled5.input.attrs({ type: "radio" })`
     width: 20px;
     height: 20px;
 
+    cursor: pointer;
+
     ${({ hasError = false }) => theme((o) => [
   o.borderRadius("oval"),
   o.bg.surface1.hover.press,
@@ -475,7 +474,12 @@ function RadioGroup({
 }
 
 // src/components/MultiSelect/index.tsx
-import React7, { useCallback as useCallback2, useContext as useContext3 } from "react";
+import React7, {
+  forwardRef as forwardRef2,
+  memo as memo2,
+  useCallback as useCallback2,
+  useContext as useContext3
+} from "react";
 import styled6, { css as css2 } from "styled-components";
 import warning2 from "warning";
 import { disabledSelector as disabledSelector2, px as px2 } from "@charcoal-ui/utils";
@@ -496,63 +500,68 @@ var MultiSelectGroupContext = 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
-  } = useContext3(MultiSelectGroupContext);
-  warning2(
-    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 = useCallback2(
-    (event) => {
-      if (!(event.currentTarget instanceof HTMLInputElement)) {
-        return;
+var MultiSelect = forwardRef2(
+  function MultiSelectInner({
+    value,
+    forceChecked = false,
+    disabled = false,
+    onChange,
+    variant = "default",
+    className,
+    children
+  }, ref) {
+    const {
+      name,
+      selected,
+      disabled: parentDisabled,
+      readonly,
+      hasError,
+      onChange: parentOnChange
+    } = useContext3(MultiSelectGroupContext);
+    warning2(
+      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 = useCallback2(
+      (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__ */ React7.createElement(MultiSelectRoot, { "aria-disabled": isDisabled, className }, /* @__PURE__ */ React7.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__ */ React7.createElement(MultiSelectRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React7.createElement(
-    MultiSelectInput,
-    {
-      ...{
-        name,
-        value,
-        hasError
+    ), /* @__PURE__ */ React7.createElement(
+      MultiSelectInputOverlay,
+      {
+        overlay: variant === "overlay",
+        hasError,
+        "aria-hidden": true
       },
-      checked: isSelected,
-      disabled: isDisabled,
-      onChange: handleChange,
-      overlay: variant === "overlay",
-      "aria-invalid": hasError
-    }
-  ), /* @__PURE__ */ React7.createElement(
-    MultiSelectInputOverlay,
-    {
-      overlay: variant === "overlay",
-      hasError,
-      "aria-hidden": true
-    },
-    /* @__PURE__ */ React7.createElement("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
-  ), Boolean(children) && /* @__PURE__ */ React7.createElement(MultiSelectLabel, null, children));
-}
+      /* @__PURE__ */ React7.createElement("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
+    ), Boolean(children) && /* @__PURE__ */ React7.createElement(MultiSelectLabel, null, children));
+  }
+);
+var MultiSelect_default = memo2(MultiSelect);
 var MultiSelectRoot = styled6.label`
   display: grid;
   grid-template-columns: auto 1fr;
@@ -665,28 +674,32 @@ function MultiSelectGroup({
 
 // src/components/Switch/index.tsx
 import { useSwitch } from "@react-aria/switch";
-import React8, { useRef, useMemo } from "react";
+import React8, { useMemo, memo as memo3, forwardRef as forwardRef3 } from "react";
 import { useToggleState } from "react-stately";
 import styled7 from "styled-components";
 import { disabledSelector as disabledSelector3 } from "@charcoal-ui/utils";
-function SwitchCheckbox(props) {
-  const { disabled, className } = props;
-  const ariaSwitchProps = useMemo(
-    () => ({
-      ...props,
-      "aria-label": "children" in props ? void 0 : props.label,
-      isDisabled: props.disabled,
-      isSelected: props.checked
-    }),
-    [props]
-  );
-  const state = useToggleState(ariaSwitchProps);
-  const ref = useRef(null);
-  const {
-    inputProps: { className: _className, type: _type, ...rest }
-  } = useSwitch(ariaSwitchProps, state, ref);
-  return /* @__PURE__ */ React8.createElement(Label, { className, "aria-disabled": disabled }, /* @__PURE__ */ React8.createElement(SwitchInput, { ...rest, ref }), "children" in props ? /* @__PURE__ */ React8.createElement(LabelInner, null, props.children) : void 0);
-}
+import { useObjectRef } from "@react-aria/utils";
+var SwitchCheckbox = forwardRef3(
+  function SwitchCheckboxInner(props, external) {
+    const { disabled, className } = props;
+    const ariaSwitchProps = useMemo(
+      () => ({
+        ...props,
+        "aria-label": "children" in props ? void 0 : props.label,
+        isDisabled: props.disabled,
+        isSelected: props.checked
+      }),
+      [props]
+    );
+    const state = useToggleState(ariaSwitchProps);
+    const ref = useObjectRef(external);
+    const {
+      inputProps: { className: _className, type: _type, ...rest }
+    } = useSwitch(ariaSwitchProps, state, ref);
+    return /* @__PURE__ */ React8.createElement(Label, { className, "aria-disabled": disabled }, /* @__PURE__ */ React8.createElement(SwitchInput, { ...rest, ref }), "children" in props ? /* @__PURE__ */ React8.createElement(LabelInner, null, props.children) : void 0);
+  }
+);
+var Switch_default = memo3(SwitchCheckbox);
 var Label = styled7.label`
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -781,7 +794,7 @@ import { useVisuallyHidden } from "@react-aria/visually-hidden";
 import React10, {
   useCallback as useCallback3,
   useEffect,
-  useRef as useRef2,
+  useRef,
   useState
 } from "react";
 import styled9, { css as css3 } from "styled-components";
@@ -855,7 +868,7 @@ var TextField = React10.forwardRef(
   }
 );
 var TextField_default = TextField;
-var SingleLineTextField = React10.forwardRef(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef4) {
+var SingleLineTextField = React10.forwardRef(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef9) {
   const {
     className,
     showLabel = false,
@@ -872,9 +885,9 @@ var SingleLineTextField = React10.forwardRef(function SingleLineTextFieldInner({
     suffix = null
   } = props;
   const { visuallyHiddenProps } = useVisuallyHidden();
-  const ariaRef = useRef2(null);
-  const prefixRef = useRef2(null);
-  const suffixRef = useRef2(null);
+  const ariaRef = useRef(null);
+  const prefixRef = useRef(null);
+  const suffixRef = useRef(null);
   const [count, setCount] = useState(countCodePointsInString(props.value ?? ""));
   const [prefixWidth, setPrefixWidth] = useState(0);
   const [suffixWidth, setSuffixWidth] = useState(0);
@@ -939,7 +952,7 @@ var SingleLineTextField = React10.forwardRef(function SingleLineTextFieldInner({
   ), /* @__PURE__ */ React10.createElement(StyledInputContainer, null, /* @__PURE__ */ React10.createElement(PrefixContainer, { ref: prefixRef }, /* @__PURE__ */ React10.createElement(Affix, null, prefix)), /* @__PURE__ */ React10.createElement(
     StyledInput,
     {
-      ref: mergeRefs(forwardRef4, ariaRef),
+      ref: mergeRefs(forwardRef9, ariaRef),
       invalid,
       extraLeftPadding: prefixWidth,
       extraRightPadding: suffixWidth,
@@ -954,7 +967,7 @@ var SingleLineTextField = React10.forwardRef(function SingleLineTextFieldInner({
     assistiveText
   ));
 });
-var MultiLineTextField = React10.forwardRef(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef4) {
+var MultiLineTextField = React10.forwardRef(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef9) {
   const {
     className,
     showCount = false,
@@ -971,8 +984,8 @@ var MultiLineTextField = React10.forwardRef(function MultiLineTextFieldInner({ o
     rows: initialRows = 4
   } = props;
   const { visuallyHiddenProps } = useVisuallyHidden();
-  const textareaRef = useRef2(null);
-  const ariaRef = useRef2(null);
+  const textareaRef = useRef(null);
+  const ariaRef = useRef(null);
   const [count, setCount] = useState(countCodePointsInString(props.value ?? ""));
   const [rows, setRows] = useState(initialRows);
   const syncHeight = useCallback3(
@@ -1040,7 +1053,7 @@ var MultiLineTextField = React10.forwardRef(function MultiLineTextFieldInner({ o
     /* @__PURE__ */ React10.createElement(
       StyledTextarea,
       {
-        ref: mergeRefs(textareaRef, forwardRef4, ariaRef),
+        ref: mergeRefs(textareaRef, forwardRef9, ariaRef),
         rows,
         noBottomPadding: showCount,
         ...inputProps
@@ -1075,6 +1088,7 @@ var PrefixContainer = styled9.span`
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
+  z-index: 1;
 `;
 var SuffixContainer = styled9.span`
   position: absolute;
@@ -1222,7 +1236,7 @@ var Icon = React11.forwardRef(function IconInner({ name, scale, unsafeNonGuideli
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-import React12, { useContext as useContext4, useRef as useRef3 } from "react";
+import React12, { forwardRef as forwardRef4, memo as memo4, useContext as useContext4 } from "react";
 import {
   Overlay,
   useModalOverlay,
@@ -1243,22 +1257,19 @@ function columnSystem(span, column, gutter) {
 import { maxWidth } from "@charcoal-ui/utils";
 import { useMedia } from "@charcoal-ui/styled";
 import { animated, useTransition, easings } from "react-spring";
+import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 var DEFAULT_Z_INDEX = 10;
-function Modal({
-  children,
-  zIndex = DEFAULT_Z_INDEX,
-  portalContainer,
-  ...props
-}) {
+var Modal = forwardRef4(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
   const {
     title,
     size = "M",
     bottomSheet = false,
     isDismissable,
     onClose,
+    className,
     isOpen = false
   } = props;
-  const ref = useRef3(null);
+  const ref = useObjectRef2(external);
   const { overlayProps, underlayProps } = useOverlay(props, ref);
   const { modalProps } = useModalOverlay(
     props,
@@ -1311,7 +1322,8 @@ function Modal({
           ...dialogProps,
           style: transitionEnabled ? { transform } : {},
           size,
-          bottomSheet
+          bottomSheet,
+          className
         },
         /* @__PURE__ */ React12.createElement(
           ModalContext.Provider,
@@ -1331,7 +1343,8 @@ function Modal({
       )))
     ))
   );
-}
+});
+var Modal_default = memo4(Modal);
 var ModalContext = React12.createContext({
   titleProps: {},
   title: "",
@@ -1445,15 +1458,24 @@ var ModalButtons = styled11.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-import React14, { useImperativeHandle, useRef as useRef4 } from "react";
+import React14, { forwardRef as forwardRef5, memo as memo5, useImperativeHandle, useRef as useRef2 } from "react";
 import styled12, { keyframes } from "styled-components";
-function LoadingSpinner({
-  size = 48,
-  padding = 16,
-  transparent = false
-}) {
-  return /* @__PURE__ */ React14.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ React14.createElement(LoadingSpinnerIcon, null));
-}
+var LoadingSpinner = forwardRef5(
+  function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, className }, ref) {
+    return /* @__PURE__ */ React14.createElement(
+      LoadingSpinnerRoot,
+      {
+        size,
+        padding,
+        transparent,
+        className,
+        ref
+      },
+      /* @__PURE__ */ React14.createElement(LoadingSpinnerIcon, null)
+    );
+  }
+);
+var LoadingSpinner_default = memo5(LoadingSpinner);
 var LoadingSpinnerRoot = styled12.div.attrs({ role: "progressbar" })`
   box-sizing: content-box;
   margin: auto;
@@ -1492,7 +1514,7 @@ var Icon2 = styled12.div.attrs({ role: "presentation" })`
   }
 `;
 var LoadingSpinnerIcon = React14.forwardRef(function LoadingSpinnerIcon2({ once = false }, ref) {
-  const iconRef = useRef4(null);
+  const iconRef = useRef2(null);
   useImperativeHandle(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
@@ -1507,7 +1529,7 @@ var LoadingSpinnerIcon = React14.forwardRef(function LoadingSpinnerIcon2({ once
 });
 
 // src/components/DropdownSelector/index.tsx
-import React19, { useMemo as useMemo3, useRef as useRef8 } from "react";
+import React19, { useMemo as useMemo3, useRef as useRef6 } from "react";
 import styled18 from "styled-components";
 import { Item, useSelectState } from "react-stately";
 import { disabledSelector as disabledSelector4 } from "@charcoal-ui/utils";
@@ -1516,7 +1538,7 @@ import { useSelect, HiddenSelect } from "@react-aria/select";
 import { useButton } from "@react-aria/button";
 
 // src/components/DropdownSelector/Listbox.tsx
-import React17, { memo, useRef as useRef6, Fragment, useMemo as useMemo2 } from "react";
+import React17, { memo as memo6, useRef as useRef4, Fragment, useMemo as useMemo2 } from "react";
 import styled16 from "styled-components";
 import { useListBox } from "@react-aria/listbox";
 
@@ -1527,14 +1549,14 @@ import React16 from "react";
 import styled15 from "styled-components";
 
 // src/components/DropdownSelector/Option.tsx
-import React15, { useRef as useRef5 } from "react";
+import React15, { useRef as useRef3 } from "react";
 import styled13, { css as css5 } from "styled-components";
 import { useOption } from "@react-aria/listbox";
 import { mergeProps } from "@react-aria/utils";
 import { useFocusRing } from "@react-aria/focus";
 import { px as px3 } from "@charcoal-ui/utils";
 function Option({ item, state, mode }) {
-  const ref = useRef5(null);
+  const ref = useRef3(null);
   const { optionProps, isSelected } = useOption(item, state, ref);
   const { focusProps } = useFocusRing();
   return /* @__PURE__ */ React15.createElement(OptionRoot, { ...mergeProps(optionProps, focusProps), ref, mode }, /* @__PURE__ */ React15.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ React15.createElement(OptionText, null, item.rendered));
@@ -1617,7 +1639,7 @@ var Listbox = ({
   mode = "default",
   ...props
 }) => {
-  const ref = useRef6(null);
+  const ref = useRef4(null);
   const { listBoxProps } = useListBox(props, state, ref);
   const collection = useMemo2(
     () => [...state.collection].map((node, index, self) => ({
@@ -1629,7 +1651,7 @@ var Listbox = ({
   );
   return /* @__PURE__ */ React17.createElement(ListboxRoot, { ref, ...listBoxProps }, collection.map(({ node, last }) => /* @__PURE__ */ React17.createElement(Fragment, { key: node.key }, node.type === "section" ? /* @__PURE__ */ React17.createElement(ListBoxSection, { section: node, state }) : /* @__PURE__ */ React17.createElement(Option, { item: node, state, mode }), !last && mode === "separator" && /* @__PURE__ */ React17.createElement(Divider, null))));
 };
-var Listbox_default = memo(Listbox);
+var Listbox_default = memo6(Listbox);
 var ListboxRoot = styled16.ul`
   padding-left: 0;
   margin: 0;
@@ -1648,7 +1670,7 @@ var ListboxRoot = styled16.ul`
 `;
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-import React18, { useEffect as useEffect2, useRef as useRef7 } from "react";
+import React18, { useEffect as useEffect2, useRef as useRef5 } from "react";
 import {
   DismissButton,
   Overlay as Overlay2,
@@ -1660,7 +1682,7 @@ var DropdownPopoverDiv = styled17.div`
   ${theme((o) => o.margin.top(4).bottom(4))}
 `;
 function DropdownPopover({ children, state, ...props }) {
-  const ref = useRef7(null);
+  const ref = useRef5(null);
   const { popoverProps, underlayProps } = usePopover(
     {
       ...props,
@@ -1709,7 +1731,7 @@ var DropdownSelector = ({
   ...props
 }) => {
   const { visuallyHiddenProps } = useVisuallyHidden2();
-  const triggerRef = useRef8(null);
+  const triggerRef = useRef6(null);
   const selectProps = useMemo3(
     () => ({
       ...props,
@@ -1833,7 +1855,7 @@ var AssertiveText = styled18.div`
 `;
 
 // src/components/SegmentedControl/index.tsx
-import React21, { forwardRef, memo as memo2, useMemo as useMemo4, useRef as useRef9 } from "react";
+import React21, { forwardRef as forwardRef6, memo as memo7, useMemo as useMemo4, useRef as useRef7 } from "react";
 import { useRadioGroupState } from "react-stately";
 import {
   useRadio,
@@ -1859,7 +1881,7 @@ var useRadioContext = () => {
 };
 
 // src/components/SegmentedControl/index.tsx
-var SegmentedControl = forwardRef(
+var SegmentedControl = forwardRef6(
   function SegmentedControlInner(props, ref) {
     const ariaRadioGroupProps = useMemo4(
       () => ({
@@ -1878,23 +1900,35 @@ var SegmentedControl = forwardRef(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
     }, [props.data]);
-    return /* @__PURE__ */ React21.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ React21.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ React21.createElement(
-      Segmented,
+    return /* @__PURE__ */ React21.createElement(
+      SegmentedControlRoot,
       {
-        key: item.value,
-        value: item.value,
-        disabled: item.disabled
+        ref,
+        ...radioGroupProps,
+        className: props.className
       },
-      item.label
-    ))));
+      /* @__PURE__ */ React21.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ React21.createElement(
+        Segmented,
+        {
+          key: item.value,
+          value: item.value,
+          disabled: item.disabled
+        },
+        item.label
+      )))
+    );
   }
 );
-var SegmentedControl_default = memo2(SegmentedControl);
-var Segmented = ({ children, ...props }) => {
+var SegmentedControl_default = memo7(SegmentedControl);
+var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = useRef9(null);
+  const ref = useRef7(null);
   const ariaRadioProps = useMemo4(
-    () => ({ ...props, isDisabled: props.disabled }),
+    () => ({
+      value: props.value,
+      isDisabled: props.disabled,
+      children: props.children
+    }),
     [props]
   );
   const { inputProps, isDisabled, isSelected } = useRadio(
@@ -1909,7 +1943,7 @@ var Segmented = ({ children, ...props }) => {
       checked: isSelected
     },
     /* @__PURE__ */ React21.createElement(SegmentedInput, { ...inputProps, ref }),
-    /* @__PURE__ */ React21.createElement(RadioLabel2, null, /* @__PURE__ */ React21.createElement(SegmentedLabelInner, null, children))
+    /* @__PURE__ */ React21.createElement(RadioLabel2, null, /* @__PURE__ */ React21.createElement(SegmentedLabelInner, null, props.children))
   );
 };
 var SegmentedControlRoot = styled19.div`
@@ -1962,13 +1996,13 @@ var SegmentedLabelInner = styled19.div`
 `;
 
 // src/components/Checkbox/index.tsx
-import React22, { forwardRef as forwardRef2, memo as memo3, useMemo as useMemo5 } from "react";
+import React22, { forwardRef as forwardRef7, memo as memo8, useMemo as useMemo5 } from "react";
 import styled20, { css as css6 } from "styled-components";
 import { useCheckbox } from "@react-aria/checkbox";
-import { useObjectRef } from "@react-aria/utils";
+import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { disabledSelector as disabledSelector6, px as px4 } from "@charcoal-ui/utils";
-var Checkbox = forwardRef2(
+var Checkbox = forwardRef7(
   function CheckboxInner(props, ref) {
     const ariaCheckboxProps = useMemo5(
       () => ({
@@ -1981,13 +2015,13 @@ var Checkbox = forwardRef2(
       [props]
     );
     const state = useToggleState2(ariaCheckboxProps);
-    const objectRef = useObjectRef(ref);
+    const objectRef = useObjectRef3(ref);
     const { inputProps } = useCheckbox(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-    return /* @__PURE__ */ React22.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React22.createElement(CheckboxRoot, null, /* @__PURE__ */ React22.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ React22.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ React22.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ React22.createElement(InputLabel, null, props.children));
+    return /* @__PURE__ */ React22.createElement(InputRoot, { "aria-disabled": isDisabled, className: props.className }, /* @__PURE__ */ React22.createElement(CheckboxRoot, null, /* @__PURE__ */ React22.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ React22.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ React22.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ React22.createElement(InputLabel, null, props.children));
   }
 );
-var Checkbox_default = memo3(Checkbox);
+var Checkbox_default = memo8(Checkbox);
 var hiddenCss = css6`
   visibility: hidden;
 `;
@@ -2052,11 +2086,11 @@ var InputLabel = styled20.div`
 
 // src/components/TagItem/index.tsx
 import React23, {
-  forwardRef as forwardRef3,
-  memo as memo4,
+  forwardRef as forwardRef8,
+  memo as memo9,
   useMemo as useMemo6
 } from "react";
-import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import styled21, { css as css7 } from "styled-components";
 import { disabledSelector as disabledSelector7, px as px5 } from "@charcoal-ui/utils";
 import { useButton as useButton2 } from "@react-aria/button";
@@ -2064,7 +2098,7 @@ var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = forwardRef3(
+var TagItem = forwardRef8(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2076,7 +2110,7 @@ var TagItem = forwardRef3(
     className,
     ...props
   }, _ref) {
-    const ref = useObjectRef2(_ref);
+    const ref = useObjectRef4(_ref);
     const ariaButtonProps = useMemo6(
       () => ({
         elementType: "a",
@@ -2101,7 +2135,7 @@ var TagItem = forwardRef3(
     );
   }
 );
-var TagItem_default = memo4(TagItem);
+var TagItem_default = memo9(TagItem);
 var TagItemRoot = styled21.a`
   isolation: isolate;
   position: relative;
@@ -2194,21 +2228,21 @@ export {
   DropdownSelectorItem,
   Icon_default as Icon,
   IconButton_default as IconButton,
-  LoadingSpinner,
+  LoadingSpinner_default as LoadingSpinner,
   LoadingSpinnerIcon,
-  Modal,
+  Modal_default as Modal,
   ModalAlign,
   ModalBody,
   ModalButtons,
   ModalHeader,
-  MultiSelect,
+  MultiSelect_default as MultiSelect,
   MultiSelectGroup,
   OverlayProvider,
-  Radio,
+  Radio_default as Radio,
   RadioGroup,
   SSRProvider,
   SegmentedControl_default as SegmentedControl,
-  SwitchCheckbox as Switch,
+  Switch_default as Switch,
   TagItem_default as TagItem,
   TextField_default as TextField,
   useComponentAbstraction