@charcoal-ui/react 3.3.0 → 3.5.0

package/dist/index.esm.js

@@ -81,39 +81,39 @@ var theme = createTheme(styled);
 
 // src/components/Clickable/index.tsx
 import * as React2 from "react";
-import styled2, { css } from "styled-components";
+import styled2 from "styled-components";
 import { disabledSelector } from "@charcoal-ui/utils";
 import { jsx as jsx3 } from "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__ */ jsx3(
-        A,
-        {
-          ...rest,
-          as: disabled ? void 0 : Link,
-          onClick: disabled ? void 0 : onClick,
-          "aria-disabled": disabled,
-          ref
-        }
-      );
-    } else {
-      return /* @__PURE__ */ jsx3(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__ */ jsx3(
+      StyledClickableDiv,
+      {
+        ...rest,
+        ref,
+        as,
+        "aria-disabled": ariaDisabled
+      }
+    );
   }
 );
 var Clickable_default = Clickable;
-var clickableCss = css`
-  /* Clickable style */
+var StyledClickableDiv = styled2.div`
   cursor: pointer;
 
   ${disabledSelector} {
     cursor: default;
   }
-`;
-var Button = styled2.button`
+
   /* Reset button appearance */
   appearance: none;
   background: transparent;
@@ -146,27 +146,11 @@ var Button = styled2.button`
     border-style: none;
     padding: 0;
   }
-
-  ${clickableCss}
-`;
-var A = styled2.span`
-  /* Reset a-tag appearance */
-  color: inherit;
-
-  &:focus {
-    outline: none;
-  }
-
-  .text {
-    top: calc(1em + 2em);
-  }
-
-  ${clickableCss}
 `;
 
 // src/components/Button/index.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var Button2 = forwardRef3(function Button3({
+var Button = forwardRef3(function Button2({
   children,
   variant = "Default",
   size = "M",
@@ -187,7 +171,7 @@ var Button2 = forwardRef3(function Button3({
     }
   );
 });
-var Button_default = Button2;
+var Button_default = Button;
 var StyledButton = styled3(Clickable_default)`
   width: ${(p) => p.$fullWidth ? "stretch" : "min-content"};
   display: inline-grid;
@@ -494,7 +478,7 @@ function RadioGroup({
 
 // src/components/MultiSelect/index.tsx
 import { useCallback as useCallback2, useContext as useContext3, forwardRef as forwardRef6, memo as memo2 } from "react";
-import styled6, { css as css2 } from "styled-components";
+import styled6, { css } from "styled-components";
 import warning2 from "warning";
 import { disabledSelector as disabledSelector2, px as px2 } from "@charcoal-ui/utils";
 
@@ -634,7 +618,7 @@ var MultiSelectInputOverlay = styled6.div`
   invalid && overlay && o.outline.assertive
 ])}
 
-  ${({ overlay }) => overlay && css2`
+  ${({ overlay }) => overlay && css`
       border-color: ${({ theme: theme3 }) => theme3.color.text5};
       border-width: 2px;
       border-style: solid;
@@ -805,9 +789,9 @@ var SwitchInput = styled7.input.attrs({
 // src/components/TextField/index.tsx
 import { useTextField } from "@react-aria/textfield";
 import { useVisuallyHidden } from "@react-aria/visually-hidden";
-import { useCallback as useCallback3, useEffect, useRef, useState } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef, useState } from "react";
 import * as React5 from "react";
-import styled9 from "styled-components";
+import styled9, { css as css2 } from "styled-components";
 
 // src/components/FieldLabel/index.tsx
 import * as React4 from "react";
@@ -859,10 +843,29 @@ var FieldLabelWrapper = styled8.div`
   }
 `;
 
+// src/components/TextField/useFocusWithClick.tsx
+import { useEffect } from "react";
+function useFocusWithClick(containerRef, inputRef) {
+  useEffect(() => {
+    const el = containerRef.current;
+    if (el) {
+      const handleDown = (e) => {
+        if (e.target !== inputRef.current) {
+          inputRef.current?.focus();
+        }
+      };
+      el.addEventListener("click", handleDown);
+      return () => {
+        el.removeEventListener("click", handleDown);
+      };
+    }
+  });
+}
+
 // src/components/TextField/index.tsx
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var TextField = React5.forwardRef(
-  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef17) {
+  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef18) {
     const {
       className,
       showLabel = false,
@@ -880,13 +883,9 @@ var TextField = React5.forwardRef(
     } = props;
     const { visuallyHiddenProps } = useVisuallyHidden();
     const ariaRef = useRef(null);
-    const prefixRef = useRef(null);
-    const suffixRef = useRef(null);
     const [count, setCount] = useState(
       countCodePointsInString(props.value ?? "")
     );
-    const [prefixWidth, setPrefixWidth] = useState(0);
-    const [suffixWidth, setSuffixWidth] = useState(0);
     const nonControlled = props.value === void 0;
     const handleChange = useCallback3(
       (value) => {
@@ -901,7 +900,7 @@ var TextField = React5.forwardRef(
       },
       [maxLength, nonControlled, onChange]
     );
-    useEffect(() => {
+    useEffect2(() => {
       setCount(countCodePointsInString(props.value ?? ""));
     }, [props.value]);
     const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField(
@@ -917,24 +916,8 @@ var TextField = React5.forwardRef(
       },
       ariaRef
     );
-    useEffect(() => {
-      const prefixObserver = new ResizeObserver((entries) => {
-        setPrefixWidth(entries[0].contentRect.width);
-      });
-      const suffixObserver = new ResizeObserver((entries) => {
-        setSuffixWidth(entries[0].contentRect.width);
-      });
-      if (prefixRef.current !== null) {
-        prefixObserver.observe(prefixRef.current);
-      }
-      if (suffixRef.current !== null) {
-        suffixObserver.observe(suffixRef.current);
-      }
-      return () => {
-        suffixObserver.disconnect();
-        prefixObserver.disconnect();
-      };
-    }, []);
+    const containerRef = useRef(null);
+    useFocusWithClick(containerRef, ariaRef);
     return /* @__PURE__ */ jsxs6(TextFieldRoot, { className, isDisabled: disabled, children: [
       /* @__PURE__ */ jsx10(
         TextFieldLabel,
@@ -947,23 +930,31 @@ var TextField = React5.forwardRef(
           ...!showLabel ? visuallyHiddenProps : {}
         }
       ),
-      /* @__PURE__ */ jsxs6(StyledInputContainer, { children: [
-        /* @__PURE__ */ jsx10(PrefixContainer, { ref: prefixRef, children: /* @__PURE__ */ jsx10(Affix, { children: prefix }) }),
-        /* @__PURE__ */ jsx10(
-          StyledInput,
-          {
-            ref: mergeRefs(forwardRef17, ariaRef),
-            invalid,
-            extraLeftPadding: prefixWidth,
-            extraRightPadding: suffixWidth,
-            ...inputProps
-          }
-        ),
-        /* @__PURE__ */ jsxs6(SuffixContainer, { ref: suffixRef, children: [
-          /* @__PURE__ */ jsx10(Affix, { children: suffix }),
-          showCount && /* @__PURE__ */ jsx10(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
-        ] })
-      ] }),
+      /* @__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
+              }
+            ),
+            (suffix || showCount) && /* @__PURE__ */ jsxs6(SuffixContainer, { children: [
+              suffix,
+              showCount && /* @__PURE__ */ jsx10(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+            ] })
+          ]
+        }
+      ),
       assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx10(
         AssistiveText,
         {
@@ -983,34 +974,53 @@ var TextFieldRoot = styled9.div`
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
 var TextFieldLabel = styled9(FieldLabel_default)`
-  ${theme((o) => o.margin.bottom(8))}
+  margin-bottom: 8px;
 `;
 var StyledInputContainer = styled9.div`
-  height: 40px;
   display: grid;
-  position: relative;
+  grid-template-columns: ${(p) => [p.hasPrefix && "auto", "1fr", p.hasSuffix && "auto"].filter(Boolean).join(" ")};
+  height: 40px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  gap: 4px;
+  padding: 0 8px;
+  line-height: 22px;
+  font-size: 14px;
+
+  :not(:disabled):not([aria-disabled]):hover,
+  [aria-disabled='false']:hover {
+    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
+      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
+  }
+
+  ${(p) => p.invalid && css2`
+      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+    `}
 `;
-var PrefixContainer = styled9.span`
-  position: absolute;
-  top: 50%;
-  left: 8px;
-  transform: translateY(-50%);
-  z-index: 1;
+var PrefixContainer = styled9.div`
+  display: flex;
+  padding-left: 8px;
+  align-items: center;
 `;
 var SuffixContainer = styled9.span`
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  transform: translateY(-50%);
-
   display: flex;
+  align-items: center;
   gap: 8px;
 `;
-var Affix = styled9.span`
-  user-select: none;
-
-  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
-`;
 var StyledInput = styled9.input`
   border: none;
   box-sizing: border-box;
@@ -1024,44 +1034,40 @@ var StyledInput = styled9.input`
   height: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding-left: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);
-  padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);
+  padding-left: 0;
+  padding-right: 0;
   border-radius: calc(4px / 0.875);
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
+  background: transparent;
 
-  ${(p) => theme((o) => [
-  o.bg.surface3.hover,
-  o.outline.default.focus,
-  p.invalid && o.outline.assertive,
-  o.font.text2
-])}
-
+  color: var(--charcoal-text2);
   &::placeholder {
-    ${theme((o) => o.font.text3)}
+    color: var(--charcoal-text3);
   }
 `;
 var SingleLineCounter = styled9.span`
-  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--charcoal-text3);
 `;
 var AssistiveText = styled9.p`
-  ${(p) => theme((o) => [
-  o.typography(14),
-  o.margin.top(8),
-  o.margin.bottom(0),
-  o.font[p.invalid ? "assertive" : "text1"]
-])}
+  font-size: 14px;
+  line-height: 22px;
+  margin-top: 4px;
+  margin-bottom: -4px;
+  color: ${(p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`};
 `;
 
 // 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 useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 import styled10, { css as css3 } from "styled-components";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var TextArea = forwardRef10(
-  function TextAreaInner({ onChange, ...props }, forwardRef17) {
+  function TextAreaInner({ onChange, ...props }, forwardRef18) {
     const {
       className,
       showCount = false,
@@ -1109,7 +1115,7 @@ var TextArea = forwardRef10(
       },
       [autoHeight, maxLength, nonControlled, onChange, syncHeight]
     );
-    useEffect2(() => {
+    useEffect3(() => {
       setCount(countCodePointsInString(props.value ?? ""));
     }, [props.value]);
     const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField2(
@@ -1125,14 +1131,16 @@ var TextArea = forwardRef10(
       },
       ariaRef
     );
-    useEffect2(() => {
+    useEffect3(() => {
       if (autoHeight && textareaRef.current !== null) {
         syncHeight(textareaRef.current);
       }
     }, [autoHeight, syncHeight]);
+    const containerRef = useRef2(null);
+    useFocusWithClick(containerRef, ariaRef);
     return /* @__PURE__ */ jsxs7(TextFieldRoot2, { className, isDisabled: disabled, children: [
       /* @__PURE__ */ jsx11(
-        TextFieldLabel2,
+        TextFieldLabel,
         {
           label,
           requiredText,
@@ -1145,13 +1153,15 @@ var TextArea = forwardRef10(
       /* @__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, forwardRef17, ariaRef),
+                ref: mergeRefs(textareaRef, forwardRef18, ariaRef),
                 rows,
                 noBottomPadding: showCount,
                 ...inputProps
@@ -1162,7 +1172,7 @@ var TextArea = forwardRef10(
         }
       ),
       assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx11(
-        AssistiveText2,
+        AssistiveText,
         {
           invalid,
           ...invalid ? errorMessageProps : descriptionProps,
@@ -1179,29 +1189,32 @@ var TextFieldRoot2 = styled10.div`
 
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
-var TextFieldLabel2 = styled10(FieldLabel_default)`
-  ${theme((o) => o.margin.bottom(8))}
-`;
 var StyledTextareaContainer = styled10.div`
   position: relative;
   overflow: hidden;
-  padding: 0 8px;
 
-  ${(p) => theme((o) => [
-  o.bg.surface3.hover,
-  o.outline.default.focus,
-  p.invalid && o.outline.assertive,
-  o.font.text2,
-  o.borderRadius(4)
-])}
-
-  &:focus-within {
-    ${(p) => theme((o) => p.invalid ? o.outline.assertive : o.outline.default)}
-  }
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  transition: 0.2s background-color, 0.2s box-shadow;
 
   ${({ rows }) => css3`
     height: calc(22px * ${rows} + 18px);
   `};
+
+  :not([aria-disabled]):hover,
+  [aria-disabled='false']:hover {
+    background-color: var(--charcoal-surface3-hover);
+  }
+  :focus-within {
+    outline: none;
+    box-shadow: 0 0 0 4px
+      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
+  }
+
+  ${(p) => p.invalid && css3`
+      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+    `}
 `;
 var StyledTextarea = styled10.textarea`
   border: none;
@@ -1209,6 +1222,7 @@ var StyledTextarea = styled10.textarea`
   resize: none;
   font-family: inherit;
   color: inherit;
+  box-sizing: border-box;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
@@ -1216,10 +1230,11 @@ var StyledTextarea = styled10.textarea`
   width: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) 0 ${(p) => p.noBottomPadding ? 0 : ""};
+  padding: calc(9px / 0.875) calc(8px / 0.875)
+    ${(p) => p.noBottomPadding ? 0 : ""};
 
-  ${({ rows = 1 }) => css3`
-    height: calc(22px / 0.875 * ${rows});
+  ${({ rows = 1, noBottomPadding }) => css3`
+    height: calc(22px / 0.875 * ${rows} + ${noBottomPadding ? 9 : 20}px);
   `};
 
   /* Display box-shadow for iOS Safari */
@@ -1228,31 +1243,17 @@ var StyledTextarea = styled10.textarea`
   background: none;
 
   &::placeholder {
-    ${theme((o) => o.font.text3)}
-  }
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
+    color: var(--charcoal-text3);
   }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
 `;
 var MultiLineCounter = styled10.span`
   position: absolute;
   bottom: 9px;
   right: 8px;
 
-  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
-`;
-var AssistiveText2 = styled10.p`
-  ${(p) => theme((o) => [
-  o.typography(14),
-  o.margin.top(8),
-  o.margin.bottom(0),
-  o.font[p.invalid ? "assertive" : "text1"]
-])}
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--charcoal-text3);
 `;
 
 // src/components/Icon/index.tsx
@@ -1275,15 +1276,21 @@ var Icon = React6.forwardRef(function IconInner({ name, scale, unsafeNonGuidelin
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-import { useContext as useContext4, forwardRef as forwardRef12, memo as memo4 } from "react";
-import * as React7 from "react";
+import { useContext as useContext4, forwardRef as forwardRef13, memo as memo4 } from "react";
+import * as React9 from "react";
 import {
   Overlay,
-  useModalOverlay,
-  useOverlay
+  useModalOverlay
 } from "@react-aria/overlays";
-import styled11, { css as css4, useTheme } from "styled-components";
-import { FocusScope } from "@react-aria/focus";
+import styled12, { css as css5, useTheme } from "styled-components";
+import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
+import { useMedia } from "@charcoal-ui/styled";
+import { animated as animated2, useTransition, easings } from "react-spring";
+import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
+
+// src/components/Modal/Dialog/index.tsx
+import { forwardRef as forwardRef12 } from "react";
+import styled11, { css as css4 } from "styled-components";
 import { useDialog } from "@react-aria/dialog";
 
 // ../foundation/src/grid.ts
@@ -1293,14 +1300,100 @@ function columnSystem(span, column, gutter) {
   return span * column + (span - 1) * gutter;
 }
 
-// src/components/Modal/index.tsx
+// src/components/Modal/Dialog/index.tsx
 import { maxWidth } from "@charcoal-ui/utils";
-import { useMedia } from "@charcoal-ui/styled";
-import { animated, useTransition, easings } from "react-spring";
-import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { animated } from "react-spring";
+
+// src/_lib/useForwardedRef.tsx
+import * as React7 from "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
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Dialog = forwardRef12(function Dialog2(props, forwardRef18) {
+  const ref = useForwardedRef(forwardRef18);
+  const { dialogProps } = useDialog(
+    {
+      role: "dialog"
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsx13(
+    AnimatedStyledDialogDiv,
+    {
+      ...props,
+      role: dialogProps.role,
+      tabIndex: dialogProps.tabIndex,
+      "aria-labelledby": dialogProps["aria-labelledby"],
+      onBlur: dialogProps.onBlur,
+      ref
+    }
+  );
+});
+var AnimatedStyledDialogDiv = animated(styled11.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 }) => maxWidth(theme3.breakpoint.screen1)} {
+    max-width: 440px;
+    width: calc(100% - 48px);
+    ${(p) => p.bottomSheet !== false && css4`
+        max-width: unset;
+        width: 100%;
+        border-radius: 0;
+        margin: auto 0 0 0;
+        ${p.bottomSheet === "full" && css4`
+          min-height: 100%;
+        `}
+      `}
+  }
+  :focus {
+    outline: none;
+  }
+`);
+
+// src/components/Modal/ModalBackgroundContext.tsx
+import * as React8 from "react";
+var ModalBackgroundContext = React8.createContext(
+  null
+);
+
+// src/components/Modal/index.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_Z_INDEX = 10;
-var Modal = forwardRef12(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
+var Modal = forwardRef13(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
   const {
     title,
     size = "M",
@@ -1311,8 +1404,7 @@ var Modal = forwardRef12(function ModalInner({ children, zIndex = DEFAULT_Z_INDE
     isOpen = false
   } = props;
   const ref = useObjectRef2(external);
-  const { overlayProps, underlayProps } = useOverlay(props, ref);
-  const { modalProps } = useModalOverlay(
+  const { modalProps, underlayProps } = useModalOverlay(
     props,
     {
       close: onClose,
@@ -1326,40 +1418,45 @@ var Modal = forwardRef12(function ModalInner({ children, zIndex = DEFAULT_Z_INDE
     },
     ref
   );
-  const { dialogProps, titleProps } = useDialog(props, ref);
   const theme3 = useTheme();
-  const isMobile = useMedia(maxWidth(theme3.breakpoint.screen1)) ?? false;
+  const isMobile = useMedia(maxWidth2(theme3.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
+  const showDismiss = !isMobile || bottomSheet !== true;
   const transition = 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: easings.easeOutQuart } : { duration: 0 }
   });
-  const showDismiss = !isMobile || bottomSheet !== true;
+  const bgRef = React9.useRef(null);
   return transition(
-    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ jsx13(Overlay, { portalContainer, children: /* @__PURE__ */ jsx13(
+    ({ backgroundColor, overflow, transform }, item) => item && /* @__PURE__ */ jsx14(Overlay, { portalContainer, children: /* @__PURE__ */ jsx14(
       ModalBackground,
       {
+        ref: bgRef,
         zIndex,
         ...underlayProps,
-        style: transitionEnabled ? { backgroundColor } : {},
-        children: /* @__PURE__ */ jsx13(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx13(DialogContainer, { bottomSheet, size, children: /* @__PURE__ */ jsx13(
-          ModalDialog,
+        style: transitionEnabled ? { backgroundColor, overflow } : {},
+        $bottomSheet: bottomSheet,
+        children: /* @__PURE__ */ jsx14(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx14(
+          Dialog,
           {
             ref,
-            ...overlayProps,
             ...modalProps,
-            ...dialogProps,
             style: transitionEnabled ? { transform } : {},
             size,
             bottomSheet,
@@ -1367,10 +1464,16 @@ var Modal = forwardRef12(function ModalInner({ children, zIndex = DEFAULT_Z_INDE
             children: /* @__PURE__ */ jsxs8(
               ModalContext.Provider,
               {
-                value: { titleProps, title, close: onClose, showDismiss },
+                value: {
+                  titleProps: {},
+                  title,
+                  close: onClose,
+                  showDismiss,
+                  bottomSheet
+                },
                 children: [
                   children,
-                  isDismissable === true && /* @__PURE__ */ jsx13(
+                  isDismissable === true && /* @__PURE__ */ jsx14(
                     ModalCrossButton,
                     {
                       size: "S",
@@ -1382,78 +1485,42 @@ var Modal = forwardRef12(function ModalInner({ children, zIndex = DEFAULT_Z_INDE
               }
             )
           }
-        ) }) })
+        ) })
       }
     ) })
   );
 });
 var Modal_default = memo4(Modal);
-var ModalContext = React7.createContext({
+var ModalContext = React9.createContext({
   titleProps: {},
   title: "",
   close: void 0,
-  showDismiss: true
+  showDismiss: true,
+  bottomSheet: false
 });
-var ModalBackground = animated(styled11.div`
+var ModalBackground = animated2(styled12.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 = styled11.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 }) => maxWidth(theme3.breakpoint.screen1)} {
-    width: calc(100% - 48px);
-    ${(p) => p.bottomSheet !== false && css4`
-        margin: 0;
+  @media ${({ theme: theme3 }) => maxWidth2(theme3.breakpoint.screen1)} {
+    ${(p) => p.$bottomSheet !== false && css5`
         padding: 0;
-        bottom: 0;
-        position: absolute;
-        width: 100%;
-        ${p.bottomSheet === "full" ? "height: 100%" : ""};
-      `}
-  }
-`;
-var ModalDialog = animated(styled11.div`
-  position: relative;
-  margin: auto;
-
-  ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-  @media ${({ theme: theme3 }) => maxWidth(theme3.breakpoint.screen1)} {
-    ${(p) => p.bottomSheet !== false && css4`
-        border-radius: 0;
-        ${p.bottomSheet === "full" && css4`
-          height: 100%;
-        `}
       `}
   }
 `);
-var ModalCrossButton = styled11(IconButton_default)`
+var ModalCrossButton = styled12(IconButton_default)`
   position: absolute;
   top: 8px;
   right: 8px;
@@ -1462,36 +1529,44 @@ var ModalCrossButton = styled11(IconButton_default)`
 `;
 function ModalTitle(props) {
   const { titleProps, title } = useContext4(ModalContext);
-  return /* @__PURE__ */ jsx13(ModalHeading, { ...titleProps, ...props, children: title });
+  return /* @__PURE__ */ jsx14(ModalHeading, { ...titleProps, ...props, children: title });
 }
-var ModalHeading = styled11.h3`
+var ModalHeading = styled12.h3`
   margin: 0;
   font-weight: inherit;
   font-size: inherit;
 `;
 
 // src/components/Modal/ModalPlumbing.tsx
-import styled12 from "styled-components";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import styled13, { css as css6 } from "styled-components";
+import { useContext as useContext5 } from "react";
+import { maxWidth as maxWidth3 } from "@charcoal-ui/utils";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function ModalHeader() {
-  return /* @__PURE__ */ jsx14(ModalHeaderRoot, { children: /* @__PURE__ */ jsx14(StyledModalTitle, {}) });
+  const modalCtx = useContext5(ModalContext);
+  return /* @__PURE__ */ jsx15(ModalHeaderRoot, { $bottomSheet: modalCtx.bottomSheet, children: /* @__PURE__ */ jsx15(StyledModalTitle, {}) });
 }
-var ModalHeaderRoot = styled12.div`
+var ModalHeaderRoot = styled13.div`
   height: 64px;
   display: grid;
   align-content: center;
   justify-content: center;
+  @media ${({ theme: theme3 }) => maxWidth3(theme3.breakpoint.screen1)} {
+    ${(p) => p.$bottomSheet !== false && css6`
+        height: 48px;
+      `}
+  }
 `;
-var StyledModalTitle = styled12(ModalTitle)`
+var StyledModalTitle = styled13(ModalTitle)`
   ${theme((o) => [o.font.text1, o.typography(16).bold])}
 `;
-var ModalAlign = styled12.div`
+var ModalAlign = styled13.div`
   ${theme((o) => [o.padding.horizontal(16)])}
 `;
-var ModalBody = styled12.div`
+var ModalBody = styled13.div`
   ${theme((o) => [o.padding.bottom(40)])}
 `;
-var ModalButtons = styled12.div`
+var ModalButtons = styled13.div`
   display: grid;
   grid-auto-flow: row;
   grid-row-gap: 8px;
@@ -1500,12 +1575,12 @@ var ModalButtons = styled12.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-import { forwardRef as forwardRef13, useImperativeHandle, useRef as useRef3, memo as memo5 } from "react";
-import styled13, { keyframes } from "styled-components";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var LoadingSpinner = forwardRef13(
+import { forwardRef as forwardRef14, useImperativeHandle, useRef as useRef5, memo as memo5 } from "react";
+import styled14, { keyframes } from "styled-components";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var LoadingSpinner = forwardRef14(
   function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, className }, ref) {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       LoadingSpinnerRoot,
       {
         size,
@@ -1513,13 +1588,13 @@ var LoadingSpinner = forwardRef13(
         transparent,
         className,
         ref,
-        children: /* @__PURE__ */ jsx15(LoadingSpinnerIcon, {})
+        children: /* @__PURE__ */ jsx16(LoadingSpinnerIcon, {})
       }
     );
   }
 );
 var LoadingSpinner_default = memo5(LoadingSpinner);
-var LoadingSpinnerRoot = styled13.div.attrs({ role: "progressbar" })`
+var LoadingSpinnerRoot = styled14.div.attrs({ role: "progressbar" })`
   box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
@@ -1544,7 +1619,7 @@ var scaleOut = keyframes`
     opacity: 0;
   }
 `;
-var Icon2 = styled13.div.attrs({ role: "presentation" })`
+var Icon2 = styled14.div.attrs({ role: "presentation" })`
   width: 1em;
   height: 1em;
   border-radius: 1em;
@@ -1556,9 +1631,9 @@ var Icon2 = styled13.div.attrs({ role: "presentation" })`
     animation: none;
   }
 `;
-var LoadingSpinnerIcon = forwardRef13(
+var LoadingSpinnerIcon = forwardRef14(
   function LoadingSpinnerIcon2({ once = false }, ref) {
-    const iconRef = useRef3(null);
+    const iconRef = useRef5(null);
     useImperativeHandle(ref, () => ({
       restart: () => {
         if (!iconRef.current) {
@@ -1569,26 +1644,45 @@ var LoadingSpinnerIcon = forwardRef13(
         delete iconRef.current.dataset.resetAnimation;
       }
     }));
-    return /* @__PURE__ */ jsx15(Icon2, { ref: iconRef, once });
+    return /* @__PURE__ */ jsx16(Icon2, { ref: iconRef, once });
   }
 );
 
 // src/components/DropdownSelector/index.tsx
-import { useState as useState3, useRef as useRef7 } from "react";
-import styled16 from "styled-components";
+import { useState as useState3, useRef as useRef9 } from "react";
+import styled17 from "styled-components";
 import { disabledSelector as disabledSelector4 } from "@charcoal-ui/utils";
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-import { useEffect as useEffect3, useRef as useRef5 } from "react";
+import { useEffect as useEffect6, useRef as useRef7 } from "react";
 
 // src/components/DropdownSelector/Popover/index.tsx
-import { useRef as useRef4 } 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";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import styled15 from "styled-components";
+
+// 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/DropdownSelector/Popover/index.tsx
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = useRef4(null);
+  const defaultPopoverRef = useRef6(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const { popoverProps, underlayProps } = usePopover(
     {
@@ -1604,18 +1698,30 @@ function Popover(props) {
       toggle: _empty
     }
   );
+  const modalBackground = useContext6(ModalBackgroundContext);
+  usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
   return /* @__PURE__ */ jsxs9(Overlay2, { portalContainer: document.body, children: [
-    /* @__PURE__ */ jsx16("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }),
+    /* @__PURE__ */ jsx17(
+      "div",
+      {
+        ...underlayProps,
+        style: {
+          position: "fixed",
+          zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
+          inset: 0
+        }
+      }
+    ),
     /* @__PURE__ */ jsxs9(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
-      /* @__PURE__ */ jsx16(DismissButton, { onDismiss: () => props.onClose() }),
+      /* @__PURE__ */ jsx17(DismissButton, { onDismiss: () => props.onClose() }),
       props.children,
-      /* @__PURE__ */ jsx16(DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ jsx17(DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
-var DropdownPopoverDiv = styled14.div`
+var DropdownPopoverDiv = styled15.div`
   margin: 4px 0;
   list-style: none;
   overflow: auto;
@@ -1630,27 +1736,26 @@ var DropdownPopoverDiv = styled14.div`
 `;
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function DropdownPopover({ children, ...props }) {
-  const ref = useRef5(null);
-  useEffect3(() => {
+  const ref = useRef7(null);
+  useEffect6(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  useEffect3(() => {
+  useEffect6(() => {
     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__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Popover,
     {
       isOpen: props.isOpen,
@@ -1663,12 +1768,12 @@ function DropdownPopover({ children, ...props }) {
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
-import * as React8 from "react";
+import * as React10 from "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) {
@@ -1690,12 +1795,12 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { useRef as useRef6 } from "react";
-import styled15 from "styled-components";
+import { useRef as useRef8 } from "react";
+import styled16 from "styled-components";
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-import { createContext as createContext5 } from "react";
-var MenuListContext = createContext5({
+import { createContext as createContext6 } from "react";
+var MenuListContext = createContext6({
   root: void 0,
   value: "",
   values: [],
@@ -1704,12 +1809,12 @@ var MenuListContext = createContext5({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-import * as React9 from "react";
+import * as React11 from "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;
@@ -1723,12 +1828,12 @@ function getValuesRecursive(children, values = []) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function MenuList(props) {
-  const root = useRef6(null);
+  const root = useRef8(null);
   const values = [];
   getValuesRecursive(props.children, values);
-  return /* @__PURE__ */ jsx18(StyledUl, { ref: root, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(StyledUl, { ref: root, children: /* @__PURE__ */ jsx19(
     MenuListContext.Provider,
     {
       value: {
@@ -1743,20 +1848,20 @@ function MenuList(props) {
     }
   ) });
 }
-var StyledUl = styled15.ul`
+var StyledUl = styled16.ul`
   padding: 0;
   margin: 0;
 `;
 
 // src/components/DropdownSelector/index.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector(props) {
-  const triggerRef = useRef7(null);
+  const triggerRef = useRef9(null);
   const [isOpen, setIsOpen] = useState3(false);
   const preview = findPreviewRecursive(props.children, props.value);
   return /* @__PURE__ */ jsxs10(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
-    props.showLabel === true && /* @__PURE__ */ jsx19(
+    props.showLabel === true && /* @__PURE__ */ jsx20(
       DropdownFieldLabel,
       {
         label: props.label,
@@ -1778,19 +1883,19 @@ function DropdownSelector(props) {
         ref: triggerRef,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx19(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
-          /* @__PURE__ */ jsx19(DropdownButtonIcon, { name: "16/Menu" })
+          /* @__PURE__ */ jsx20(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
+          /* @__PURE__ */ jsx20(DropdownButtonIcon, { name: "16/Menu" })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx19(
+    isOpen && /* @__PURE__ */ jsx20(
       DropdownPopover,
       {
         isOpen,
         onClose: () => setIsOpen(false),
         triggerRef,
         value: props.value,
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx20(
           MenuList,
           {
             value: props.value,
@@ -1803,10 +1908,10 @@ function DropdownSelector(props) {
         )
       }
     ),
-    props.assistiveText !== void 0 && /* @__PURE__ */ jsx19(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ jsx20(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = styled16.div`
+var DropdownSelectorRoot = styled17.div`
   display: inline-block;
   width: 100%;
 
@@ -1815,12 +1920,12 @@ var DropdownSelectorRoot = styled16.div`
     ${theme((o) => o.disabled)}
   }
 `;
-var DropdownFieldLabel = styled16(FieldLabel_default)`
+var DropdownFieldLabel = styled17(FieldLabel_default)`
   width: 100%;
 
   ${theme((o) => o.margin.bottom(8))}
 `;
-var DropdownButton = styled16.button`
+var DropdownButton = styled17.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1843,15 +1948,15 @@ var DropdownButton = styled16.button`
   invalid === true && o.outline.assertive
 ])}
 `;
-var DropdownButtonText = styled16.span`
+var DropdownButtonText = styled17.span`
   text-align: left;
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
-var DropdownButtonIcon = styled16(Icon_default)`
+var DropdownButtonIcon = styled17(Icon_default)`
   ${theme((o) => [o.font.text2])}
 `;
-var AssertiveText = styled16.div`
+var AssertiveText = styled17.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
@@ -1860,19 +1965,19 @@ var AssertiveText = styled16.div`
 `;
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-import styled18 from "styled-components";
+import styled19 from "styled-components";
 
 // src/components/DropdownSelector/ListItem/index.tsx
-import styled17 from "styled-components";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import styled18 from "styled-components";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function ListItem(props) {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx20(StyledLi, { role: "option", children: /* @__PURE__ */ jsx20(ItemDiv, { ...rest, children: props.children }) });
+  return /* @__PURE__ */ jsx21(StyledLi, { role: "option", children: /* @__PURE__ */ jsx21(ItemDiv, { ...rest, children: props.children }) });
 }
-var StyledLi = styled17.li`
+var StyledLi = styled18.li`
   list-style: none;
 `;
-var ItemDiv = styled17.div`
+var ItemDiv = styled18.div`
   display: flex;
   align-items: center;
   min-height: 40px;
@@ -1893,7 +1998,7 @@ var ItemDiv = styled17.div`
 `;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-import { useCallback as useCallback5, useContext as useContext5 } from "react";
+import { useCallback as useCallback5, useContext as useContext7 } from "react";
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1926,7 +2031,7 @@ function scrollIfNeeded(element) {
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
 function useMenuItemHandleKeyDown(value) {
-  const { setValue, root, values } = useContext5(MenuListContext);
+  const { setValue, root, values } = useContext7(MenuListContext);
   const setContextValue = useCallback5(() => {
     if (value !== void 0)
       setValue(value);
@@ -1958,11 +2063,11 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function MenuItem(props) {
   const { children, as, ...rest } = props;
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     ListItem,
     {
       ...rest,
@@ -1978,86 +2083,86 @@ function MenuItem(props) {
 }
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-import { useContext as useContext6 } from "react";
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useContext as useContext8 } from "react";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 function DropdownMenuItem(props) {
-  const { value: ctxValue } = useContext6(MenuListContext);
+  const { value: ctxValue } = useContext8(MenuListContext);
   const isSelected = props.value === ctxValue;
   const { children, ...rest } = props;
   return /* @__PURE__ */ jsxs11(MenuItem, { ...rest, children: [
-    isSelected && /* @__PURE__ */ jsx22(Text2ColorIcon, { name: "16/Check" }),
-    /* @__PURE__ */ jsx22(StyledSpan, { isSelected, children: props.children })
+    isSelected && /* @__PURE__ */ jsx23(Text2ColorIcon, { name: "16/Check" }),
+    /* @__PURE__ */ jsx23(StyledSpan, { isSelected, children: props.children })
   ] });
 }
-var StyledSpan = styled18.span`
+var StyledSpan = styled19.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 = styled18(Icon_default)`
+var Text2ColorIcon = styled19(Icon_default)`
   ${theme((o) => [o.font.text2])}
   padding-right: 4px;
 `;
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-import styled19 from "styled-components";
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import styled20 from "styled-components";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 function MenuItemGroup(props) {
   return /* @__PURE__ */ jsxs12(StyledLi2, { role: "presentation", children: [
-    /* @__PURE__ */ jsx23(TextSpan, { children: props.text }),
-    /* @__PURE__ */ jsx23(StyledUl2, { role: "group", children: props.children })
+    /* @__PURE__ */ jsx24(TextSpan, { children: props.text }),
+    /* @__PURE__ */ jsx24(StyledUl2, { role: "group", children: props.children })
   ] });
 }
-var TextSpan = styled19.span`
+var TextSpan = styled20.span`
   display: block;
   color: ${({ theme: theme3 }) => theme3.color.text3};
   font-size: 12px;
   font-weight: bold;
   padding: 12px 0 8px 16px;
 `;
-var StyledUl2 = styled19.ul`
+var StyledUl2 = styled20.ul`
   padding-left: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   overflow: hidden;
 `;
-var StyledLi2 = styled19.li`
+var StyledLi2 = styled20.li`
   display: block;
 `;
 
 // src/components/SegmentedControl/index.tsx
-import { forwardRef as forwardRef14, memo as memo6, useMemo as useMemo2, useRef as useRef8 } from "react";
+import { forwardRef as forwardRef15, memo as memo6, useMemo as useMemo2, useRef as useRef10 } from "react";
 import { useRadioGroupState } from "react-stately";
 import {
   useRadio,
   useRadioGroup
 } from "@react-aria/radio";
-import styled20 from "styled-components";
+import styled21 from "styled-components";
 import { disabledSelector as disabledSelector5 } from "@charcoal-ui/utils";
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-import { createContext as createContext6, useContext as useContext7 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var RadioContext = createContext6(null);
+import { createContext as createContext7, useContext as useContext9 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var RadioContext = createContext7(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx24(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx25(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = useContext7(RadioContext);
+  const state = useContext9(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
-var SegmentedControl = forwardRef14(
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+var SegmentedControl = forwardRef15(
   function SegmentedControlInner(props, ref) {
     const ariaRadioGroupProps = useMemo2(
       () => ({
@@ -2076,13 +2181,13 @@ var SegmentedControl = forwardRef14(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
     }, [props.data]);
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx26(
       SegmentedControlRoot,
       {
         ref,
         ...radioGroupProps,
         className: props.className,
-        children: /* @__PURE__ */ jsx25(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx25(
+        children: /* @__PURE__ */ jsx26(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx26(
           Segmented,
           {
             value: item.value,
@@ -2098,7 +2203,7 @@ var SegmentedControl = forwardRef14(
 var SegmentedControl_default = memo6(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = useRef8(null);
+  const ref = useRef10(null);
   const ariaRadioProps = useMemo2(
     () => ({
       value: props.value,
@@ -2118,19 +2223,19 @@ var Segmented = (props) => {
       "aria-disabled": isDisabled || state.isReadOnly,
       checked: isSelected,
       children: [
-        /* @__PURE__ */ jsx25(SegmentedInput, { ...inputProps, ref }),
-        /* @__PURE__ */ jsx25(RadioLabel2, { children: /* @__PURE__ */ jsx25(SegmentedLabelInner, { children: props.children }) })
+        /* @__PURE__ */ jsx26(SegmentedInput, { ...inputProps, ref }),
+        /* @__PURE__ */ jsx26(RadioLabel2, { children: /* @__PURE__ */ jsx26(SegmentedLabelInner, { children: props.children }) })
       ]
     }
   );
 };
-var SegmentedControlRoot = styled20.div`
+var SegmentedControlRoot = styled21.div`
   display: inline-flex;
   align-items: center;
 
   ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
 `;
-var SegmentedRoot = styled20.label`
+var SegmentedRoot = styled21.label`
   position: relative;
   display: flex;
   align-items: center;
@@ -2149,7 +2254,7 @@ var SegmentedRoot = styled20.label`
   checked === true ? o.font.text5 : o.font.text2
 ])}
 `;
-var SegmentedInput = styled20.input`
+var SegmentedInput = styled21.input`
   position: absolute;
 
   height: 0px;
@@ -2163,25 +2268,25 @@ var SegmentedInput = styled20.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = styled20.div`
+var RadioLabel2 = styled21.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = styled20.div`
+var SegmentedLabelInner = styled21.div`
   ${theme((o) => [o.typography(14)])}
 `;
 
 // src/components/Checkbox/index.tsx
-import { forwardRef as forwardRef15, memo as memo7, useMemo as useMemo3 } from "react";
-import styled21, { css as css5 } from "styled-components";
+import { forwardRef as forwardRef16, memo as memo7, useMemo as useMemo3 } from "react";
+import styled22, { css as css7 } from "styled-components";
 import { useCheckbox } from "@react-aria/checkbox";
 import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { disabledSelector as disabledSelector6, px as px3 } from "@charcoal-ui/utils";
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
-var Checkbox = forwardRef15(
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+var Checkbox = forwardRef16(
   function CheckboxInner({ invalid = false, ...props }, ref) {
     const ariaCheckboxProps = useMemo3(
       () => ({
@@ -2200,18 +2305,18 @@ var Checkbox = forwardRef15(
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
     return /* @__PURE__ */ jsxs14(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
       /* @__PURE__ */ jsxs14(CheckboxRoot, { children: [
-        /* @__PURE__ */ jsx26(CheckboxInput, { type: "checkbox", ...inputProps, invalid }),
-        /* @__PURE__ */ jsx26(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ jsx26(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
+        /* @__PURE__ */ jsx27(CheckboxInput, { type: "checkbox", ...inputProps, invalid }),
+        /* @__PURE__ */ jsx27(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ jsx27(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
       ] }),
-      "children" in props && /* @__PURE__ */ jsx26(InputLabel, { children: props.children })
+      "children" in props && /* @__PURE__ */ jsx27(InputLabel, { children: props.children })
     ] });
   }
 );
 var Checkbox_default = memo7(Checkbox);
-var hiddenCss = css5`
+var hiddenCss = css7`
   visibility: hidden;
 `;
-var InputRoot = styled21.label`
+var InputRoot = styled22.label`
   position: relative;
   display: flex;
 
@@ -2223,10 +2328,10 @@ var InputRoot = styled21.label`
   gap: ${({ theme: theme3 }) => px3(theme3.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
-var CheckboxRoot = styled21.div`
+var CheckboxRoot = styled22.div`
   position: relative;
 `;
-var CheckboxInput = styled21.input`
+var CheckboxInput = styled22.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -2250,7 +2355,7 @@ var CheckboxInput = styled21.input`
     transition: all 0.2s !important;
   }
 `;
-var CheckboxInputOverlay = styled21.div`
+var CheckboxInputOverlay = styled22.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -2263,7 +2368,7 @@ var CheckboxInputOverlay = styled21.div`
 
   ${({ checked }) => checked !== true && hiddenCss};
 `;
-var InputLabel = styled21.div`
+var InputLabel = styled22.div`
   ${theme((o) => [o.font.text2])}
 
   font-size: 14px;
@@ -2272,17 +2377,17 @@ var InputLabel = styled21.div`
 `;
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef16, memo as memo8, useMemo as useMemo4 } from "react";
+import { forwardRef as forwardRef17, memo as memo8, useMemo as useMemo4 } from "react";
 import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import styled22, { css as css6 } from "styled-components";
+import styled23, { css as css8 } from "styled-components";
 import { disabledSelector as disabledSelector7, px as px4 } from "@charcoal-ui/utils";
 import { useButton } from "@react-aria/button";
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = forwardRef16(
+var TagItem = forwardRef17(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2314,13 +2419,13 @@ var TagItem = forwardRef16(
         ...buttonProps,
         className,
         children: [
-          /* @__PURE__ */ jsx27(Background, { bgColor, bgImage, status }),
+          /* @__PURE__ */ jsx28(Background, { bgColor, bgImage, status }),
           /* @__PURE__ */ jsxs15(Inner, { children: [
             /* @__PURE__ */ jsxs15(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
-              hasTranslatedLabel && /* @__PURE__ */ jsx27(TranslatedLabel, { children: /* @__PURE__ */ jsx27(Label3, { children: translatedLabel }) }),
-              /* @__PURE__ */ jsx27(Label3, { children: label })
+              hasTranslatedLabel && /* @__PURE__ */ jsx28(TranslatedLabel, { children: /* @__PURE__ */ jsx28(Label3, { children: translatedLabel }) }),
+              /* @__PURE__ */ jsx28(Label3, { children: label })
             ] }),
-            status === "active" && /* @__PURE__ */ jsx27(Icon_default, { name: "16/Remove" })
+            status === "active" && /* @__PURE__ */ jsx28(Icon_default, { name: "16/Remove" })
           ] })
         ]
       }
@@ -2328,7 +2433,7 @@ var TagItem = forwardRef16(
   }
 );
 var TagItem_default = memo8(TagItem);
-var TagItemRoot = styled22.a`
+var TagItemRoot = styled23.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2353,7 +2458,7 @@ var TagItemRoot = styled22.a`
     cursor: default;
   }
 `;
-var Background = styled22.div`
+var Background = styled23.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2364,7 +2469,7 @@ var Background = styled22.div`
   background-color: ${({ bgColor }) => bgColor};
   ${({ status }) => status === "inactive" && theme((o) => o.bg.surface3)}
 
-  ${({ bgImage }) => bgImage !== void 0 && css6`
+  ${({ bgImage }) => bgImage !== void 0 && css8`
       ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
@@ -2380,25 +2485,25 @@ var Background = styled22.div`
       }
     `}
 `;
-var Inner = styled22.div`
+var Inner = styled23.div`
   display: inline-flex;
   gap: ${({ theme: theme3 }) => px4(theme3.spacing[8])};
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = css6`
+var labelCSS = css8`
   ${theme((o) => [o.typography(14).bold])}
 `;
-var translateLabelCSS = css6`
+var translateLabelCSS = css8`
   display: flex;
   align-items: center;
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = styled22.div`
+var LabelWrapper = styled23.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = styled22.span`
+var Label3 = styled23.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2407,7 +2512,7 @@ var Label3 = styled22.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = styled22.div`
+var TranslatedLabel = styled23.div`
   ${theme((o) => [o.typography(12).bold])}
 `;
 export {