@charcoal-ui/react 4.0.0-beta.2 → 4.0.0-beta.4

package/dist/index.cjs.js

@@ -128,11 +128,12 @@ var Button = (0, import_react3.forwardRef)(function Button2({
   className,
   as,
   isActive,
+  componentAs,
   ...props
 }, ref) {
   const Component = (0, import_react3.useMemo)(() => as ?? "button", [as]);
   const classNames = useClassNames("charcoal-button", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, as: componentAs, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
 });
 var Button_default = Button;
 
@@ -359,7 +360,24 @@ var MultiSelectGroupContext = (0, import_react6.createContext)({
 
 // src/components/MultiSelect/index.tsx
 var import_styled4 = require("@charcoal-ui/styled");
+
+// src/components/Icon/index.tsx
+var React5 = __toESM(require("react"));
+var import_icons = require("@charcoal-ui/icons");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var Icon = React5.forwardRef(function IconInner({
+  name,
+  scale,
+  unsafeNonGuidelineScale,
+  className,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+});
+var Icon_default = Icon;
+
+// src/components/MultiSelect/index.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var MultiSelect = (0, import_react7.forwardRef)(function MultiSelectInner({
   value,
   disabled = false,
@@ -396,14 +414,14 @@ var MultiSelect = (0, import_react7.forwardRef)(function MultiSelectInner({
       selected: event.currentTarget.checked
     });
   }, [onChange, parentOnChange, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(MultiSelectRoot, { "aria-disabled": isDisabled, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSelectInput, { ...{
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(MultiSelectRoot, { "aria-disabled": isDisabled, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MultiSelectInput, { ...{
       name,
       value,
       invalid
     }, checked: isSelected, disabled: isDisabled, onChange: handleChange, overlay: variant === "overlay", "aria-invalid": invalid, ref }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSelectInputOverlay, { overlay: variant === "overlay", invalid, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
-    Boolean(children) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSelectLabel, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MultiSelectInputOverlay, { overlay: variant === "overlay", invalid, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
+    Boolean(children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MultiSelectLabel, { children })
   ] });
 });
 var MultiSelect_default = (0, import_react7.memo)(MultiSelect);
@@ -456,14 +474,14 @@ function MultiSelectGroup({
       }
     }
   }, [onChange, selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSelectGroupContext.Provider, { value: {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MultiSelectGroupContext.Provider, { value: {
     name,
     selected: Array.from(new Set(selected)),
     disabled,
     readonly,
     invalid,
     onChange: handleChange
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, "aria-label": label, "data-testid": "SelectGroup", children }) });
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className, "aria-label": label, "data-testid": "SelectGroup", children }) });
 }
 
 // src/components/Switch/index.tsx
@@ -473,7 +491,7 @@ var import_react_stately = require("react-stately");
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_utils3 = require("@react-aria/utils");
 var import_styled5 = require("@charcoal-ui/styled");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SwitchCheckbox = (0, import_react8.forwardRef)(function SwitchCheckboxInner(props, external) {
   const {
     disabled,
@@ -494,9 +512,9 @@ var SwitchCheckbox = (0, import_react8.forwardRef)(function SwitchCheckboxInner(
       ...rest
     }
   } = (0, import_switch.useSwitch)(ariaSwitchProps, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Label, { className, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SwitchInput, { ...rest, ref }),
-    "children" in props ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LabelInner, { children: props.children }) : void 0
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Label, { className, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SwitchInput, { ...rest, ref }),
+    "children" in props ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LabelInner, { children: props.children }) : void 0
   ] });
 });
 var Switch_default = (0, import_react8.memo)(SwitchCheckbox);
