@charcoal-ui/react 3.3.0-beta.0 → 3.4.0

package/dist/index.cjs.js

@@ -147,33 +147,33 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var Clickable = React2.forwardRef(
   function Clickable2(props, ref) {
     const { Link } = useComponentAbstraction();
-    if ("to" in props) {
-      const { onClick, disabled = false, ...rest } = props;
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        A,
-        {
-          ...rest,
-          as: disabled ? void 0 : Link,
-          onClick: disabled ? void 0 : onClick,
-          "aria-disabled": disabled,
-          ref
-        }
-      );
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...props, ref });
+    const isLink = "to" in props;
+    const as = isLink ? Link : "button";
+    const ariaDisabled = isLink && props.disabled === true ? true : void 0;
+    let rest = props;
+    if (isLink) {
+      const { disabled, ..._rest } = props;
+      rest = _rest;
     }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      StyledClickableDiv,
+      {
+        ...rest,
+        ref,
+        as,
+        "aria-disabled": ariaDisabled
+      }
+    );
   }
 );
 var Clickable_default = Clickable;
-var clickableCss = import_styled_components3.css`
-  /* Clickable style */
+var StyledClickableDiv = import_styled_components3.default.div`
   cursor: pointer;
 
   ${import_utils.disabledSelector} {
     cursor: default;
   }
-`;
-var Button = import_styled_components3.default.button`
+
   /* Reset button appearance */
   appearance: none;
   background: transparent;
@@ -206,27 +206,11 @@ var Button = import_styled_components3.default.button`
     border-style: none;
     padding: 0;
   }
-
-  ${clickableCss}
-`;
-var A = import_styled_components3.default.span`
-  /* Reset a-tag appearance */
-  color: inherit;
-
-  &:focus {
-    outline: none;
-  }
-
-  .text {
-    top: calc(1em + 2em);
-  }
-
-  ${clickableCss}
 `;
 
 // src/components/Button/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Button2 = (0, import_react2.forwardRef)(function Button3({
