@charcoal-ui/react 3.10.1 → 3.12.0

package/dist/index.cjs.js

@@ -422,7 +422,24 @@ var MultiSelectGroupContext = (0, import_react5.createContext)({
 
 // src/components/MultiSelect/index.tsx
 var import_styled5 = require("@charcoal-ui/styled");
+
+// src/components/Icon/index.tsx
+var React4 = __toESM(require("react"));
+var import_icons = require("@charcoal-ui/icons");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var Icon = React4.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_react6.forwardRef)(function MultiSelectInner({
   value,
   disabled = false,
@@ -459,14 +476,14 @@ var MultiSelect = (0, import_react6.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_react6.memo)(MultiSelect);
@@ -519,14 +536,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
@@ -536,7 +553,7 @@ var import_react_stately = require("react-stately");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_utils3 = require("@react-aria/utils");
 var import_styled6 = require("@charcoal-ui/styled");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SwitchCheckbox = (0, import_react7.forwardRef)(function SwitchCheckboxInner(props, external) {
   const {
     disabled,
@@ -557,9 +574,9 @@ var SwitchCheckbox = (0, import_react7.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_react7.memo)(SwitchCheckbox);
@@ -579,14 +596,14 @@ var SwitchInput = import_styled_components7.default.input.attrs({
 var import_textfield = require("@react-aria/textfield");
 var import_visually_hidden = require("@react-aria/visually-hidden");
 var import_react9 = require("react");
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/components/FieldLabel/index.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_styled_components8 = __toESM(require("styled-components"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var FieldLabel = React4.forwardRef(function FieldLabel2({
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var FieldLabel = React5.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -595,10 +612,10 @@ var FieldLabel = React4.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;
@@ -636,8 +653,8 @@ 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 = React5.forwardRef(function SingleLineTextFieldInner({
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TextField = React6.forwardRef(function SingleLineTextFieldInner({
   onChange,
   ...props
 }, forwardRef18) {
@@ -651,6 +668,7 @@ var TextField = React5.forwardRef(function SingleLineTextFieldInner({
     disabled = false,
     required,
     invalid = false,
+    readOnly = false,
     assistiveText,
     maxLength,
     prefix = null,
@@ -685,6 +703,7 @@ var TextField = React5.forwardRef(function SingleLineTextFieldInner({
     inputElementType: "input",
     isDisabled: disabled,
     isRequired: required,
+    isReadOnly: readOnly,
     validationState: invalid ? "invalid" : "valid",
     description: !invalid && assistiveText,
     errorMessage: invalid && assistiveText,
@@ -694,17 +713,17 @@ var TextField = React5.forwardRef(function SingleLineTextFieldInner({
   const containerRef = (0, import_react9.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(forwardRef18, 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;
@@ -741,7 +760,7 @@ var import_visually_hidden2 = require("@react-aria/visually-hidden");
 var import_react10 = require("react");
 var import_styled_components10 = __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_react10.forwardRef)(function TextAreaInner({
   onChange,
   ...props
@@ -756,6 +775,7 @@ var TextArea = (0, import_react10.forwardRef)(function TextAreaInner({
     disabled = false,
     required,
     invalid = false,
+    readOnly = false,
     assistiveText,
     maxLength,
     autoHeight = false,
@@ -800,6 +820,7 @@ var TextArea = (0, import_react10.forwardRef)(function TextAreaInner({
     inputElementType: "textarea",
     isDisabled: disabled,
     isRequired: required,
+    isReadOnly: readOnly,
     validationState: invalid ? "invalid" : "valid",
     description: !invalid && assistiveText,
     errorMessage: invalid && assistiveText,
@@ -814,13 +835,13 @@ var TextArea = (0, import_react10.forwardRef)(function TextAreaInner({
   const containerRef = (0, import_react10.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, forwardRef18, 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;
@@ -844,23 +865,8 @@ var MultiLineCounter = import_styled_components10.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 React6 = __toESM(require("react"));
-var import_icons = require("@charcoal-ui/icons");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Icon = React6.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_react12 = require("react");
+var import_react13 = require("react");
 var React10 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
 var import_styled_components12 = __toESM(require("styled-components"));
@@ -873,15 +879,7 @@ var import_utils8 = require("@react-aria/utils");
 var import_react11 = require("react");
 var import_styled_components11 = __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");
 
@@ -917,13 +915,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);
@@ -940,6 +938,25 @@ var ModalBackgroundContext = React8.createContext(null);
 // src/components/Modal/useCustomModalOverlay.tsx
 var React9 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
+
+// src/components/DropdownSelector/Popover/usePreventScroll.tsx
+var import_react12 = require("react");
+function usePreventScroll(element, isOpen) {
+  (0, import_react12.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,
@@ -950,9 +967,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)();
   React9.useEffect(() => {
     if (state.isOpen && ref.current) {
@@ -968,7 +983,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_react12.forwardRef)(function ModalInner({
+var Modal = (0, import_react13.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -1049,7 +1064,7 @@ var Modal = (0, import_react12.forwardRef)(function ModalInner({
     isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalCrossButton, { size: "S", icon: "24/Close", onClick: onClose })
   ] }) }) }) }) }));
 });
-var Modal_default = (0, import_react12.memo)(Modal);
+var Modal_default = (0, import_react13.memo)(Modal);
 var ModalContext = React10.createContext({
   titleProps: {},
   title: "",
@@ -1071,7 +1086,7 @@ function ModalTitle(props) {
   const {
     titleProps,
     title
-  } = (0, import_react12.useContext)(ModalContext);
+  } = (0, import_react13.useContext)(ModalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
 }
 var ModalHeading = import_styled_components12.default.h3.withConfig({
@@ -1080,11 +1095,11 @@ var ModalHeading = import_styled_components12.default.h3.withConfig({
 
 // src/components/Modal/ModalPlumbing.tsx
 var import_styled_components13 = __toESM(require("styled-components"));
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_utils9 = require("@charcoal-ui/utils");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react13.useContext)(ModalContext);
+  const modalCtx = (0, import_react14.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_components13.default.div.withConfig({
@@ -1106,10 +1121,10 @@ var ModalButtons = import_styled_components13.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_react14 = require("react");
+var import_react15 = require("react");
 var import_styled_components14 = __toESM(require("styled-components"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react14.forwardRef)(function LoadingSpinnerInner({
+var LoadingSpinner = (0, import_react15.forwardRef)(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
@@ -1117,7 +1132,7 @@ var LoadingSpinner = (0, import_react14.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_react14.memo)(LoadingSpinner);
+var LoadingSpinner_default = (0, import_react15.memo)(LoadingSpinner);
 var LoadingSpinnerRoot = import_styled_components14.default.div.attrs({
   role: "progressbar"
 }).withConfig({
@@ -1131,11 +1146,11 @@ var Icon2 = import_styled_components14.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_react14.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinnerIcon = (0, import_react15.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -1160,25 +1175,6 @@ var import_react17 = require("react");
 var import_react16 = require("react");
 var import_overlays4 = require("@react-aria/overlays");
 var import_styled_components15 = __toESM(require("styled-components"));
-
-// src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react15 = require("react");
-function usePreventScroll2(element, isOpen) {
-  (0, import_react15.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) {
@@ -1199,7 +1195,7 @@ function Popover(props) {
     toggle: _empty
   });
   const modalBackground = (0, import_react16.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: [
@@ -1542,240 +1538,15 @@ var StyledLi2 = import_styled_components20.default.li.withConfig({
 })(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-var import_react27 = require("react");
-
-// ../../node_modules/@react-stately/form/dist/import.mjs
-var import_react23 = require("react");
-var $e5be200c675c3b3a$export$aca958c65c314e6c = {
-  badInput: false,
-  customError: false,
-  patternMismatch: false,
-  rangeOverflow: false,
-  rangeUnderflow: false,
-  stepMismatch: false,
-  tooLong: false,
-  tooShort: false,
-  typeMismatch: false,
-  valueMissing: false,
-  valid: true
-};
-var $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
-  ...$e5be200c675c3b3a$export$aca958c65c314e6c,
-  customError: true,
-  valid: false
-};
-var $e5be200c675c3b3a$export$dad6ae84456c676a = {
-  isInvalid: false,
-  validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
-  validationErrors: []
-};
-var $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, import_react23.createContext)({});
-var $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
-function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
-  if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
-    let {
-      realtimeValidation,
-      displayValidation,
-      updateValidation,
-      resetValidation,
-      commitValidation
-    } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
-    return {
-      realtimeValidation,
-      displayValidation,
-      updateValidation,
-      resetValidation,
-      commitValidation
-    };
-  }
-  return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
-}
-function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
-  let {
-    isInvalid,
-    validationState,
-    name,
-    value,
-    builtinValidation,
-    validate,
-    validationBehavior = "aria"
-  } = props;
-  if (validationState)
-    isInvalid || (isInvalid = validationState === "invalid");
-  let controlledError = isInvalid ? {
-    isInvalid: true,
-    validationErrors: [],
-    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
-  } : null;
-  let clientError = (0, import_react23.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [validate, value]);
-  if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid)
-    builtinValidation = null;
-  let serverErrors = (0, import_react23.useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
-  let serverErrorMessages = (0, import_react23.useMemo)(() => {
-    if (name)
-      return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
-    return [];
-  }, [serverErrors, name]);
-  let [lastServerErrors, setLastServerErrors] = (0, import_react23.useState)(serverErrors);
-  let [isServerErrorCleared, setServerErrorCleared] = (0, import_react23.useState)(false);
-  if (serverErrors !== lastServerErrors) {
-    setLastServerErrors(serverErrors);
-    setServerErrorCleared(false);
-  }
-  let serverError = (0, import_react23.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
-  let nextValidation = (0, import_react23.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let [currentValidity, setCurrentValidity] = (0, import_react23.useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let lastError = (0, import_react23.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let commitValidation = () => {
-    if (!commitQueued)
-      return;
-    setCommitQueued(false);
-    let error = clientError || builtinValidation || nextValidation.current;
-    if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
-      lastError.current = error;
-      setCurrentValidity(error);
-    }
-  };
-  let [commitQueued, setCommitQueued] = (0, import_react23.useState)(false);
-  (0, import_react23.useEffect)(commitValidation);
-  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
-  let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
-  return {
-    realtimeValidation,
-    displayValidation,
-    updateValidation(value2) {
-      if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value2))
-        setCurrentValidity(value2);
-      else
-        nextValidation.current = value2;
-    },
-    resetValidation() {
-      let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
-      if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
-        lastError.current = error;
-        setCurrentValidity(error);
-      }
-      if (validationBehavior === "native")
-        setCommitQueued(false);
-      setServerErrorCleared(true);
-    },
-    commitValidation() {
-      if (validationBehavior === "native")
-        setCommitQueued(true);
-      setServerErrorCleared(true);
-    }
-  };
-}
-function $e5be200c675c3b3a$var$asArray(v) {
-  if (!v)
-    return [];
-  return Array.isArray(v) ? v : [v];
-}
-function $e5be200c675c3b3a$var$runValidate(validate, value) {
-  if (typeof validate === "function") {
-    let e = validate(value);
-    if (e && typeof e !== "boolean")
-      return $e5be200c675c3b3a$var$asArray(e);
-  }
-  return [];
-}
-function $e5be200c675c3b3a$var$getValidationResult(errors) {
-  return errors.length ? {
-    isInvalid: true,
-    validationErrors: errors,
-    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
-  } : null;
-}
-function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
-  if (a === b)
-    return true;
-  return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
-}
-
-// ../../node_modules/@react-stately/utils/dist/import.mjs
 var import_react24 = require("react");
-function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (0, import_react24.useState)(value || defaultValue);
-  let isControlledRef = (0, import_react24.useRef)(value !== void 0);
-  let isControlled = value !== void 0;
-  (0, import_react24.useEffect)(() => {
-    let wasControlled = isControlledRef.current;
-    if (wasControlled !== isControlled)
-      console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
-    isControlledRef.current = isControlled;
-  }, [isControlled]);
-  let currentValue = isControlled ? value : stateValue;
-  let setValue = (0, import_react24.useCallback)((value2, ...args) => {
-    let onChangeCaller = (value3, ...onChangeArgs) => {
-      if (onChange) {
-        if (!Object.is(currentValue, value3))
-          onChange(value3, ...onChangeArgs);
-      }
-      if (!isControlled)
-        currentValue = value3;
-    };
-    if (typeof value2 === "function") {
-      console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320");
-      let updateFunction = (oldValue, ...functionArgs) => {
-        let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
-        onChangeCaller(interceptedValue, ...args);
-        if (!isControlled)
-          return interceptedValue;
-        return oldValue;
-      };
-      setStateValue(updateFunction);
-    } else {
-      if (!isControlled)
-        setStateValue(value2);
-      onChangeCaller(value2, ...args);
-    }
-  }, [isControlled, currentValue, onChange]);
-  return [currentValue, setValue];
-}
-
-// ../../node_modules/@react-stately/radio/dist/import.mjs
-var import_react25 = require("react");
-var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
-var $a54cdc5c1942b639$var$i = 0;
-function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
-  let name = (0, import_react25.useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [props.name]);
-  var _props_defaultValue;
-  let [selectedValue, setSelected] = (0, $458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
-  let [lastFocusedValue, setLastFocusedValue] = (0, import_react25.useState)(null);
-  let validation = (0, $e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
-    ...props,
-    value: selectedValue
-  });
-  let setSelectedValue = (value) => {
-    if (!props.isReadOnly && !props.isDisabled) {
-      setSelected(value);
-      validation.commitValidation();
-    }
-  };
-  let isInvalid = validation.displayValidation.isInvalid;
-  return {
-    ...validation,
-    name,
-    selectedValue,
-    setSelectedValue,
-    lastFocusedValue,
-    setLastFocusedValue,
-    isDisabled: props.isDisabled || false,
-    isReadOnly: props.isReadOnly || false,
-    isRequired: props.isRequired || false,
-    validationState: props.validationState || (isInvalid ? "invalid" : null),
-    isInvalid
-  };
-}
-
-// src/components/SegmentedControl/index.tsx
+var import_radio = require("@react-stately/radio");
 var import_radio2 = require("@react-aria/radio");
 var import_styled_components21 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react26 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioContext = (0, import_react26.createContext)(null);
+var RadioContext = (0, import_react23.createContext)(null);
 var RadioProvider = ({
   value,
   children
@@ -1783,7 +1554,7 @@ var RadioProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react26.useContext)(RadioContext);
+  const state = (0, import_react23.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
@@ -1791,19 +1562,19 @@ var useRadioContext = () => {
 
 // src/components/SegmentedControl/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react27.forwardRef)(function SegmentedControlInner(props, ref) {
-  const ariaRadioGroupProps = (0, import_react27.useMemo)(() => ({
+var SegmentedControl = (0, import_react24.forwardRef)(function SegmentedControlInner(props, ref) {
+  const ariaRadioGroupProps = (0, import_react24.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_react27.useMemo)(() => {
+  const segmentedControlItems = (0, import_react24.useMemo)(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
@@ -1811,11 +1582,11 @@ var SegmentedControl = (0, import_react27.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_react27.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react24.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react27.useRef)(null);
-  const ariaRadioProps = (0, import_react27.useMemo)(() => ({
+  const ref = (0, import_react24.useRef)(null);
+  const ariaRadioProps = (0, import_react24.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1849,32 +1620,33 @@ var SegmentedLabelInner = import_styled_components21.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_react28 = require("react");
+var import_react25 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
-var import_utils12 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_react_stately2 = require("react-stately");
 var import_styled9 = require("@charcoal-ui/styled");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Checkbox = (0, import_react28.forwardRef)(function CheckboxInner({
+var Checkbox = (0, import_react25.forwardRef)(function CheckboxInner({
   invalid = false,
   ...props
 }, ref) {
-  const ariaCheckboxProps = (0, import_react28.useMemo)(() => ({
+  const ariaCheckboxProps = (0, import_react25.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
+    isDisabled: props.disabled,
+    isReadOnly: props.readonly
   }), [invalid, props]);
   const state = (0, import_react_stately2.useToggleState)(ariaCheckboxProps);
-  const objectRef = (0, import_utils12.useObjectRef)(ref);
+  const objectRef = (0, import_utils11.useObjectRef)(ref);
   const {
     inputProps
   } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
-  const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
+  const isDisabled = props.disabled ?? 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 }),
@@ -1883,17 +1655,17 @@ var Checkbox = (0, import_react28.forwardRef)(function CheckboxInner({
     "children" in props && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InputLabel, { children: props.children })
   ] });
 });
-var Checkbox_default = (0, import_react28.memo)(Checkbox);
+var Checkbox_default = (0, import_react25.memo)(Checkbox);
 var hiddenCss = (0, import_styled_components22.css)(["visibility:hidden;"]);
 var InputRoot = import_styled_components22.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;}"]);
+})(["position:relative;display:flex;cursor:pointer;gap:4px;&:has(input[readonly]){cursor:default;}&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}"]);
 var CheckboxRoot = import_styled_components22.default.div.withConfig({
   componentId: "ccl__sc-wrdmwj-1"
 })(["position:relative;"]);
 var CheckboxInput = import_styled_components22.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_styled9.focusVisibleFocusRingCss);
+})(["&[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;}&[readonly]{cursor:default;opacity:0.32;}&: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_styled9.focusVisibleFocusRingCss);
 var CheckboxInputOverlay = import_styled_components22.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);", ";"], ({
@@ -1904,10 +1676,10 @@ var InputLabel = import_styled_components22.default.div.withConfig({
 })(["color:var(--charcoal-text2);font-size:14px;line-height:20px;"]);
 
 // src/components/TagItem/index.tsx
-var import_react29 = require("react");
-var import_utils13 = require("@react-aria/utils");
+var import_react26 = require("react");
+var import_utils12 = require("@react-aria/utils");
 var import_styled_components23 = __toESM(require("styled-components"));
-var import_utils14 = require("@charcoal-ui/utils");
+var import_utils13 = require("@charcoal-ui/utils");
 var import_button = require("@react-aria/button");
 var import_styled10 = require("@charcoal-ui/styled");
 var import_jsx_runtime28 = require("react/jsx-runtime");
@@ -1915,7 +1687,7 @@ var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react29.forwardRef)(function TagItemInner({
+var TagItem = (0, import_react26.forwardRef)(function TagItemInner({
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
@@ -1926,8 +1698,8 @@ var TagItem = (0, import_react29.forwardRef)(function TagItemInner({
   className,
   ...props
 }, _ref) {
-  const ref = (0, import_utils13.useObjectRef)(_ref);
-  const ariaButtonProps = (0, import_react29.useMemo)(() => ({
+  const ref = (0, import_utils12.useObjectRef)(_ref);
+  const ariaButtonProps = (0, import_react26.useMemo)(() => ({
     elementType: "a",
     isDisabled: disabled,
     ...props
@@ -1947,11 +1719,11 @@ var TagItem = (0, import_react29.forwardRef)(function TagItemInner({
     ] })
   ] });
 });
-var TagItem_default = (0, import_react29.memo)(TagItem);
+var TagItem_default = (0, import_react26.memo)(TagItem);
 var horizontalPadding = ({
   left,
   right
-}) => (0, import_styled_components23.css)(["padding-right:", ";padding-left:", ";"], (0, import_utils14.px)(right), (0, import_utils14.px)(left));
+}) => (0, import_styled_components23.css)(["padding-right:", ";padding-left:", ";"], (0, import_utils13.px)(right), (0, import_utils13.px)(left));
 var tagItemRootSize = (size) => {
   switch (size) {
     case "M":