@charcoal-ui/react 3.6.0 → 3.8.0

package/dist/index.cjs.js

@@ -110,7 +110,6 @@ function CharcoalProvider({
 
 // src/components/Button/index.tsx
 var import_react2 = require("react");
-var import_styled_components3 = __toESM(require("styled-components"));
 
 // src/_lib/index.ts
 function unreachable(value) {
@@ -134,6 +133,45 @@ function countCodePointsInString(string) {
   return Array.from(string).length;
 }
 
+// src/components/Button/lib/variantToFont.tsx
+function variantToFont(variant) {
+  switch (variant) {
+    case "Overlay":
+      return "text5";
+    case "Default":
+      return "text2";
+    case "Primary":
+      return "text5";
+    case "Navigation":
+      return "text5";
+    case "Danger":
+      return "text5";
+    default:
+      return unreachable(variant);
+  }
+}
+
+// src/components/Button/lib/variantToBackground.tsx
+function variantToBackground(variant) {
+  switch (variant) {
+    case "Overlay":
+      return "surface4";
+    case "Default":
+      return "surface3";
+    case "Primary":
+      return "brand";
+    case "Navigation":
+      return "surface6";
+    case "Danger":
+      return "assertive";
+    default:
+      return unreachable(variant);
+  }
+}
+
+// src/components/Button/StyledButton.tsx
+var import_styled_components3 = __toESM(require("styled-components"));
+
 // src/components/Clickable/index.tsx
 var React2 = __toESM(require("react"));
 var import_styled_components2 = __toESM(require("styled-components"));
@@ -204,31 +242,8 @@ var StyledClickableDiv = import_styled_components2.default.div`
   }
 `;
 
-// src/components/Button/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Button = (0, import_react2.forwardRef)(function Button2({
-  children,
-  variant = "Default",
-  size = "M",
-  fullWidth: fixed = false,
-  disabled = false,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    StyledButton,
-    {
-      ...rest,
-      disabled,
-      $background: variantToBackground(variant),
-      $color: variantToFont(variant),
-      $size: size,
-      $fullWidth: fixed,
-      ref,
-      children
-    }
-  );
-});
-var Button_default = Button;
+// src/components/Button/StyledButton.tsx
+var import_styled2 = require("@charcoal-ui/styled");
 var horizontalPaddingSmall = import_styled_components3.css`
   padding-right: 16px;
   padding-left: 16px;
@@ -251,79 +266,89 @@ var StyledButton = (0, import_styled_components3.default)(Clickable_default)`
   font-weight: bold;
 
   ${(p) => p.$size === "M" ? horizontalPaddingMedium : horizontalPaddingSmall}
-
   color: var(--charcoal-${(p) => p.$color});
   background-color: var(--charcoal-${(p) => p.$background});
   transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:active,
-    &:focus,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
-
-    &:hover {
-      color: var(--charcoal-${(p) => p.$color}-hover);
-      background-color: var(--charcoal-${(p) => p.$background}-hover);
-    }
-    &:active {
-      color: var(--charcoal-${(p) => p.$color}-press);
-      background-color: var(--charcoal-${(p) => p.$background}-press);
-    }
+    ${import_styled2.focusVisibleFocusRingCss}
+
+    ${({ $isActive: $active, $color, $background }) => $active ? import_styled_components3.css`
+            color: var(--charcoal-${$color}-press);
+            background-color: var(--charcoal-${$background}-press);
+          ` : import_styled_components3.css`
+            &:hover {
+              color: var(--charcoal-${$color}-hover);
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              color: var(--charcoal-${$color}-press);
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
   }
 
   &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
     opacity: 0.32;
   }
-
-  /* よく考えたらheight=32って定義が存在しないな... */
   height: ${(p) => p.$size === "M" ? 40 : 32}px;
 `;
-function variantToBackground(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "surface4";
-    case "Default":
-      return "surface3";
-    case "Primary":
-      return "brand";
-    case "Navigation":
-      return "surface6";
-    case "Danger":
-      return "assertive";
-    default:
-      return unreachable(variant);
-  }
-}
-function variantToFont(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "text5";
-    case "Default":
-      return "text2";
-    case "Primary":
-      return "text5";
-    case "Navigation":
-      return "text5";
-    case "Danger":
-      return "text5";
-    default:
-      return unreachable(variant);
-  }
-}
+
+// src/components/Button/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Button = (0, import_react2.forwardRef)(function Button2({
+  children,
+  variant = "Default",
+  size = "M",
+  fullWidth: fixed = false,
+  disabled = false,
+  isActive = false,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    StyledButton,
+    {
+      ...rest,
+      disabled,
+      $background: variantToBackground(variant),
+      $color: variantToFont(variant),
+      $size: size,
+      $fullWidth: fixed,
+      $isActive: isActive,
+      ref,
+      children
+    }
+  );
+});
+var Button_default = Button;
 
 // src/components/IconButton/index.tsx
 var import_react3 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
+var import_styled3 = require("@charcoal-ui/styled");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var IconButton = (0, import_react3.forwardRef)(
-  function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
+  function IconButtonInner({
+    variant = "Default",
+    size = "M",
+    icon,
+    isActive = false,
+    ...rest
+  }, ref) {
     validateIconSize(size, icon);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      StyledIconButton,
+      {
+        ...rest,
+        ref,
+        $size: size,
+        $variant: variant,
+        $isActive: isActive,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon })
+      }
+    );
   }
 );
 var IconButton_default = IconButton;
@@ -342,22 +367,17 @@ var StyledIconButton = (0, import_styled_components4.default)(Clickable_default)
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:hover {
-      background-color: var(
-        ${({ $background }) => `--charcoal-${$background}-hover`}
-      );
-    }
-    &:active {
-      background-color: var(
-        ${({ $background }) => `--charcoal-${$background}-press`}
-      );
-    }
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${({ $isActive, $background }) => $isActive ? import_styled_components4.css`
+            background-color: var(--charcoal-${$background}-press);
+          ` : import_styled_components4.css`
+            &:hover {
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
+    ${import_styled3.focusVisibleFocusRingCss}
   }
 
   &:disabled,
@@ -426,6 +446,7 @@ var import_react4 = require("react");
 var React3 = __toESM(require("react"));
 var import_styled_components5 = __toESM(require("styled-components"));
 var import_warning = __toESM(require("warning"));
+var import_styled4 = require("@charcoal-ui/styled");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Radio = (0, import_react4.forwardRef)(function RadioInner({ value, disabled = false, children, className }, ref) {
   const {
@@ -456,7 +477,7 @@ var Radio = (0, import_react4.forwardRef)(function RadioInner({ value, disabled
         name,
         value,
         checked: isSelected,
-        invalid,
+        "aria-invalid": invalid,
         onChange: handleChange,
         disabled: isDisabled || isReadonly,
         ref
@@ -497,21 +518,18 @@ var RadioInput = import_styled_components5.default.input.attrs({ type: "radio" }
 
     &:not(:disabled):not([aria-disabled]),
     &[aria-disabled='false'] {
-      ${({ invalid = false }) => invalid && import_styled_components5.css`
-          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-        `}
-
       &:hover {
         background-color: var(--charcoal-surface1-hover);
       }
       &:active {
         background-color: var(--charcoal-surface1-press);
       }
-      &:focus,
-      &:active,
-      &:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+      ${import_styled4.focusVisibleFocusRingCss}
+      &[aria-invalid='true'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        &:focus {
+          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        }
       }
     }
 
@@ -655,6 +673,7 @@ var MultiSelectGroupContext = (0, import_react5.createContext)({
 });
 
 // src/components/MultiSelect/index.tsx
+var import_styled5 = require("@charcoal-ui/styled");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var MultiSelect = (0, import_react6.forwardRef)(
   function MultiSelectInner({
@@ -799,6 +818,8 @@ var MultiSelectInput = import_styled_components6.default.input.attrs({ type: "ch
       }
     }
 
+    ${import_styled5.focusVisibleFocusRingCss}
+
     ${({ invalid, overlay }) => invalid && !overlay && import_styled_components6.css`
         &:not(:disabled):not([aria-disabled]),
         &[aria-disabled='false'] {
@@ -884,6 +905,7 @@ var import_react7 = require("react");
 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 SwitchCheckbox = (0, import_react7.forwardRef)(
   function SwitchCheckboxInner(props, external) {
@@ -921,10 +943,6 @@ var Label = import_styled_components7.default.label`
     opacity: 0.32;
     cursor: default;
   }
-
-  :active > input {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
 `;
 var LabelInner = import_styled_components7.default.div`
   font-size: 14px;
@@ -955,9 +973,7 @@ var SwitchInput = import_styled_components7.default.input.attrs({ type: "checkbo
   :active {
     background-color: var(--charcoal-text4-press);
   }
-  :focus {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+  ${import_styled6.focusVisibleFocusRingCss}
 
   &::after {
     content: '';
@@ -1268,13 +1284,6 @@ var StyledInputContainer = import_styled_components9.default.div`
     background-color: var(--charcoal-surface3-hover);
   }
 
-  :not(:disabled):not([aria-disabled]):active,
-  [aria-disabled='false']:active {
-    outline: none;
-    box-shadow: 0 0 0 4px
-      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
-  }
-
   :focus-within {
     outline: none;
     box-shadow: 0 0 0 4px
@@ -1554,7 +1563,7 @@ var React9 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 var import_styled_components12 = __toESM(require("styled-components"));
 var import_utils5 = require("@charcoal-ui/utils");
-var import_styled2 = require("@charcoal-ui/styled");
+var import_styled7 = require("@charcoal-ui/styled");
 var import_react_spring2 = require("react-spring");
 var import_utils6 = require("@react-aria/utils");
 
@@ -1692,7 +1701,7 @@ var Modal = (0, import_react12.forwardRef)(function ModalInner({ children, zInde
     ref
   );
   const theme = (0, import_styled_components12.useTheme)();
-  const isMobile = (0, import_styled2.useMedia)((0, import_utils5.maxWidth)(theme.breakpoint.screen1)) ?? false;
+  const isMobile = (0, import_styled7.useMedia)((0, import_utils5.maxWidth)(theme.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const showDismiss = !isMobile || bottomSheet !== true;
   const transition = (0, import_react_spring2.useTransition)(isOpen, {
@@ -2156,6 +2165,7 @@ var StyledUl = import_styled_components16.default.ul`
 `;
 
 // src/components/DropdownSelector/index.tsx
+var import_styled8 = require("@charcoal-ui/styled");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector(props) {
@@ -2184,6 +2194,7 @@ function DropdownSelector(props) {
         },
         ref: triggerRef,
         type: "button",
+        $active: isOpen,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonIcon, { name: "16/Menu" })
@@ -2236,6 +2247,7 @@ var DropdownButton = import_styled_components17.default.button`
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
 
   ${import_utils8.disabledSelector} {
     cursor: default;
@@ -2246,16 +2258,21 @@ var DropdownButton = import_styled_components17.default.button`
   background-color: var(--charcoal-surface3);
   border-radius: 4px;
 
-  transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow, 0.2s background-color;
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${import_styled8.focusVisibleFocusRingCss}
+    ${({ $active }) => $active === true ? import_styled_components17.css`
+            background-color: var(--charcoal-surface3-press);
+          ` : import_styled_components17.css`
+            &:hover {
+              background-color: var(--charcoal-surface3-hover);
+            }
+            &:active {
+              background-color: var(--charcoal-surface3-press);
+            }
+          `}
   }
 
   ${({ invalid }) => invalid === true && import_styled_components17.css`
@@ -2271,20 +2288,9 @@ var DropdownButtonText = import_styled_components17.default.span`
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 var DropdownButtonIcon = (0, import_styled_components17.default)(Icon_default)`
   color: var(--charcoal-text2);
@@ -2452,20 +2458,7 @@ var StyledSpan = import_styled_components19.default.span`
   font-size: 14px;
   line-height: 22px;
   color: var(--charcoal-text2);
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+  padding: 9px 0;
 
   display: flex;
   align-items: center;
@@ -2505,15 +2498,248 @@ var StyledLi2 = import_styled_components20.default.li`
 `;
 
 // 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");
-var import_react_stately2 = require("react-stately");
-var import_radio = require("@react-aria/radio");
+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_radio2 = require("@react-aria/radio");
 var import_styled_components21 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react23 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioContext = (0, import_react23.createContext)(null);
+var RadioContext = (0, import_react26.createContext)(null);
 var RadioProvider = ({
   value,
   children
@@ -2521,7 +2747,7 @@ var RadioProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react23.useContext)(RadioContext);
+  const state = (0, import_react26.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
@@ -2529,9 +2755,9 @@ var useRadioContext = () => {
 
 // src/components/SegmentedControl/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react24.forwardRef)(
+var SegmentedControl = (0, import_react27.forwardRef)(
   function SegmentedControlInner(props, ref) {
-    const ariaRadioGroupProps = (0, import_react24.useMemo)(
+    const ariaRadioGroupProps = (0, import_react27.useMemo)(
       () => ({
         ...props,
         isDisabled: props.disabled,
@@ -2541,9 +2767,9 @@ var SegmentedControl = (0, import_react24.forwardRef)(
       }),
       [props]
     );
-    const state = (0, import_react_stately2.useRadioGroupState)(ariaRadioGroupProps);
-    const { radioGroupProps } = (0, import_radio.useRadioGroup)(ariaRadioGroupProps, state);
-    const segmentedControlItems = (0, import_react24.useMemo)(() => {
+    const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(ariaRadioGroupProps);
+    const { radioGroupProps } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
+    const segmentedControlItems = (0, import_react27.useMemo)(() => {
       return props.data.map(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
@@ -2567,11 +2793,11 @@ var SegmentedControl = (0, import_react24.forwardRef)(
     );
   }
 );
-var SegmentedControl_default = (0, import_react24.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react27.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react24.useRef)(null);
-  const ariaRadioProps = (0, import_react24.useMemo)(
+  const ref = (0, import_react27.useRef)(null);
+  const ariaRadioProps = (0, import_react27.useMemo)(
     () => ({
       value: props.value,
       isDisabled: props.disabled,
@@ -2579,7 +2805,7 @@ var Segmented = (props) => {
     }),
     [props]
   );
-  const { inputProps, isDisabled, isSelected } = (0, import_radio.useRadio)(
+  const { inputProps, isDisabled, isSelected } = (0, import_radio2.useRadio)(
     ariaRadioProps,
     state,
     ref
@@ -2667,16 +2893,17 @@ var SegmentedLabelInner = import_styled_components21.default.div`
 `;
 
 // src/components/Checkbox/index.tsx
-var import_react25 = require("react");
+var import_react28 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
-var import_utils9 = require("@react-aria/utils");
-var import_react_stately3 = require("react-stately");
-var import_utils10 = require("@charcoal-ui/utils");
+var import_utils10 = require("@react-aria/utils");
+var import_react_stately2 = require("react-stately");
+var import_utils11 = require("@charcoal-ui/utils");
+var import_styled9 = require("@charcoal-ui/styled");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Checkbox = (0, import_react25.forwardRef)(
+var Checkbox = (0, import_react28.forwardRef)(
   function CheckboxInner({ invalid = false, ...props }, ref) {
-    const ariaCheckboxProps = (0, import_react25.useMemo)(
+    const ariaCheckboxProps = (0, import_react28.useMemo)(
       () => ({
         ...props,
         isInValid: invalid,
@@ -2688,8 +2915,8 @@ var Checkbox = (0, import_react25.forwardRef)(
       }),
       [invalid, props]
     );
-    const state = (0, import_react_stately3.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils9.useObjectRef)(ref);
+    const state = (0, import_react_stately2.useToggleState)(ariaCheckboxProps);
+    const objectRef = (0, import_utils10.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: [
@@ -2701,7 +2928,7 @@ var Checkbox = (0, import_react25.forwardRef)(
     ] });
   }
 );
-var Checkbox_default = (0, import_react25.memo)(Checkbox);
+var Checkbox_default = (0, import_react28.memo)(Checkbox);
 var hiddenCss = import_styled_components22.css`
   visibility: hidden;
 `;
@@ -2710,7 +2937,7 @@ var InputRoot = import_styled_components22.default.label`
   display: flex;
 
   cursor: pointer;
-  ${import_utils10.disabledSelector} {
+  ${import_utils11.disabledSelector} {
     cursor: default;
   }
 
@@ -2750,18 +2977,7 @@ var CheckboxInput = import_styled_components22.default.input`
 
     &:not(:disabled):not([aria-disabled]),
     &[aria-disabled='false'] {
-      &:focus,
-      &:active {
-        outline: none;
-        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-        &:not(:focus-visible) {
-          outline: none;
-        }
-      }
-      &:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-      }
+      ${import_styled9.focusVisibleFocusRingCss}
       &[aria-invalid='true'] {
         box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
       }
@@ -2796,17 +3012,18 @@ var InputLabel = import_styled_components22.default.div`
 `;
 
 // src/components/TagItem/index.tsx
-var import_react26 = require("react");
-var import_utils11 = require("@react-aria/utils");
+var import_react29 = require("react");
+var import_utils12 = require("@react-aria/utils");
 var import_styled_components23 = __toESM(require("styled-components"));
-var import_utils12 = 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");
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react26.forwardRef)(
+var TagItem = (0, import_react29.forwardRef)(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2818,8 +3035,8 @@ var TagItem = (0, import_react26.forwardRef)(
     className,
     ...props
   }, _ref) {
-    const ref = (0, import_utils11.useObjectRef)(_ref);
-    const ariaButtonProps = (0, import_react26.useMemo)(
+    const ref = (0, import_utils12.useObjectRef)(_ref);
+    const ariaButtonProps = (0, import_react29.useMemo)(
       () => ({
         elementType: "a",
         isDisabled: disabled,
@@ -2851,10 +3068,10 @@ var TagItem = (0, import_react26.forwardRef)(
     );
   }
 );
-var TagItem_default = (0, import_react26.memo)(TagItem);
+var TagItem_default = (0, import_react29.memo)(TagItem);
 var horizontalPadding = ({ left, right }) => import_styled_components23.css`
-  padding-right: ${(0, import_utils12.px)(right)};
-  padding-left: ${(0, import_utils12.px)(left)};
+  padding-right: ${(0, import_utils13.px)(right)};
+  padding-left: ${(0, import_utils13.px)(left)};
 `;
 var tagItemRootSize = (size) => {
   switch (size) {
@@ -2884,12 +3101,7 @@ var TagItemRoot = import_styled_components23.default.a`
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${import_styled10.focusVisibleFocusRingCss}
   }
 
   &:disabled,