@@ -516,14 +534,14 @@ var SwitchInput = import_styled_components6.default.input.attrs({
 var import_textfield = require("@react-aria/textfield");
 var import_visually_hidden = require("@react-aria/visually-hidden");
 var import_react10 = require("react");
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/components/FieldLabel/index.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_styled_components7 = __toESM(require("styled-components"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var FieldLabel = React5.forwardRef(function FieldLabel2({
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var FieldLabel = React6.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -532,10 +550,10 @@ var FieldLabel = React5.forwardRef(function FieldLabel2({
   subLabel,
   ...labelProps
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FieldLabelWrapper, { style, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label2, { ref, ...labelProps, children: label }),
-    required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RequiredText, { children: requiredText }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SubLabelClickable, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: subLabel }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FieldLabelWrapper, { style, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label2, { ref, ...labelProps, children: label }),
+    required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RequiredText, { children: requiredText }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SubLabelClickable, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: subLabel }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
@@ -593,11 +611,11 @@ function useFocusWithClick(containerRef, inputRef) {
 
 // src/components/TextField/index.tsx
 var import_utils4 = require("@react-aria/utils");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var TextField = React6.forwardRef(function SingleLineTextFieldInner({
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   onChange,
   ...props
-}, forwardRef18) {
+}, forwardRef19) {
   const {
     className,
     showLabel = false,
@@ -608,6 +626,7 @@ var TextField = React6.forwardRef(function SingleLineTextFieldInner({
     disabled = false,
     required,
     invalid = false,
+    readOnly = false,
     assistiveText,
     maxLength,
     prefix = null,
@@ -642,6 +661,7 @@ var TextField = React6.forwardRef(function SingleLineTextFieldInner({
     inputElementType: "input",
     isDisabled: disabled,
     isRequired: required,
+    isReadOnly: readOnly,
     validationState: invalid ? "invalid" : "valid",
     description: !invalid && assistiveText,
     errorMessage: invalid && assistiveText,
@@ -651,17 +671,17 @@ var TextField = React6.forwardRef(function SingleLineTextFieldInner({
   const containerRef = (0, import_react10.useRef)(null);
   useFocusWithClick(containerRef, ariaRef);
   const inputProps = (0, import_utils4.mergeProps)(restProps, ariaInputProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(StyledInputContainer, { ref: containerRef, invalid, "aria-disabled": disabled === true ? true : void 0, hasPrefix: prefix != null, hasSuffix: suffix != null || showCount, children: [
-      prefix && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PrefixContainer, { children: prefix }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledInput, { ref: mergeRefs(forwardRef18, ariaRef), invalid, ...inputProps }),
-      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SuffixContainer, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(StyledInputContainer, { ref: containerRef, invalid, "aria-disabled": disabled === true ? true : void 0, hasPrefix: prefix != null, hasSuffix: suffix != null || showCount, children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PrefixContainer, { children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledInput, { ref: mergeRefs(forwardRef19, ariaRef), invalid, ...inputProps }),
+      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SuffixContainer, { children: [
         suffix,
-        showCount && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
@@ -698,11 +718,11 @@ var import_visually_hidden2 = require("@react-aria/visually-hidden");
 var import_react11 = require("react");
 var import_styled_components9 = __toESM(require("styled-components"));
 var import_utils5 = require("@react-aria/utils");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
   onChange,
   ...props
-}, forwardRef18) {
+}, forwardRef19) {
   const {
     className,
     showCount = false,
@@ -713,6 +733,7 @@ var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
     disabled = false,
     required,
     invalid = false,
+    readOnly = false,
     assistiveText,
     maxLength,
     autoHeight = false,
@@ -757,6 +778,7 @@ var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
     inputElementType: "textarea",
     isDisabled: disabled,
     isRequired: required,
+    isReadOnly: readOnly,
     validationState: invalid ? "invalid" : "valid",
     description: !invalid && assistiveText,
     errorMessage: invalid && assistiveText,
@@ -771,13 +793,13 @@ var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
   const containerRef = (0, import_react11.useRef)(null);
   useFocusWithClick(containerRef, ariaRef);
   const inputProps = (0, import_utils5.mergeProps)(restProps, ariaInputProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TextFieldRoot2, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(StyledTextareaContainer, { ref: containerRef, invalid, rows: showCount ? rows + 1 : rows, "aria-disabled": disabled === true ? "true" : void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledTextarea, { ref: mergeRefs(textareaRef, forwardRef18, ariaRef), rows, noBottomPadding: showCount, ...inputProps }),
-      showCount && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(TextFieldRoot2, { className, isDisabled: disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(StyledTextareaContainer, { ref: containerRef, invalid, rows: showCount ? rows + 1 : rows, "aria-disabled": disabled === true ? "true" : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledTextarea, { ref: mergeRefs(textareaRef, forwardRef19, ariaRef), rows, noBottomPadding: showCount, ...inputProps }),
+      showCount && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
@@ -801,23 +823,8 @@ var MultiLineCounter = import_styled_components9.default.span.withConfig({
   componentId: "ccl__sc-58waht-3"
 })(["position:absolute;bottom:9px;right:8px;line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
 
-// src/components/Icon/index.tsx
-var React7 = __toESM(require("react"));
-var import_icons = require("@charcoal-ui/icons");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Icon = React7.forwardRef(function IconInner({
-  name,
-  scale,
-  unsafeNonGuidelineScale,
-  className,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
-});
-var Icon_default = Icon;
-
 // src/components/Modal/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var React11 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
 var import_styled_components11 = __toESM(require("styled-components"));
@@ -830,15 +837,7 @@ var import_utils8 = require("@react-aria/utils");
 var import_react12 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_dialog = require("@react-aria/dialog");
-
-// ../foundation/src/grid.ts
-var COLUMN_UNIT = 80;
-var GUTTER_UNIT = 24;
-function columnSystem(span, column, gutter) {
-  return span * column + (span - 1) * gutter;
-}
-
-// src/components/Modal/Dialog/index.tsx
+var import_foundation = require("@charcoal-ui/foundation");
 var import_utils6 = require("@charcoal-ui/utils");
 var import_react_spring = require("react-spring");
 
@@ -860,8 +859,8 @@ function useForwardedRef(ref) {
 
 // src/components/Modal/Dialog/index.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Dialog = (0, import_react12.forwardRef)(function Dialog2(props, forwardRef18) {
-  const ref = useForwardedRef(forwardRef18);
+var Dialog = (0, import_react12.forwardRef)(function Dialog2(props, forwardRef19) {
+  const ref = useForwardedRef(forwardRef19);
   const {
     dialogProps
   } = (0, import_dialog.useDialog)({
@@ -874,13 +873,13 @@ var AnimatedStyledDialogDiv = (0, import_react_spring.animated)(import_styled_co
 })(["margin:auto;position:relative;height:fit-content;width:", "px;background-color:var(--charcoal-surface1);border-radius:24px;@media ", "{max-width:440px;width:calc(100% - 48px);", "}:focus{outline:none;}"], (p) => {
   switch (p.size) {
     case "S": {
-      return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+      return (0, import_foundation.columnSystem)(3, import_foundation.COLUMN_UNIT, import_foundation.GUTTER_UNIT) + import_foundation.GUTTER_UNIT * 2;
     }
     case "M": {
-      return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+      return (0, import_foundation.columnSystem)(4, import_foundation.COLUMN_UNIT, import_foundation.GUTTER_UNIT) + import_foundation.GUTTER_UNIT * 2;
     }
     case "L": {
-      return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+      return (0, import_foundation.columnSystem)(6, import_foundation.COLUMN_UNIT, import_foundation.GUTTER_UNIT) + import_foundation.GUTTER_UNIT * 2;
     }
     default: {
       return unreachable(p.size);
@@ -897,6 +896,25 @@ var ModalBackgroundContext = React9.createContext(null);
 // src/components/Modal/useCustomModalOverlay.tsx
 var React10 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
+
+// src/components/DropdownSelector/Popover/usePreventScroll.tsx
+var import_react13 = require("react");
+function usePreventScroll(element, isOpen) {
+  (0, import_react13.useEffect)(() => {
+    if (isOpen && element) {
+      const defaultPaddingRight = element.style.paddingRight;
+      const defaultOverflow = element.style.overflow;
+      element.style.paddingRight = `${window.innerWidth - element.clientWidth}px`;
+      element.style.overflow = "hidden";
+      return () => {
+        element.style.paddingRight = defaultPaddingRight;
+        element.style.overflow = defaultOverflow;
+      };
+    }
+  }, [element, isOpen]);
+}
+
+// src/components/Modal/useCustomModalOverlay.tsx
 function useCharcoalModalOverlay(props, state, ref) {
   const {
     overlayProps,
@@ -907,9 +925,7 @@ function useCharcoalModalOverlay(props, state, ref) {
     onClose: state.onClose,
     shouldCloseOnInteractOutside: () => false
   }, ref);
-  (0, import_overlays2.usePreventScroll)({
-    isDisabled: !state.isOpen
-  });
+  usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen);
   (0, import_overlays2.useOverlayFocusContain)();
   React10.useEffect(() => {
     if (state.isOpen && ref.current) {
@@ -925,7 +941,7 @@ function useCharcoalModalOverlay(props, state, ref) {
 // src/components/Modal/index.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react13.forwardRef)(function ModalInner({
+var Modal = (0, import_react14.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -1006,7 +1022,7 @@ var Modal = (0, import_react13.forwardRef)(function ModalInner({
     isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalCrossButton, { size: "S", icon: "24/Close", onClick: onClose })
   ] }) }) }) }) }));
 });
-var Modal_default = (0, import_react13.memo)(Modal);
+var Modal_default = (0, import_react14.memo)(Modal);
 var ModalContext = React11.createContext({
   titleProps: {},
   title: "",
@@ -1028,7 +1044,7 @@ function ModalTitle(props) {
   const {
     titleProps,
     title
-  } = (0, import_react13.useContext)(ModalContext);
+  } = (0, import_react14.useContext)(ModalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
 }
 var ModalHeading = import_styled_components11.default.h3.withConfig({
@@ -1037,11 +1053,11 @@ var ModalHeading = import_styled_components11.default.h3.withConfig({
 
 // src/components/Modal/ModalPlumbing.tsx
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_utils9 = require("@charcoal-ui/utils");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react14.useContext)(ModalContext);
+  const modalCtx = (0, import_react15.useContext)(ModalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalHeaderRoot, { $bottomSheet: modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledModalTitle, {}) });
 }
 var ModalHeaderRoot = import_styled_components12.default.div.withConfig({
@@ -1063,10 +1079,10 @@ var ModalButtons = import_styled_components12.default.div.withConfig({
 })(["display:grid;grid-auto-flow:row;grid-row-gap:8px;padding-top:16px;padding-left:16px;padding-right:16px;"]);
 
 // src/components/LoadingSpinner/index.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react15.forwardRef)(function LoadingSpinnerInner({
+var LoadingSpinner = (0, import_react16.forwardRef)(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
@@ -1074,7 +1090,7 @@ var LoadingSpinner = (0, import_react15.forwardRef)(function LoadingSpinnerInner
 }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoadingSpinnerRoot, { size, padding, transparent, className, ref, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = (0, import_react15.memo)(LoadingSpinner);
+var LoadingSpinner_default = (0, import_react16.memo)(LoadingSpinner);
 var LoadingSpinnerRoot = import_styled_components13.default.div.attrs({
   role: "progressbar"
 }).withConfig({
@@ -1088,11 +1104,11 @@ var Icon2 = import_styled_components13.default.div.attrs({
 }).withConfig({
   componentId: "ccl__sc-1id6yz4-1"
 })(["width:1em;height:1em;border-radius:1em;background-color:currentColor;animation:", " 1s both ease-out;animation-iteration-count:", ";&[data-reset-animation]{animation:none;}"], scaleOut, (p) => p.once ? 1 : "infinite");
-var LoadingSpinnerIcon = (0, import_react15.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinnerIcon = (0, import_react16.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -1117,25 +1133,6 @@ var import_react18 = require("react");
 var import_react17 = require("react");
 var import_overlays4 = require("@react-aria/overlays");
 var import_styled_components14 = __toESM(require("styled-components"));
-
-// src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react16 = require("react");
-function usePreventScroll2(element, isOpen) {
-  (0, import_react16.useEffect)(() => {
-    if (isOpen && element) {
-      const defaultPaddingRight = element.style.paddingRight;
-      const defaultOverflow = element.style.overflow;
-      element.style.paddingRight = `${window.innerWidth - element.clientWidth}px`;
-      element.style.overflow = "hidden";
-      return () => {
-        element.style.paddingRight = defaultPaddingRight;
-        element.style.overflow = defaultOverflow;
-      };
-    }
-  }, [element, isOpen]);
-}
-
-// src/components/DropdownSelector/Popover/index.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
@@ -1156,7 +1153,7 @@ function Popover(props) {
     toggle: _empty
   });
   const modalBackground = (0, import_react17.useContext)(ModalBackgroundContext);
-  usePreventScroll2(modalBackground, props.isOpen);
+  usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
@@ -1284,7 +1281,10 @@ var import_styled7 = require("@charcoal-ui/styled");
 var import_visually_hidden3 = require("@react-aria/visually-hidden");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultRequiredText = "*\u5FC5\u9808";
-function DropdownSelector(props) {
+function DropdownSelector({
+  onChange,
+  ...props
+}) {
   const triggerRef = (0, import_react21.useRef)(null);
   const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
@@ -1293,9 +1293,12 @@ function DropdownSelector(props) {
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden3.useVisuallyHidden)();
+  const handleChange = (0, import_react21.useCallback)((e) => {
+    onChange(e.target.value);
+  }, [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
     props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownFieldLabel, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("select", { name: props.name, value: props.value, tabIndex: -1, children: propsArray.map((itemProps) => {
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
       return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
@@ -1307,7 +1310,7 @@ function DropdownSelector(props) {
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonIcon, { name: "16/Menu" })
     ] }),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuList, { value: props.value, onChange: (v) => {
-      props.onChange(v);
+      onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
     props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
@@ -1493,240 +1496,15 @@ var StyledLi2 = import_styled_components19.default.li.withConfig({
 })(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-var import_react28 = require("react");
-
-// ../../node_modules/@react-stately/form/dist/import.mjs
-var import_react24 = 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_react24.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_react24.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_react24.useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
-  let serverErrorMessages = (0, import_react24.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_react24.useState)(serverErrors);
-  let [isServerErrorCleared, setServerErrorCleared] = (0, import_react24.useState)(false);
-  if (serverErrors !== lastServerErrors) {
-    setLastServerErrors(serverErrors);
-    setServerErrorCleared(false);
-  }
-  let serverError = (0, import_react24.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
-  let nextValidation = (0, import_react24.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let [currentValidity, setCurrentValidity] = (0, import_react24.useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let lastError = (0, import_react24.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_react24.useState)(false);
-  (0, import_react24.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_react25 = require("react");
-function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (0, import_react25.useState)(value || defaultValue);
-  let isControlledRef = (0, import_react25.useRef)(value !== void 0);
-  let isControlled = value !== void 0;
-  (0, import_react25.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_react25.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_react26 = 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_react26.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_react26.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_radio = require("@react-stately/radio");
 var import_radio2 = require("@react-aria/radio");
 var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react27 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioContext = (0, import_react27.createContext)(null);
+var RadioContext = (0, import_react24.createContext)(null);
 var RadioProvider = ({
   value,
   children
@@ -1734,7 +1512,7 @@ var RadioProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react27.useContext)(RadioContext);
+  const state = (0, import_react24.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
@@ -1742,19 +1520,19 @@ var useRadioContext = () => {
 
 // src/components/SegmentedControl/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react28.forwardRef)(function SegmentedControlInner(props, ref) {
-  const ariaRadioGroupProps = (0, import_react28.useMemo)(() => ({
+var SegmentedControl = (0, import_react25.forwardRef)(function SegmentedControlInner(props, ref) {
+  const ariaRadioGroupProps = (0, import_react25.useMemo)(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
     isRequired: props.required,
     "aria-label": props.name
   }), [props]);
-  const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(ariaRadioGroupProps);
+  const state = (0, import_radio.useRadioGroupState)(ariaRadioGroupProps);
   const {
     radioGroupProps
   } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react28.useMemo)(() => {
+  const segmentedControlItems = (0, import_react25.useMemo)(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
@@ -1762,11 +1540,11 @@ var SegmentedControl = (0, import_react28.forwardRef)(function SegmentedControlI
   }, [props.data]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SegmentedControlRoot, { ref, ...radioGroupProps, className: props.className, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = (0, import_react28.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react25.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react28.useRef)(null);
-  const ariaRadioProps = (0, import_react28.useMemo)(() => ({
+  const ref = (0, import_react25.useRef)(null);
+  const ariaRadioProps = (0, import_react25.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1800,73 +1578,65 @@ var SegmentedLabelInner = import_styled_components20.default.div.withConfig({
 })(["font-size:14px;line-height:22px;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
 
 // src/components/Checkbox/index.tsx
-var import_react29 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"));
-var import_checkbox = require("@react-aria/checkbox");
-var import_utils12 = require("@react-aria/utils");
-var import_react_stately2 = require("react-stately");
-var import_styled8 = require("@charcoal-ui/styled");
+var import_react27 = require("react");
+var import_utils11 = require("@react-aria/utils");
+
+// src/components/CheckboxInput/index.tsx
+var import_react26 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Checkbox = (0, import_react29.forwardRef)(function CheckboxInner({
-  invalid = false,
+var CheckboxInput = (0, import_react26.forwardRef)(function CheckboxInput2({
+  onChange,
+  checked,
+  invalid,
   ...props
 }, ref) {
-  const ariaCheckboxProps = (0, import_react29.useMemo)(() => ({
-    ...props,
-    isInValid: invalid,
-    isSelected: props.checked,
-    defaultSelected: props.defaultChecked,
-    validationState: invalid ? "invalid" : "valid",
-    "aria-label": "children" in props ? void 0 : props.label,
-    isDisabled: props.disabled
-  }), [invalid, props]);
-  const state = (0, import_react_stately2.useToggleState)(ariaCheckboxProps);
-  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__ */ (0, import_jsx_runtime27.jsxs)(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CheckboxRoot, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxInput, { type: "checkbox", ...inputProps, readOnly: props.readonly }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
-    ] }),
-    "children" in props && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InputLabel, { children: props.children })
+  const handleChange = (0, import_react26.useCallback)((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.checked);
+  }, [onChange]);
+  const classNames = useClassNames("charcoal-checkbox-input__root", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("input", { ref, className: "charcoal-checkbox-input__input", type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "charcoal-checkbox-input__overlay", "aria-hidden": true, "data-checked": checked, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
   ] });
 });
-var Checkbox_default = (0, import_react29.memo)(Checkbox);
-var hiddenCss = (0, import_styled_components21.css)(["visibility:hidden;"]);
-var InputRoot = import_styled_components21.default.label.withConfig({
-  componentId: "ccl__sc-wrdmwj-0"
-})(["position:relative;display:flex;cursor:pointer;gap:4px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}"]);
-var CheckboxRoot = import_styled_components21.default.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-1"
-})(["position:relative;"]);
-var CheckboxInput = import_styled_components21.default.input.withConfig({
-  componentId: "ccl__sc-wrdmwj-2"
-})(["&[type='checkbox']{appearance:none;display:block;cursor:pointer;margin:0;width:20px;height:20px;border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:disabled{cursor:default;}&:read-only{cursor:default;}&:checked{background-color:var(--charcoal-brand);&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);}&:active{background-color:var(--charcoal-brand-press);}}}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text4);}}"], import_styled8.focusVisibleFocusRingCss);
-var CheckboxInputOverlay = import_styled_components21.default.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-3"
-})(["position:absolute;top:-2px;left:-2px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--charcoal-text5);", ";"], ({
-  checked
-}) => checked !== true && hiddenCss);
-var InputLabel = import_styled_components21.default.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-4"
-})(["color:var(--charcoal-text2);font-size:14px;line-height:20px;"]);
+var CheckboxInput_default = (0, import_react26.memo)(CheckboxInput);
+
+// src/components/Checkbox/index.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Checkbox = (0, import_react27.forwardRef)(function CheckboxInner({
+  disabled,
+  className,
+  id,
+  children,
+  ...props
+}, ref) {
+  const classNames = useClassNames("charcoal-checkbox__label", className);
+  const htmlId = (0, import_utils11.useId)(id);
+  const input = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CheckboxInput_default, { ...props, id: htmlId, disabled, ref });
+  if (children === void 0) {
+    return input;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { htmlFor: htmlId, "aria-disabled": disabled, className: classNames, children: [
+    input,
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "charcoal-checkbox__text", children })
+  ] });
+});
+var Checkbox_default = (0, import_react27.memo)(Checkbox);
 
 // src/components/TagItem/index.tsx
-var import_react30 = require("react");
-var import_utils13 = require("@react-aria/utils");
-var import_styled_components22 = __toESM(require("styled-components"));
-var import_utils14 = require("@charcoal-ui/utils");
+var import_react28 = require("react");
+var import_utils12 = require("@react-aria/utils");
+var import_styled_components21 = __toESM(require("styled-components"));
+var import_utils13 = require("@charcoal-ui/utils");
 var import_button = require("@react-aria/button");
-var import_styled9 = require("@charcoal-ui/styled");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_styled8 = require("@charcoal-ui/styled");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react30.forwardRef)(function TagItemInner({
+var TagItem = (0, import_react28.forwardRef)(function TagItemInner({
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
@@ -1877,8 +1647,8 @@ var TagItem = (0, import_react30.forwardRef)(function TagItemInner({
   className,
   ...props
 }, _ref) {
-  const ref = (0, import_utils13.useObjectRef)(_ref);
-  const ariaButtonProps = (0, import_react30.useMemo)(() => ({
+  const ref = (0, import_utils12.useObjectRef)(_ref);
+  const ariaButtonProps = (0, import_react28.useMemo)(() => ({
     elementType: "a",
     isDisabled: disabled,
     ...props
@@ -1887,22 +1657,22 @@ var TagItem = (0, import_react30.forwardRef)(function TagItemInner({
     buttonProps
   } = (0, import_button.useButton)(ariaButtonProps, ref);
   const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(TagItemRoot, { ref, size: hasTranslatedLabel ? "M" : size, status, ...buttonProps, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Background, { bgColor, bgImage, status }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Inner, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
-        hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslatedLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label3, { children: translatedLabel }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label3, { children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TagItemRoot, { ref, size: hasTranslatedLabel ? "M" : size, status, ...buttonProps, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Background, { bgColor, bgImage, status }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Inner, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
+        hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslatedLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label3, { children: translatedLabel }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label3, { children: label })
       ] }),
-      status === "active" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "16/Remove" })
+      status === "active" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: "16/Remove" })
     ] })
   ] });
 });
-var TagItem_default = (0, import_react30.memo)(TagItem);
+var TagItem_default = (0, import_react28.memo)(TagItem);
 var horizontalPadding = ({
   left,
   right
-}) => (0, import_styled_components22.css)(["padding-right:", ";padding-left:", ";"], (0, import_utils14.px)(right), (0, import_utils14.px)(left));
+}) => (0, import_styled_components21.css)(["padding-right:", ";padding-left:", ";"], (0, import_utils13.px)(right), (0, import_utils13.px)(left));
 var tagItemRootSize = (size) => {
   switch (size) {
     case "M":
@@ -1921,7 +1691,7 @@ var activeTagItemRoot = horizontalPadding({
   left: 16,
   right: 8
 });
-var TagItemRoot = import_styled_components22.default.a.withConfig({
+var TagItemRoot = import_styled_components21.default.a.withConfig({
   componentId: "ccl__sc-11j9pu2-0"
 })(["isolation:isolate;position:relative;height:", "px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;overflow:hidden;border-radius:4px;", " ", " color:", ";transition:0.2s box-shadow;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", "}&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}"], ({
   size
@@ -1932,30 +1702,30 @@ var TagItemRoot = import_styled_components22.default.a.withConfig({
   status
 }) => status === "active" && activeTagItemRoot, ({
   status
-}) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)", import_styled9.focusVisibleFocusRingCss);
-var Background = import_styled_components22.default.div.withConfig({
+}) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)", import_styled8.focusVisibleFocusRingCss);
+var Background = import_styled_components21.default.div.withConfig({
   componentId: "ccl__sc-11j9pu2-1"
 })(["position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:", ";", " ", ""], ({
   bgColor
 }) => bgColor, ({
   status
-}) => status === "inactive" && (0, import_styled_components22.css)(["background-color:var(--charcoal-surface3);"]), ({
+}) => status === "inactive" && (0, import_styled_components21.css)(["background-color:var(--charcoal-surface3);"]), ({
   bgImage
-}) => bgImage !== void 0 && (0, import_styled_components22.css)(["background-color:var(--charcoal-surface4);&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;background-image:url(", ");mix-blend-mode:overlay;}"], bgImage));
-var Inner = import_styled_components22.default.div.withConfig({
+}) => bgImage !== void 0 && (0, import_styled_components21.css)(["background-color:var(--charcoal-surface4);&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;background-image:url(", ");mix-blend-mode:overlay;}"], bgImage));
+var Inner = import_styled_components21.default.div.withConfig({
   componentId: "ccl__sc-11j9pu2-2"
 })(["display:inline-flex;gap:8px;align-items:center;z-index:2;"]);
-var labelCSS = (0, import_styled_components22.css)(["font-size:14px;line-height:22px;font-weight:bold;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var translateLabelCSS = (0, import_styled_components22.css)(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
-var LabelWrapper = import_styled_components22.default.div.withConfig({
+var labelCSS = (0, import_styled_components21.css)(["font-size:14px;line-height:22px;font-weight:bold;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
+var translateLabelCSS = (0, import_styled_components21.css)(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
+var LabelWrapper = import_styled_components21.default.div.withConfig({
   componentId: "ccl__sc-11j9pu2-3"
 })(["", ""], ({
   isTranslate
 }) => isTranslate ?? false ? translateLabelCSS : labelCSS);
-var Label3 = import_styled_components22.default.span.withConfig({
+var Label3 = import_styled_components21.default.span.withConfig({
   componentId: "ccl__sc-11j9pu2-4"
 })(["max-width:152px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit;color:inherit;line-height:inherit;"]);
-var TranslatedLabel = import_styled_components22.default.div.withConfig({
+var TranslatedLabel = import_styled_components21.default.div.withConfig({
   componentId: "ccl__sc-11j9pu2-5"
 })(["font-size:12px;line-height:20px;font-weight:bold;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
 // Annotate the CommonJS export names for ESM import in node: