@charcoal-ui/react 3.10.1 → 3.12.0

package/dist/index.esm.js

@@ -342,7 +342,7 @@ function RadioGroup({
 }
 
 // src/components/MultiSelect/index.tsx
-import { useCallback as useCallback2, useContext as useContext3, forwardRef as forwardRef6, memo as memo2 } from "react";
+import { useCallback as useCallback2, useContext as useContext3, forwardRef as forwardRef7, memo as memo2 } from "react";
 import styled5, { css as css3 } from "styled-components";
 import warning2 from "warning";
 import { px } from "@charcoal-ui/utils";
@@ -362,8 +362,25 @@ var MultiSelectGroupContext = createContext3({
 
 // src/components/MultiSelect/index.tsx
 import { focusVisibleFocusRingCss as focusVisibleFocusRingCss4 } from "@charcoal-ui/styled";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var MultiSelect = forwardRef6(function MultiSelectInner({
+
+// src/components/Icon/index.tsx
+import * as React4 from "react";
+import "@charcoal-ui/icons";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Icon = React4.forwardRef(function IconInner({
+  name,
+  scale,
+  unsafeNonGuidelineScale,
+  className,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx7("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+});
+var Icon_default = Icon;
+
+// src/components/MultiSelect/index.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var MultiSelect = forwardRef7(function MultiSelectInner({
   value,
   disabled = false,
   onChange,
@@ -400,13 +417,13 @@ var MultiSelect = forwardRef6(function MultiSelectInner({
     });
   }, [onChange, parentOnChange, value]);
   return /* @__PURE__ */ jsxs3(MultiSelectRoot, { "aria-disabled": isDisabled, className, children: [
-    /* @__PURE__ */ jsx7(MultiSelectInput, { ...{
+    /* @__PURE__ */ jsx8(MultiSelectInput, { ...{
       name,
       value,
       invalid
     }, checked: isSelected, disabled: isDisabled, onChange: handleChange, overlay: variant === "overlay", "aria-invalid": invalid, ref }),
-    /* @__PURE__ */ jsx7(MultiSelectInputOverlay, { overlay: variant === "overlay", invalid, "aria-hidden": true, children: /* @__PURE__ */ jsx7("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
-    Boolean(children) && /* @__PURE__ */ jsx7(MultiSelectLabel, { children })
+    /* @__PURE__ */ jsx8(MultiSelectInputOverlay, { overlay: variant === "overlay", invalid, "aria-hidden": true, children: /* @__PURE__ */ jsx8(Icon_default, { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
+    Boolean(children) && /* @__PURE__ */ jsx8(MultiSelectLabel, { children })
   ] });
 });
 var MultiSelect_default = memo2(MultiSelect);
@@ -459,25 +476,25 @@ function MultiSelectGroup({
       }
     }
   }, [onChange, selected]);
-  return /* @__PURE__ */ jsx7(MultiSelectGroupContext.Provider, { value: {
+  return /* @__PURE__ */ jsx8(MultiSelectGroupContext.Provider, { value: {
     name,
     selected: Array.from(new Set(selected)),
     disabled,
     readonly,
     invalid,
     onChange: handleChange
-  }, children: /* @__PURE__ */ jsx7("div", { className, "aria-label": label, "data-testid": "SelectGroup", children }) });
+  }, children: /* @__PURE__ */ jsx8("div", { className, "aria-label": label, "data-testid": "SelectGroup", children }) });
 }
 
 // src/components/Switch/index.tsx
 import { useSwitch } from "@react-aria/switch";
-import { useMemo, memo as memo3, forwardRef as forwardRef7 } from "react";
+import { useMemo, memo as memo3, forwardRef as forwardRef8 } from "react";
 import { useToggleState } from "react-stately";
 import styled6 from "styled-components";
 import { useObjectRef } from "@react-aria/utils";
 import { focusVisibleFocusRingCss as focusVisibleFocusRingCss5 } from "@charcoal-ui/styled";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var SwitchCheckbox = forwardRef7(function SwitchCheckboxInner(props, external) {
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var SwitchCheckbox = forwardRef8(function SwitchCheckboxInner(props, external) {
   const {
     disabled,
     className
@@ -498,8 +515,8 @@ var SwitchCheckbox = forwardRef7(function SwitchCheckboxInner(props, external) {
     }
   } = useSwitch(ariaSwitchProps, state, ref);
   return /* @__PURE__ */ jsxs4(Label, { className, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsx8(SwitchInput, { ...rest, ref }),
-    "children" in props ? /* @__PURE__ */ jsx8(LabelInner, { children: props.children }) : void 0
+    /* @__PURE__ */ jsx9(SwitchInput, { ...rest, ref }),
+    "children" in props ? /* @__PURE__ */ jsx9(LabelInner, { children: props.children }) : void 0
   ] });
 });
 var Switch_default = memo3(SwitchCheckbox);
@@ -519,14 +536,14 @@ var SwitchInput = styled6.input.attrs({
 import { useTextField } from "@react-aria/textfield";
 import { useVisuallyHidden } from "@react-aria/visually-hidden";
 import { useCallback as useCallback3, useEffect as useEffect2, useRef, useState } from "react";
-import * as React5 from "react";
+import * as React6 from "react";
 import styled8, { css as css4 } from "styled-components";
 
 // src/components/FieldLabel/index.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import styled7 from "styled-components";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var FieldLabel = React4.forwardRef(function FieldLabel2({
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var FieldLabel = React5.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -536,9 +553,9 @@ var FieldLabel = React4.forwardRef(function FieldLabel2({
   ...labelProps
 }, ref) {
   return /* @__PURE__ */ jsxs5(FieldLabelWrapper, { style, className, children: [
-    /* @__PURE__ */ jsx9(Label2, { ref, ...labelProps, children: label }),
-    required && /* @__PURE__ */ jsx9(RequiredText, { children: requiredText }),
-    /* @__PURE__ */ jsx9(SubLabelClickable, { children: /* @__PURE__ */ jsx9("span", { children: subLabel }) })
+    /* @__PURE__ */ jsx10(Label2, { ref, ...labelProps, children: label }),
+    required && /* @__PURE__ */ jsx10(RequiredText, { children: requiredText }),
+    /* @__PURE__ */ jsx10(SubLabelClickable, { children: /* @__PURE__ */ jsx10("span", { children: subLabel }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
@@ -576,8 +593,8 @@ function useFocusWithClick(containerRef, inputRef) {
 
 // src/components/TextField/index.tsx
 import { mergeProps } from "@react-aria/utils";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var TextField = React5.forwardRef(function SingleLineTextFieldInner({
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var TextField = React6.forwardRef(function SingleLineTextFieldInner({
   onChange,
   ...props
 }, forwardRef18) {
@@ -591,6 +608,7 @@ var TextField = React5.forwardRef(function SingleLineTextFieldInner({
     disabled = false,
     required,
     invalid = false,
+    readOnly = false,
     assistiveText,
     maxLength,
     prefix = null,
@@ -625,6 +643,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,
@@ -635,16 +654,16 @@ var TextField = React5.forwardRef(function SingleLineTextFieldInner({
   useFocusWithClick(containerRef, ariaRef);
   const inputProps = mergeProps(restProps, ariaInputProps);
   return /* @__PURE__ */ jsxs6(TextFieldRoot, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ jsx10(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsx11(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
     /* @__PURE__ */ jsxs6(StyledInputContainer, { ref: containerRef, invalid, "aria-disabled": disabled === true ? true : void 0, hasPrefix: prefix != null, hasSuffix: suffix != null || showCount, children: [
-      prefix && /* @__PURE__ */ jsx10(PrefixContainer, { children: prefix }),
-      /* @__PURE__ */ jsx10(StyledInput, { ref: mergeRefs(forwardRef18, ariaRef), invalid, ...inputProps }),
+      prefix && /* @__PURE__ */ jsx11(PrefixContainer, { children: prefix }),
+      /* @__PURE__ */ jsx11(StyledInput, { ref: mergeRefs(forwardRef18, ariaRef), invalid, ...inputProps }),
       (suffix || showCount) && /* @__PURE__ */ jsxs6(SuffixContainer, { children: [
         suffix,
-        showCount && /* @__PURE__ */ jsx10(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ jsx11(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx10(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx11(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
@@ -678,11 +697,11 @@ var AssistiveText = styled8.p.withConfig({
 // src/components/TextArea/index.tsx
 import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
-import { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 import styled9, { css as css5 } from "styled-components";
 import { mergeProps as mergeProps2 } from "@react-aria/utils";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var TextArea = forwardRef10(function TextAreaInner({
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var TextArea = forwardRef11(function TextAreaInner({
   onChange,
   ...props
 }, forwardRef18) {
@@ -696,6 +715,7 @@ var TextArea = forwardRef10(function TextAreaInner({
     disabled = false,
     required,
     invalid = false,
+    readOnly = false,
     assistiveText,
     maxLength,
     autoHeight = false,
@@ -740,6 +760,7 @@ var TextArea = forwardRef10(function TextAreaInner({
     inputElementType: "textarea",
     isDisabled: disabled,
     isRequired: required,
+    isReadOnly: readOnly,
     validationState: invalid ? "invalid" : "valid",
     description: !invalid && assistiveText,
     errorMessage: invalid && assistiveText,
@@ -755,12 +776,12 @@ var TextArea = forwardRef10(function TextAreaInner({
   useFocusWithClick(containerRef, ariaRef);
   const inputProps = mergeProps2(restProps, ariaInputProps);
   return /* @__PURE__ */ jsxs7(TextFieldRoot2, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ jsx11(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsx12(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
     /* @__PURE__ */ jsxs7(StyledTextareaContainer, { ref: containerRef, invalid, rows: showCount ? rows + 1 : rows, "aria-disabled": disabled === true ? "true" : void 0, children: [
-      /* @__PURE__ */ jsx11(StyledTextarea, { ref: mergeRefs(textareaRef, forwardRef18, ariaRef), rows, noBottomPadding: showCount, ...inputProps }),
-      showCount && /* @__PURE__ */ jsx11(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+      /* @__PURE__ */ jsx12(StyledTextarea, { ref: mergeRefs(textareaRef, forwardRef18, ariaRef), rows, noBottomPadding: showCount, ...inputProps }),
+      showCount && /* @__PURE__ */ jsx12(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx11(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx12(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
@@ -784,21 +805,6 @@ var MultiLineCounter = styled9.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
-import * as React6 from "react";
-import "@charcoal-ui/icons";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Icon = React6.forwardRef(function IconInner({
-  name,
-  scale,
-  unsafeNonGuidelineScale,
-  className,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx12("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
-});
-var Icon_default = Icon;
-
 // src/components/Modal/index.tsx
 import { useContext as useContext4, forwardRef as forwardRef13, memo as memo4 } from "react";
 import * as React10 from "react";
@@ -813,15 +819,7 @@ import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 import { forwardRef as forwardRef12 } from "react";
 import styled10, { css as css6 } from "styled-components";
 import { useDialog } from "@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
+import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from "@charcoal-ui/foundation";
 import { maxWidth } from "@charcoal-ui/utils";
 import { animated } from "react-spring";
 
@@ -879,7 +877,26 @@ var ModalBackgroundContext = React8.createContext(null);
 
 // src/components/Modal/useCustomModalOverlay.tsx
 import * as React9 from "react";
-import { ariaHideOutside, useOverlay, useOverlayFocusContain, usePreventScroll } from "@react-aria/overlays";
+import { ariaHideOutside, useOverlay, useOverlayFocusContain } from "@react-aria/overlays";
+
+// src/components/DropdownSelector/Popover/usePreventScroll.tsx
+import { useEffect as useEffect5 } from "react";
+function usePreventScroll(element, isOpen) {
+  useEffect5(() => {
+    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,
@@ -890,9 +907,7 @@ function useCharcoalModalOverlay(props, state, ref) {
     onClose: state.onClose,
     shouldCloseOnInteractOutside: () => false
   }, ref);
-  usePreventScroll({
-    isDisabled: !state.isOpen
-  });
+  usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen);
   useOverlayFocusContain();
   React9.useEffect(() => {
     if (state.isOpen && ref.current) {
@@ -1100,25 +1115,6 @@ import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import { useContext as useContext6, useRef as useRef6 } from "react";
 import { DismissButton, Overlay as Overlay2, usePopover } from "@react-aria/overlays";
 import styled14 from "styled-components";
-
-// src/components/DropdownSelector/Popover/usePreventScroll.tsx
-import { useEffect as useEffect6 } from "react";
-function usePreventScroll2(element, isOpen) {
-  useEffect6(() => {
-    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
 import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var _empty = () => null;
 function Popover(props) {
@@ -1139,7 +1135,7 @@ function Popover(props) {
     toggle: _empty
   });
   const modalBackground = useContext6(ModalBackgroundContext);
-  usePreventScroll2(modalBackground, props.isOpen);
+  usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
   return /* @__PURE__ */ jsxs9(Overlay2, { portalContainer: document.body, children: [
@@ -1483,232 +1479,7 @@ var StyledLi2 = styled19.li.withConfig({
 
 // src/components/SegmentedControl/index.tsx
 import { forwardRef as forwardRef15, memo as memo6, useMemo as useMemo4, useRef as useRef10 } from "react";
-
-// ../../node_modules/@react-stately/form/dist/import.mjs
-import { createContext as $jcIOw$createContext, useMemo as $jcIOw$useMemo, useContext as $jcIOw$useContext, useState as $jcIOw$useState, useRef as $jcIOw$useRef, useEffect as $jcIOw$useEffect } from "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, $jcIOw$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, $jcIOw$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, $jcIOw$useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
-  let serverErrorMessages = (0, $jcIOw$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, $jcIOw$useState)(serverErrors);
-  let [isServerErrorCleared, setServerErrorCleared] = (0, $jcIOw$useState)(false);
-  if (serverErrors !== lastServerErrors) {
-    setLastServerErrors(serverErrors);
-    setServerErrorCleared(false);
-  }
-  let serverError = (0, $jcIOw$useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
-  let nextValidation = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let [currentValidity, setCurrentValidity] = (0, $jcIOw$useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let lastError = (0, $jcIOw$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, $jcIOw$useState)(false);
-  (0, $jcIOw$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
-import { useState as $6imuh$useState, useRef as $6imuh$useRef, useEffect as $6imuh$useEffect, useCallback as $6imuh$useCallback } from "react";
-function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (0, $6imuh$useState)(value || defaultValue);
-  let isControlledRef = (0, $6imuh$useRef)(value !== void 0);
-  let isControlled = value !== void 0;
-  (0, $6imuh$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, $6imuh$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
-import { useMemo as $fQ2SF$useMemo, useState as $fQ2SF$useState } from "react";
-var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
-var $a54cdc5c1942b639$var$i = 0;
-function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
-  let name = (0, $fQ2SF$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, $fQ2SF$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
+import { useRadioGroupState } from "@react-stately/radio";
 import { useRadio, useRadioGroup } from "@react-aria/radio";
 import styled20, { css as css10 } from "styled-components";
 
@@ -1739,7 +1510,7 @@ var SegmentedControl = forwardRef15(function SegmentedControlInner(props, ref) {
     isRequired: props.required,
     "aria-label": props.name
   }), [props]);
-  const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(ariaRadioGroupProps);
+  const state = useRadioGroupState(ariaRadioGroupProps);
   const {
     radioGroupProps
   } = useRadioGroup(ariaRadioGroupProps, state);
@@ -1807,14 +1578,15 @@ var Checkbox = forwardRef16(function CheckboxInner({
     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 = useToggleState2(ariaCheckboxProps);
   const objectRef = useObjectRef3(ref);
   const {
     inputProps
   } = useCheckbox(ariaCheckboxProps, state, objectRef);
-  const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
+  const isDisabled = props.disabled ?? false;
   return /* @__PURE__ */ jsxs14(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
     /* @__PURE__ */ jsxs14(CheckboxRoot, { children: [
       /* @__PURE__ */ jsx27(CheckboxInput, { type: "checkbox", ...inputProps, readOnly: props.readonly }),
@@ -1827,13 +1599,13 @@ var Checkbox_default = memo7(Checkbox);
 var hiddenCss = css11(["visibility:hidden;"]);
 var InputRoot = styled21.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 = styled21.div.withConfig({
   componentId: "ccl__sc-wrdmwj-1"
 })(["position:relative;"]);
 var CheckboxInput = styled21.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);}}"], focusVisibleFocusRingCss7);
+})(["&[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);}}"], focusVisibleFocusRingCss7);
 var CheckboxInputOverlay = styled21.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);", ";"], ({