+var Button = (0, import_react2.forwardRef)(function Button2({
   children,
   variant = "Default",
   size = "M",
@@ -247,7 +231,7 @@ var Button2 = (0, import_react2.forwardRef)(function Button3({
     }
   );
 });
-var Button_default = Button2;
+var Button_default = Button;
 var StyledButton = (0, import_styled_components4.default)(Clickable_default)`
   width: ${(p) => p.$fullWidth ? "stretch" : "min-content"};
   display: inline-grid;
@@ -922,7 +906,7 @@ var FieldLabelWrapper = import_styled_components9.default.div`
 // src/components/TextField/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var TextField = React5.forwardRef(
-  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef17) {
+  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef18) {
     const {
       className,
       showLabel = false,
@@ -1012,7 +996,7 @@ var TextField = React5.forwardRef(
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           StyledInput,
           {
-            ref: mergeRefs(forwardRef17, ariaRef),
+            ref: mergeRefs(forwardRef18, ariaRef),
             invalid,
             extraLeftPadding: prefixWidth,
             extraRightPadding: suffixWidth,
@@ -1121,7 +1105,7 @@ var import_react9 = require("react");
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var TextArea = (0, import_react9.forwardRef)(
-  function TextAreaInner({ onChange, ...props }, forwardRef17) {
+  function TextAreaInner({ onChange, ...props }, forwardRef18) {
     const {
       className,
       showCount = false,
@@ -1211,7 +1195,7 @@ var TextArea = (0, import_react9.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               StyledTextarea,
               {
-                ref: mergeRefs(textareaRef, forwardRef17, ariaRef),
+                ref: mergeRefs(textareaRef, forwardRef18, ariaRef),
                 rows,
                 noBottomPadding: showCount,
                 ...inputProps
@@ -1335,11 +1319,18 @@ var Icon = React6.forwardRef(function IconInner({ name, scale, unsafeNonGuidelin
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-var import_react10 = require("react");
-var React7 = __toESM(require("react"));
+var import_react11 = require("react");
+var React9 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
+var import_styled_components13 = __toESM(require("styled-components"));
+var import_utils7 = require("@charcoal-ui/utils");
+var import_styled12 = require("@charcoal-ui/styled");
+var import_react_spring2 = require("react-spring");
+var import_utils8 = require("@react-aria/utils");
+
+// src/components/Modal/Dialog/index.tsx
+var import_react10 = require("react");
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_focus = require("@react-aria/focus");
 var import_dialog = require("@react-aria/dialog");
 
 // ../foundation/src/grid.ts
@@ -1349,14 +1340,100 @@ function columnSystem(span, column, gutter) {
   return span * column + (span - 1) * gutter;
 }
 
-// src/components/Modal/index.tsx
+// src/components/Modal/Dialog/index.tsx
 var import_utils6 = require("@charcoal-ui/utils");
-var import_styled12 = require("@charcoal-ui/styled");
 var import_react_spring = require("react-spring");
-var import_utils7 = require("@react-aria/utils");
+
+// src/_lib/useForwardedRef.tsx
+var React7 = __toESM(require("react"));
+function useForwardedRef(ref) {
+  const innerRef = React7.useRef(null);
+  React7.useEffect(() => {
+    if (!ref)
+      return;
+    if (typeof ref === "function") {
+      ref(innerRef.current);
+    } else {
+      ref.current = innerRef.current;
+    }
+  });
+  return innerRef;
+}
+
+// src/components/Modal/Dialog/index.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
+var Dialog = (0, import_react10.forwardRef)(function Dialog2(props, forwardRef18) {
+  const ref = useForwardedRef(forwardRef18);
+  const { dialogProps } = (0, import_dialog.useDialog)(
+    {
+      role: "dialog"
+    },
+    ref
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    AnimatedStyledDialogDiv,
+    {
+      ...props,
+      role: dialogProps.role,
+      tabIndex: dialogProps.tabIndex,
+      "aria-labelledby": dialogProps["aria-labelledby"],
+      onBlur: dialogProps.onBlur,
+      ref
+    }
+  );
+});
+var AnimatedStyledDialogDiv = (0, import_react_spring.animated)(import_styled_components12.default.div`
+  margin: auto;
+  position: relative;
+  height: fit-content;
+  width: ${(p) => {
+  switch (p.size) {
+    case "S": {
+      return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    case "M": {
+      return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    case "L": {
+      return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    default: {
+      return unreachable(p.size);
+    }
+  }
+}}px;
+
+  background-color: ${({ theme: theme3 }) => theme3.color.background1};
+  border-radius: 24px;
+
+  @media ${({ theme: theme3 }) => (0, import_utils6.maxWidth)(theme3.breakpoint.screen1)} {
+    max-width: 440px;
+    width: calc(100% - 48px);
+    ${(p) => p.bottomSheet !== false && import_styled_components12.css`
+        max-width: unset;
+        width: 100%;
+        border-radius: 0;
+        margin: auto 0 0 0;
+        ${p.bottomSheet === "full" && import_styled_components12.css`
+          min-height: 100%;
+        `}
+      `}
+  }
+  :focus {
+    outline: none;
+  }
+`);
+
+// src/components/Modal/ModalBackgroundContext.tsx
+var React8 = __toESM(require("react"));
+var ModalBackgroundContext = React8.createContext(
+  null
+);
+
+// src/components/Modal/index.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react10.forwardRef)(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
+var Modal = (0, import_react11.forwardRef)(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
   const {
     title,
     size = "M",
@@ -1366,9 +1443,8 @@ var Modal = (0, import_react10.forwardRef)(function ModalInner({ children, zInde
     className,
     isOpen = false
   } = props;
-  const ref = (0, import_utils7.useObjectRef)(external);
-  const { overlayProps, underlayProps } = (0, import_overlays2.useOverlay)(props, ref);
-  const { modalProps } = (0, import_overlays2.useModalOverlay)(
+  const ref = (0, import_utils8.useObjectRef)(external);
+  const { modalProps, underlayProps } = (0, import_overlays2.useModalOverlay)(
     props,
     {
       close: onClose,
@@ -1382,51 +1458,62 @@ var Modal = (0, import_react10.forwardRef)(function ModalInner({ children, zInde
     },
     ref
   );
-  const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
-  const theme3 = (0, import_styled_components12.useTheme)();
-  const isMobile = (0, import_styled12.useMedia)((0, import_utils6.maxWidth)(theme3.breakpoint.screen1)) ?? false;
+  const theme3 = (0, import_styled_components13.useTheme)();
+  const isMobile = (0, import_styled12.useMedia)((0, import_utils7.maxWidth)(theme3.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
-  const transition = (0, import_react_spring.useTransition)(isOpen, {
+  const showDismiss = !isMobile || bottomSheet !== true;
+  const transition = (0, import_react_spring2.useTransition)(isOpen, {
     from: {
       transform: "translateY(100%)",
-      backgroundColor: "rgba(0, 0, 0, 0)"
+      backgroundColor: "rgba(0, 0, 0, 0)",
+      overflow: "hidden"
     },
     enter: {
       transform: "translateY(0%)",
       backgroundColor: "rgba(0, 0, 0, 0.4)"
     },
+    update: {
+      overflow: "auto"
+    },
     leave: {
       transform: "translateY(100%)",
-      backgroundColor: "rgba(0, 0, 0, 0)"
+      backgroundColor: "rgba(0, 0, 0, 0)",
+      overflow: "hidden"
     },
-    config: transitionEnabled ? { duration: 400, easing: import_react_spring.easings.easeOutQuart } : { duration: 0 }
+    config: transitionEnabled ? { duration: 400, easing: import_react_spring2.easings.easeOutQuart } : { duration: 0 }
   });
-  const showDismiss = !isMobile || bottomSheet !== true;
+  const bgRef = React9.useRef(null);
   return transition(
-    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_overlays2.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    ({ backgroundColor, overflow, transform }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_overlays2.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ModalBackground,
       {
+        ref: bgRef,
         zIndex,
         ...underlayProps,
-        style: transitionEnabled ? { backgroundColor } : {},
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogContainer, { bottomSheet, size, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          ModalDialog,
+        style: transitionEnabled ? { backgroundColor, overflow } : {},
+        $bottomSheet: bottomSheet,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Dialog,
           {
             ref,
-            ...overlayProps,
             ...modalProps,
-            ...dialogProps,
             style: transitionEnabled ? { transform } : {},
             size,
             bottomSheet,
             className,
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               ModalContext.Provider,
               {
-                value: { titleProps, title, close: onClose, showDismiss },
+                value: {
+                  titleProps: {},
+                  title,
+                  close: onClose,
+                  showDismiss,
+                  bottomSheet
+                },
                 children: [
                   children,
-                  isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                     ModalCrossButton,
                     {
                       size: "S",
@@ -1438,78 +1525,42 @@ var Modal = (0, import_react10.forwardRef)(function ModalInner({ children, zInde
               }
             )
           }
-        ) }) })
+        ) })
       }
     ) })
   );
 });
-var Modal_default = (0, import_react10.memo)(Modal);
-var ModalContext = React7.createContext({
+var Modal_default = (0, import_react11.memo)(Modal);
+var ModalContext = React9.createContext({
   titleProps: {},
   title: "",
   close: void 0,
-  showDismiss: true
+  showDismiss: true,
+  bottomSheet: false
 });
-var ModalBackground = (0, import_react_spring.animated)(import_styled_components12.default.div`
+var ModalBackground = (0, import_react_spring2.animated)(import_styled_components13.default.div`
   z-index: ${({ zIndex }) => zIndex};
   overflow: auto;
   display: flex;
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
+  width: -webkit-fill-available;
+  width: -moz-available;
   height: 100%;
+  justify-content: center;
+  padding: 40px 0;
+  box-sizing: border-box;
 
-  ${theme((o) => [o.bg.surface4])}
-`);
-var DialogContainer = import_styled_components12.default.div`
-  position: relative;
-  margin: auto;
-  padding: 24px 0;
-  width: ${(p) => {
-  switch (p.size) {
-    case "S": {
-      return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
-    }
-    case "M": {
-      return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
-    }
-    case "L": {
-      return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
-    }
-    default: {
-      return unreachable(p.size);
-    }
-  }
-}}px;
+  background-color: ${({ theme: theme3 }) => theme3.color.surface4};
 
-  @media ${({ theme: theme3 }) => (0, import_utils6.maxWidth)(theme3.breakpoint.screen1)} {
-    width: calc(100% - 48px);
-    ${(p) => p.bottomSheet !== false && import_styled_components12.css`
-        margin: 0;
+  @media ${({ theme: theme3 }) => (0, import_utils7.maxWidth)(theme3.breakpoint.screen1)} {
+    ${(p) => p.$bottomSheet !== false && import_styled_components13.css`
         padding: 0;
-        bottom: 0;
-        position: absolute;
-        width: 100%;
-        ${p.bottomSheet === "full" ? "height: 100%" : ""};
-      `}
-  }
-`;
-var ModalDialog = (0, import_react_spring.animated)(import_styled_components12.default.div`
-  position: relative;
-  margin: auto;
-
-  ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-  @media ${({ theme: theme3 }) => (0, import_utils6.maxWidth)(theme3.breakpoint.screen1)} {
-    ${(p) => p.bottomSheet !== false && import_styled_components12.css`
-        border-radius: 0;
-        ${p.bottomSheet === "full" && import_styled_components12.css`
-          height: 100%;
-        `}
       `}
   }
 `);
-var ModalCrossButton = (0, import_styled_components12.default)(IconButton_default)`
+var ModalCrossButton = (0, import_styled_components13.default)(IconButton_default)`
   position: absolute;
   top: 8px;
   right: 8px;
@@ -1517,37 +1568,45 @@ var ModalCrossButton = (0, import_styled_components12.default)(IconButton_defaul
   ${theme((o) => [o.font.text3.hover.press])}
 `;
 function ModalTitle(props) {
-  const { titleProps, title } = (0, import_react10.useContext)(ModalContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
+  const { titleProps, title } = (0, import_react11.useContext)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
 }
-var ModalHeading = import_styled_components12.default.h3`
+var ModalHeading = import_styled_components13.default.h3`
   margin: 0;
   font-weight: inherit;
   font-size: inherit;
 `;
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_styled_components13 = __toESM(require("styled-components"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_styled_components14 = __toESM(require("styled-components"));
+var import_react12 = require("react");
+var import_utils9 = require("@charcoal-ui/utils");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ModalHeader() {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalHeaderRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledModalTitle, {}) });
+  const modalCtx = (0, import_react12.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`
+var ModalHeaderRoot = import_styled_components14.default.div`
   height: 64px;
   display: grid;
   align-content: center;
   justify-content: center;
+  @media ${({ theme: theme3 }) => (0, import_utils9.maxWidth)(theme3.breakpoint.screen1)} {
+    ${(p) => p.$bottomSheet !== false && import_styled_components14.css`
+        height: 48px;
+      `}
+  }
 `;
-var StyledModalTitle = (0, import_styled_components13.default)(ModalTitle)`
+var StyledModalTitle = (0, import_styled_components14.default)(ModalTitle)`
   ${theme((o) => [o.font.text1, o.typography(16).bold])}
 `;
-var ModalAlign = import_styled_components13.default.div`
+var ModalAlign = import_styled_components14.default.div`
   ${theme((o) => [o.padding.horizontal(16)])}
 `;
-var ModalBody = import_styled_components13.default.div`
+var ModalBody = import_styled_components14.default.div`
   ${theme((o) => [o.padding.bottom(40)])}
 `;
-var ModalButtons = import_styled_components13.default.div`
+var ModalButtons = import_styled_components14.default.div`
   display: grid;
   grid-auto-flow: row;
   grid-row-gap: 8px;
@@ -1556,12 +1615,12 @@ var ModalButtons = import_styled_components13.default.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-var import_react11 = require("react");
-var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react11.forwardRef)(
+var import_react13 = require("react");
+var import_styled_components15 = __toESM(require("styled-components"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var LoadingSpinner = (0, import_react13.forwardRef)(
   function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, className }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       LoadingSpinnerRoot,
       {
         size,
@@ -1569,13 +1628,13 @@ var LoadingSpinner = (0, import_react11.forwardRef)(
         transparent,
         className,
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LoadingSpinnerIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoadingSpinnerIcon, {})
       }
     );
   }
 );
-var LoadingSpinner_default = (0, import_react11.memo)(LoadingSpinner);
-var LoadingSpinnerRoot = import_styled_components14.default.div.attrs({ role: "progressbar" })`
+var LoadingSpinner_default = (0, import_react13.memo)(LoadingSpinner);
+var LoadingSpinnerRoot = import_styled_components15.default.div.attrs({ role: "progressbar" })`
   box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
@@ -1589,7 +1648,7 @@ var LoadingSpinnerRoot = import_styled_components14.default.div.attrs({ role: "p
   transparent ? o.bg.transparent : o.bg.background1
 ])}
 `;
-var scaleOut = import_styled_components14.keyframes`
+var scaleOut = import_styled_components15.keyframes`
   from {
     transform: scale(0);
     opacity: 1;
@@ -1600,7 +1659,7 @@ var scaleOut = import_styled_components14.keyframes`
     opacity: 0;
   }
 `;
-var Icon2 = import_styled_components14.default.div.attrs({ role: "presentation" })`
+var Icon2 = import_styled_components15.default.div.attrs({ role: "presentation" })`
   width: 1em;
   height: 1em;
   border-radius: 1em;
@@ -1612,10 +1671,10 @@ var Icon2 = import_styled_components14.default.div.attrs({ role: "presentation"
     animation: none;
   }
 `;
-var LoadingSpinnerIcon = (0, import_react11.forwardRef)(
+var LoadingSpinnerIcon = (0, import_react13.forwardRef)(
   function LoadingSpinnerIcon2({ once = false }, ref) {
-    const iconRef = (0, import_react11.useRef)(null);
-    (0, import_react11.useImperativeHandle)(ref, () => ({
+    const iconRef = (0, import_react13.useRef)(null);
+    (0, import_react13.useImperativeHandle)(ref, () => ({
       restart: () => {
         if (!iconRef.current) {
           return;
@@ -1625,26 +1684,45 @@ var LoadingSpinnerIcon = (0, import_react11.forwardRef)(
         delete iconRef.current.dataset.resetAnimation;
       }
     }));
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon2, { ref: iconRef, once });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon2, { ref: iconRef, once });
   }
 );
 
 // src/components/DropdownSelector/index.tsx
-var import_react16 = require("react");
-var import_styled_components17 = __toESM(require("styled-components"));
-var import_utils8 = require("@charcoal-ui/utils");
+var import_react19 = require("react");
+var import_styled_components18 = __toESM(require("styled-components"));
+var import_utils10 = require("@charcoal-ui/utils");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react13 = require("react");
+var import_react16 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react12 = require("react");
+var import_react15 = require("react");
 var import_overlays3 = require("@react-aria/overlays");
-var import_styled_components15 = __toESM(require("styled-components"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_styled_components16 = __toESM(require("styled-components"));
+
+// src/components/DropdownSelector/Popover/usePreventScroll.tsx
+var import_react14 = require("react");
+function usePreventScroll(element, isOpen) {
+  (0, import_react14.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) {
-  const defaultPopoverRef = (0, import_react12.useRef)(null);
+  const defaultPopoverRef = (0, import_react15.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const { popoverProps, underlayProps } = (0, import_overlays3.usePopover)(
     {
@@ -1660,18 +1738,30 @@ function Popover(props) {
       toggle: _empty
     }
   );
+  const modalBackground = (0, import_react15.useContext)(ModalBackgroundContext);
+  usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_overlays3.Overlay, { portalContainer: document.body, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_overlays3.DismissButton, { onDismiss: () => props.onClose() }),
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_overlays3.Overlay, { portalContainer: document.body, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        ...underlayProps,
+        style: {
+          position: "fixed",
+          zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
+          inset: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_overlays3.DismissButton, { onDismiss: () => props.onClose() }),
       props.children,
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_overlays3.DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_overlays3.DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
-var DropdownPopoverDiv = import_styled_components15.default.div`
+var DropdownPopoverDiv = import_styled_components16.default.div`
   margin: 4px 0;
   list-style: none;
   overflow: auto;
@@ -1686,27 +1776,26 @@ var DropdownPopoverDiv = import_styled_components15.default.div`
 `;
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function DropdownPopover({ children, ...props }) {
-  const ref = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
+  const ref = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (props.isOpen && props.value !== void 0) {
       const windowScrollY = window.scrollY;
       const windowScrollX = window.scrollX;
       const selectedElement = document.querySelector(
         `[data-key="${props.value.toString()}"]`
       );
-      selectedElement?.scrollIntoView({ block: "center" });
       selectedElement?.focus();
       window.scrollTo(windowScrollX, windowScrollY);
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Popover,
     {
       isOpen: props.isOpen,
@@ -1719,12 +1808,12 @@ function DropdownPopover({ children, ...props }) {
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
-var React8 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 function findPreviewRecursive(children, value) {
-  const childArray = React8.Children.toArray(children);
+  const childArray = React10.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React8.isValidElement(child)) {
+    if (React10.isValidElement(child)) {
       if ("value" in child.props) {
         const childValue = child.props.value;
         if (childValue === value && "children" in child.props) {
@@ -1746,12 +1835,12 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react15 = require("react");
-var import_styled_components16 = __toESM(require("styled-components"));
+var import_react18 = require("react");
+var import_styled_components17 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react14 = require("react");
-var MenuListContext = (0, import_react14.createContext)({
+var import_react17 = require("react");
+var MenuListContext = (0, import_react17.createContext)({
   root: void 0,
   value: "",
   values: [],
@@ -1760,12 +1849,12 @@ var MenuListContext = (0, import_react14.createContext)({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-var React9 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 function getValuesRecursive(children, values = []) {
-  const childArray = React9.Children.toArray(children);
+  const childArray = React11.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React9.isValidElement(child)) {
+    if (React11.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
         const childValue = props.value;
@@ -1779,12 +1868,12 @@ function getValuesRecursive(children, values = []) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function MenuList(props) {
-  const root = (0, import_react15.useRef)(null);
+  const root = (0, import_react18.useRef)(null);
   const values = [];
   getValuesRecursive(props.children, values);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     MenuListContext.Provider,
     {
       value: {
@@ -1799,20 +1888,20 @@ function MenuList(props) {
     }
   ) });
 }
-var StyledUl = import_styled_components16.default.ul`
+var StyledUl = import_styled_components17.default.ul`
   padding: 0;
   margin: 0;
 `;
 
 // src/components/DropdownSelector/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector(props) {
-  const triggerRef = (0, import_react16.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
+  const triggerRef = (0, import_react19.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
-    props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
+    props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       DropdownFieldLabel,
       {
         label: props.label,
@@ -1821,7 +1910,7 @@ function DropdownSelector(props) {
         subLabel: props.subLabel
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       DropdownButton,
       {
         invalid: props.invalid,
@@ -1834,19 +1923,19 @@ function DropdownSelector(props) {
         ref: triggerRef,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DropdownButtonIcon, { name: "16/Menu" })
+          /* @__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" })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       DropdownPopover,
       {
         isOpen,
         onClose: () => setIsOpen(false),
         triggerRef,
         value: props.value,
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           MenuList,
           {
             value: props.value,
@@ -1859,24 +1948,24 @@ function DropdownSelector(props) {
         )
       }
     ),
-    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = import_styled_components17.default.div`
+var DropdownSelectorRoot = import_styled_components18.default.div`
   display: inline-block;
   width: 100%;
 
-  ${import_utils8.disabledSelector} {
+  ${import_utils10.disabledSelector} {
     cursor: default;
     ${theme((o) => o.disabled)}
   }
 `;
-var DropdownFieldLabel = (0, import_styled_components17.default)(FieldLabel_default)`
+var DropdownFieldLabel = (0, import_styled_components18.default)(FieldLabel_default)`
   width: 100%;
 
   ${theme((o) => o.margin.bottom(8))}
 `;
-var DropdownButton = import_styled_components17.default.button`
+var DropdownButton = import_styled_components18.default.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1887,7 +1976,7 @@ var DropdownButton = import_styled_components17.default.button`
   border: none;
   cursor: pointer;
 
-  ${import_utils8.disabledSelector} {
+  ${import_utils10.disabledSelector} {
     cursor: default;
   }
 
@@ -1899,15 +1988,15 @@ var DropdownButton = import_styled_components17.default.button`
   invalid === true && o.outline.assertive
 ])}
 `;
-var DropdownButtonText = import_styled_components17.default.span`
+var DropdownButtonText = import_styled_components18.default.span`
   text-align: left;
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
-var DropdownButtonIcon = (0, import_styled_components17.default)(Icon_default)`
+var DropdownButtonIcon = (0, import_styled_components18.default)(Icon_default)`
   ${theme((o) => [o.font.text2])}
 `;
-var AssertiveText = import_styled_components17.default.div`
+var AssertiveText = import_styled_components18.default.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
@@ -1916,19 +2005,19 @@ var AssertiveText = import_styled_components17.default.div`
 `;
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_styled_components19 = __toESM(require("styled-components"));
+var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/ListItem/index.tsx
-var import_styled_components18 = __toESM(require("styled-components"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_styled_components19 = __toESM(require("styled-components"));
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ListItem(props) {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemDiv, { ...rest, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemDiv, { ...rest, children: props.children }) });
 }
-var StyledLi = import_styled_components18.default.li`
+var StyledLi = import_styled_components19.default.li`
   list-style: none;
 `;
-var ItemDiv = import_styled_components18.default.div`
+var ItemDiv = import_styled_components19.default.div`
   display: flex;
   align-items: center;
   min-height: 40px;
@@ -1949,7 +2038,7 @@ var ItemDiv = import_styled_components18.default.div`
 `;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-var import_react17 = require("react");
+var import_react20 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1982,12 +2071,12 @@ function scrollIfNeeded(element) {
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
 function useMenuItemHandleKeyDown(value) {
-  const { setValue, root, values } = (0, import_react17.useContext)(MenuListContext);
-  const setContextValue = (0, import_react17.useCallback)(() => {
+  const { setValue, root, values } = (0, import_react20.useContext)(MenuListContext);
+  const setContextValue = (0, import_react20.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react17.useCallback)(
+  const handleKeyDown = (0, import_react20.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         setContextValue();
@@ -2014,11 +2103,11 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function MenuItem(props) {
   const { children, as, ...rest } = props;
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ListItem,
     {
       ...rest,
@@ -2034,85 +2123,85 @@ function MenuItem(props) {
 }
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_react18 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
-  const { value: ctxValue } = (0, import_react18.useContext)(MenuListContext);
+  const { value: ctxValue } = (0, import_react21.useContext)(MenuListContext);
   const isSelected = props.value === ctxValue;
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MenuItem, { ...rest, children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text2ColorIcon, { name: "16/Check" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledSpan, { isSelected, children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(MenuItem, { ...rest, children: [
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text2ColorIcon, { name: "16/Check" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledSpan, { isSelected, children: props.children })
   ] });
 }
-var StyledSpan = import_styled_components19.default.span`
+var StyledSpan = import_styled_components20.default.span`
   ${theme((o) => [o.typography(14), o.font.text2])};
   display: flex;
   align-items: center;
   width: 100%;
   margin-left: ${({ isSelected }) => isSelected === true ? 0 : 20}px;
 `;
-var Text2ColorIcon = (0, import_styled_components19.default)(Icon_default)`
+var Text2ColorIcon = (0, import_styled_components20.default)(Icon_default)`
   ${theme((o) => [o.font.text2])}
   padding-right: 4px;
 `;
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_styled_components21 = __toESM(require("styled-components"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function MenuItemGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(StyledLi2, { role: "presentation", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TextSpan, { children: props.text }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledUl2, { role: "group", children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(StyledLi2, { role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TextSpan, { children: props.text }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledUl2, { role: "group", children: props.children })
   ] });
 }
-var TextSpan = import_styled_components20.default.span`
+var TextSpan = import_styled_components21.default.span`
   display: block;
   color: ${({ theme: theme3 }) => theme3.color.text3};
   font-size: 12px;
   font-weight: bold;
   padding: 12px 0 8px 16px;
 `;
-var StyledUl2 = import_styled_components20.default.ul`
+var StyledUl2 = import_styled_components21.default.ul`
   padding-left: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   overflow: hidden;
 `;
-var StyledLi2 = import_styled_components20.default.li`
+var StyledLi2 = import_styled_components21.default.li`
   display: block;
 `;
 
 // src/components/SegmentedControl/index.tsx
-var import_react20 = require("react");
+var import_react23 = require("react");
 var import_react_stately2 = require("react-stately");
 var import_radio = require("@react-aria/radio");
-var import_styled_components21 = __toESM(require("styled-components"));
-var import_utils9 = require("@charcoal-ui/utils");
+var import_styled_components22 = __toESM(require("styled-components"));
+var import_utils11 = require("@charcoal-ui/utils");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react19 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var RadioContext = (0, import_react19.createContext)(null);
+var import_react22 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var RadioContext = (0, import_react22.createContext)(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react19.useContext)(RadioContext);
+  const state = (0, import_react22.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react20.forwardRef)(
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var SegmentedControl = (0, import_react23.forwardRef)(
   function SegmentedControlInner(props, ref) {
-    const ariaRadioGroupProps = (0, import_react20.useMemo)(
+    const ariaRadioGroupProps = (0, import_react23.useMemo)(
       () => ({
         ...props,
         isDisabled: props.disabled,
@@ -2124,18 +2213,18 @@ var SegmentedControl = (0, import_react20.forwardRef)(
     );
     const state = (0, import_react_stately2.useRadioGroupState)(ariaRadioGroupProps);
     const { radioGroupProps } = (0, import_radio.useRadioGroup)(ariaRadioGroupProps, state);
-    const segmentedControlItems = (0, import_react20.useMemo)(() => {
+    const segmentedControlItems = (0, import_react23.useMemo)(() => {
       return props.data.map(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
     }, [props.data]);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       SegmentedControlRoot,
       {
         ref,
         ...radioGroupProps,
         className: props.className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Segmented,
           {
             value: item.value,
@@ -2148,11 +2237,11 @@ var SegmentedControl = (0, import_react20.forwardRef)(
     );
   }
 );
-var SegmentedControl_default = (0, import_react20.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react23.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react20.useRef)(null);
-  const ariaRadioProps = (0, import_react20.useMemo)(
+  const ref = (0, import_react23.useRef)(null);
+  const ariaRadioProps = (0, import_react23.useMemo)(
     () => ({
       value: props.value,
       isDisabled: props.disabled,
@@ -2165,32 +2254,32 @@ var Segmented = (props) => {
     state,
     ref
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     SegmentedRoot,
     {
       "aria-disabled": isDisabled || state.isReadOnly,
       checked: isSelected,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SegmentedInput, { ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioLabel2, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SegmentedLabelInner, { children: props.children }) })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SegmentedInput, { ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioLabel2, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SegmentedLabelInner, { children: props.children }) })
       ]
     }
   );
 };
-var SegmentedControlRoot = import_styled_components21.default.div`
+var SegmentedControlRoot = import_styled_components22.default.div`
   display: inline-flex;
   align-items: center;
 
   ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
 `;
-var SegmentedRoot = import_styled_components21.default.label`
+var SegmentedRoot = import_styled_components22.default.label`
   position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
   height: 32px;
 
-  ${import_utils9.disabledSelector} {
+  ${import_utils11.disabledSelector} {
     cursor: default;
   }
 
@@ -2202,7 +2291,7 @@ var SegmentedRoot = import_styled_components21.default.label`
   checked === true ? o.font.text5 : o.font.text2
 ])}
 `;
-var SegmentedInput = import_styled_components21.default.input`
+var SegmentedInput = import_styled_components22.default.input`
   position: absolute;
 
   height: 0px;
@@ -2216,69 +2305,70 @@ var SegmentedInput = import_styled_components21.default.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = import_styled_components21.default.div`
+var RadioLabel2 = import_styled_components22.default.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = import_styled_components21.default.div`
+var SegmentedLabelInner = import_styled_components22.default.div`
   ${theme((o) => [o.typography(14)])}
 `;
 
 // src/components/Checkbox/index.tsx
-var import_react21 = require("react");
-var import_styled_components22 = __toESM(require("styled-components"));
+var import_react24 = require("react");
+var import_styled_components23 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
-var import_utils10 = require("@react-aria/utils");
+var import_utils12 = require("@react-aria/utils");
 var import_react_stately3 = require("react-stately");
-var import_utils11 = require("@charcoal-ui/utils");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Checkbox = (0, import_react21.forwardRef)(
-  function CheckboxInner(props, ref) {
-    const ariaCheckboxProps = (0, import_react21.useMemo)(
+var import_utils13 = require("@charcoal-ui/utils");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Checkbox = (0, import_react24.forwardRef)(
+  function CheckboxInner({ invalid = false, ...props }, ref) {
+    const ariaCheckboxProps = (0, import_react24.useMemo)(
       () => ({
         ...props,
         isSelected: props.checked,
         defaultSelected: props.defaultChecked,
+        validationState: invalid ? "invalid" : "valid",
         "aria-label": "children" in props ? void 0 : props.label,
         isDisabled: props.disabled
       }),
-      [props]
+      [invalid, props]
     );
     const state = (0, import_react_stately3.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils10.useObjectRef)(ref);
+    const objectRef = (0, import_utils12.useObjectRef)(ref);
     const { inputProps } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(CheckboxRoot, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxInput, { type: "checkbox", ...inputProps }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
+    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, invalid }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
       ] }),
-      "children" in props && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InputLabel, { children: props.children })
+      "children" in props && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InputLabel, { children: props.children })
     ] });
   }
 );
-var Checkbox_default = (0, import_react21.memo)(Checkbox);
-var hiddenCss = import_styled_components22.css`
+var Checkbox_default = (0, import_react24.memo)(Checkbox);
+var hiddenCss = import_styled_components23.css`
   visibility: hidden;
 `;
-var InputRoot = import_styled_components22.default.label`
+var InputRoot = import_styled_components23.default.label`
   position: relative;
   display: flex;
 
   cursor: pointer;
-  ${import_utils11.disabledSelector} {
+  ${import_utils13.disabledSelector} {
     cursor: default;
   }
 
-  gap: ${({ theme: theme3 }) => (0, import_utils11.px)(theme3.spacing[4])};
+  gap: ${({ theme: theme3 }) => (0, import_utils13.px)(theme3.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
-var CheckboxRoot = import_styled_components22.default.div`
+var CheckboxRoot = import_styled_components23.default.div`
   position: relative;
 `;
-var CheckboxInput = import_styled_components22.default.input`
+var CheckboxInput = import_styled_components23.default.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -2296,12 +2386,13 @@ var CheckboxInput = import_styled_components22.default.input`
       border-color: ${({ theme: theme3 }) => theme3.color.text4};
     }
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+    ${(p) => p.invalid && theme((o) => [o.outline.assertive])}
 
     /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
     transition: all 0.2s !important;
   }
 `;
-var CheckboxInputOverlay = import_styled_components22.default.div`
+var CheckboxInputOverlay = import_styled_components23.default.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -2314,7 +2405,7 @@ var CheckboxInputOverlay = import_styled_components22.default.div`
 
   ${({ checked }) => checked !== true && hiddenCss};
 `;
-var InputLabel = import_styled_components22.default.div`
+var InputLabel = import_styled_components23.default.div`
   ${theme((o) => [o.font.text2])}
 
   font-size: 14px;
@@ -2323,17 +2414,17 @@ var InputLabel = import_styled_components22.default.div`
 `;
 
 // src/components/TagItem/index.tsx
-var import_react22 = require("react");
-var import_utils12 = require("@react-aria/utils");
-var import_styled_components23 = __toESM(require("styled-components"));
-var import_utils13 = require("@charcoal-ui/utils");
+var import_react25 = require("react");
+var import_utils14 = require("@react-aria/utils");
+var import_styled_components24 = __toESM(require("styled-components"));
+var import_utils15 = require("@charcoal-ui/utils");
 var import_button = require("@react-aria/button");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react22.forwardRef)(
+var TagItem = (0, import_react25.forwardRef)(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2345,8 +2436,8 @@ var TagItem = (0, import_react22.forwardRef)(
     className,
     ...props
   }, _ref) {
-    const ref = (0, import_utils12.useObjectRef)(_ref);
-    const ariaButtonProps = (0, import_react22.useMemo)(
+    const ref = (0, import_utils14.useObjectRef)(_ref);
+    const ariaButtonProps = (0, import_react25.useMemo)(
       () => ({
         elementType: "a",
         isDisabled: disabled,
@@ -2356,7 +2447,7 @@ var TagItem = (0, import_react22.forwardRef)(
     );
     const { buttonProps } = (0, import_button.useButton)(ariaButtonProps, ref);
     const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       TagItemRoot,
       {
         ref,
@@ -2365,21 +2456,21 @@ var TagItem = (0, import_react22.forwardRef)(
         ...buttonProps,
         className,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Background, { bgColor, bgImage, status }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Inner, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
-              hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslatedLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Label3, { children: translatedLabel }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Label3, { children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Background, { bgColor, bgImage, status }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Inner, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
+              hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslatedLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label3, { children: translatedLabel }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label3, { children: label })
             ] }),
-            status === "active" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "16/Remove" })
+            status === "active" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "16/Remove" })
           ] })
         ]
       }
     );
   }
 );
-var TagItem_default = (0, import_react22.memo)(TagItem);
-var TagItemRoot = import_styled_components23.default.a`
+var TagItem_default = (0, import_react25.memo)(TagItem);
+var TagItemRoot = import_styled_components24.default.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2399,12 +2490,12 @@ var TagItemRoot = import_styled_components23.default.a`
   ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
 ])}
 
-  ${import_utils13.disabledSelector} {
+  ${import_utils15.disabledSelector} {
     ${theme((o) => [o.disabled])}
     cursor: default;
   }
 `;
-var Background = import_styled_components23.default.div`
+var Background = import_styled_components24.default.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2415,7 +2506,7 @@ var Background = import_styled_components23.default.div`
   background-color: ${({ bgColor }) => bgColor};
   ${({ status }) => status === "inactive" && theme((o) => o.bg.surface3)}
 
-  ${({ bgImage }) => bgImage !== void 0 && import_styled_components23.css`
+  ${({ bgImage }) => bgImage !== void 0 && import_styled_components24.css`
       ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
@@ -2431,25 +2522,25 @@ var Background = import_styled_components23.default.div`
       }
     `}
 `;
-var Inner = import_styled_components23.default.div`
+var Inner = import_styled_components24.default.div`
   display: inline-flex;
-  gap: ${({ theme: theme3 }) => (0, import_utils13.px)(theme3.spacing[8])};
+  gap: ${({ theme: theme3 }) => (0, import_utils15.px)(theme3.spacing[8])};
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = import_styled_components23.css`
+var labelCSS = import_styled_components24.css`
   ${theme((o) => [o.typography(14).bold])}
 `;
-var translateLabelCSS = import_styled_components23.css`
+var translateLabelCSS = import_styled_components24.css`
   display: flex;
   align-items: center;
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = import_styled_components23.default.div`
+var LabelWrapper = import_styled_components24.default.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = import_styled_components23.default.span`
+var Label3 = import_styled_components24.default.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2458,7 +2549,7 @@ var Label3 = import_styled_components23.default.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = import_styled_components23.default.div`
+var TranslatedLabel = import_styled_components24.default.div`
   ${theme((o) => [o.typography(12).bold])}
 `;
 // Annotate the CommonJS export names for ESM import in node: