@charcoal-ui/react 3.0.0-beta.2 → 3.0.0-beta.3

package/dist/index.cjs.js

@@ -31,11 +31,13 @@ __export(src_exports, {
   Checkbox: () => Checkbox_default,
   Clickable: () => Clickable_default,
   ComponentAbstraction: () => ComponentAbstraction,
+  DropdownMenuItem: () => DropdownMenuItem,
   DropdownSelector: () => DropdownSelector,
   Icon: () => Icon_default,
   IconButton: () => IconButton_default,
   LoadingSpinner: () => LoadingSpinner,
   LoadingSpinnerIcon: () => LoadingSpinnerIcon,
+  MenuItemGroup: () => MenuItemGroup,
   Modal: () => Modal,
   ModalAlign: () => ModalAlign,
   ModalBody: () => ModalBody,
@@ -43,7 +45,6 @@ __export(src_exports, {
   ModalHeader: () => ModalHeader,
   MultiSelect: () => MultiSelect,
   MultiSelectGroup: () => MultiSelectGroup,
-  OptionItem: () => OptionItem,
   OverlayProvider: () => import_overlays.OverlayProvider,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
@@ -57,23 +58,25 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/core/ComponentAbstraction.tsx
-var import_react = __toESM(require("react"));
-var DefaultLink = import_react.default.forwardRef(
+var import_react = require("react");
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DefaultLink = React.forwardRef(
   function DefaultLink2({ to, children, ...rest }, ref) {
-    return /* @__PURE__ */ import_react.default.createElement("a", { href: to, ref, ...rest }, children);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: to, ref, ...rest, children });
   }
 );
 var DefaultValue = {
   Link: DefaultLink
 };
-var ComponentAbstractionContext = import_react.default.createContext(DefaultValue);
+var ComponentAbstractionContext = React.createContext(DefaultValue);
 function ComponentAbstraction({ children, components }) {
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     ComponentAbstractionContext.Provider,
     {
-      value: { ...DefaultValue, ...components }
-    },
-    children
+      value: { ...DefaultValue, ...components },
+      children
+    }
   );
 }
 function useComponentAbstraction() {
@@ -87,9 +90,9 @@ var import_ssr = require("@react-aria/ssr");
 var import_overlays = require("@react-aria/overlays");
 
 // src/core/CharcoalProvider.tsx
-var import_react2 = __toESM(require("react"));
 var import_styled_components = require("styled-components");
 var import_styled = require("@charcoal-ui/styled");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function CharcoalProvider({
   themeMap,
   defaultTheme = themeMap[":root"],
@@ -97,11 +100,14 @@ function CharcoalProvider({
   injectTokens = true,
   children
 }) {
-  return /* @__PURE__ */ import_react2.default.createElement(import_ssr.SSRProvider, null, /* @__PURE__ */ import_react2.default.createElement(import_styled_components.ThemeProvider, { theme: defaultTheme }, injectTokens && /* @__PURE__ */ import_react2.default.createElement(import_styled.TokenInjector, { theme: themeMap }), /* @__PURE__ */ import_react2.default.createElement(ComponentAbstraction, { components }, /* @__PURE__ */ import_react2.default.createElement(import_overlays.OverlayProvider, null, children))));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ssr.SSRProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_styled_components.ThemeProvider, { theme: defaultTheme, children: [
+    injectTokens && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_styled.TokenInjector, { theme: themeMap }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentAbstraction, { components, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_overlays.OverlayProvider, { children }) })
+  ] }) });
 }
 
 // src/components/Button/index.tsx
-var import_react4 = __toESM(require("react"));
+var import_react2 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
 
 // src/_lib/index.ts
@@ -117,15 +123,16 @@ var import_styled2 = require("@charcoal-ui/styled");
 var theme = (0, import_styled2.createTheme)(import_styled_components2.default);
 
 // src/components/Clickable/index.tsx
-var import_react3 = __toESM(require("react"));
+var React2 = __toESM(require("react"));
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_utils = require("@charcoal-ui/utils");
-var Clickable = import_react3.default.forwardRef(
+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__ */ import_react3.default.createElement(
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         A,
         {
           ...rest,
@@ -136,7 +143,7 @@ var Clickable = import_react3.default.forwardRef(
         }
       );
     } else {
-      return /* @__PURE__ */ import_react3.default.createElement(Button, { ...props, ref });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...props, ref });
     }
   }
 );
@@ -201,7 +208,8 @@ var A = import_styled_components3.default.span`
 `;
 
 // src/components/Button/index.tsx
-var Button2 = import_react4.default.forwardRef(function Button3({
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Button2 = (0, import_react2.forwardRef)(function Button3({
   children,
   variant = "Default",
   size = "M",
@@ -209,7 +217,7 @@ var Button2 = import_react4.default.forwardRef(function Button3({
   disabled = false,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     StyledButton,
     {
       ...rest,
@@ -217,9 +225,9 @@ var Button2 = import_react4.default.forwardRef(function Button3({
       variant,
       size,
       fullWidth: fixed,
-      ref
-    },
-    children
+      ref,
+      children
+    }
   );
 });
 var Button_default = Button2;
@@ -288,12 +296,13 @@ function sizeToProps(size) {
 }
 
 // src/components/IconButton/index.tsx
-var import_react5 = __toESM(require("react"));
+var import_react3 = require("react");
 var import_styled_components5 = __toESM(require("styled-components"));
-var IconButton = import_react5.default.forwardRef(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var IconButton = (0, import_react3.forwardRef)(
   function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
     validateIconSize(size, icon);
-    return /* @__PURE__ */ import_react5.default.createElement(StyledIconButton, { ...rest, ref, variant, size }, /* @__PURE__ */ import_react5.default.createElement("pixiv-icon", { name: icon }));
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledIconButton, { ...rest, ref, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon }) });
   }
 );
 var IconButton_default = IconButton;
@@ -372,10 +381,12 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-var import_react6 = __toESM(require("react"));
+var import_react4 = require("react");
+var React3 = __toESM(require("react"));
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_warning = __toESM(require("warning"));
 var import_utils2 = require("@charcoal-ui/utils");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Radio({
   value,
   forceChecked = false,
@@ -389,7 +400,7 @@ function Radio({
     readonly,
     hasError,
     onChange
-  } = (0, import_react6.useContext)(RadioGroupContext);
+  } = (0, import_react4.useContext)(RadioGroupContext);
   (0, import_warning.default)(
     name !== void 0,
     `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`
@@ -397,23 +408,26 @@ function Radio({
   const isSelected = value === selected;
   const isDisabled = disabled || isParentDisabled;
   const isReadonly = readonly && !isSelected;
-  const handleChange = (0, import_react6.useCallback)(
+  const handleChange = (0, import_react4.useCallback)(
     (e) => {
       onChange(e.currentTarget.value);
     },
     [onChange]
   );
-  return /* @__PURE__ */ import_react6.default.createElement(RadioRoot, { "aria-disabled": isDisabled || isReadonly }, /* @__PURE__ */ import_react6.default.createElement(
-    RadioInput,
-    {
-      name,
-      value,
-      checked: forceChecked || isSelected,
-      hasError,
-      onChange: handleChange,
-      disabled: isDisabled || isReadonly
-    }
-  ), children != null && /* @__PURE__ */ import_react6.default.createElement(RadioLabel, null, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(RadioRoot, { "aria-disabled": isDisabled || isReadonly, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      RadioInput,
+      {
+        name,
+        value,
+        checked: forceChecked || isSelected,
+        hasError,
+        onChange: handleChange,
+        disabled: isDisabled || isReadonly
+      }
+    ),
+    children != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioLabel, { children })
+  ] });
 }
 var RadioRoot = import_styled_components6.default.label`
   display: grid;
@@ -479,7 +493,7 @@ var StyledRadioGroup = import_styled_components6.default.div`
   grid-template-columns: 1fr;
   grid-gap: ${({ theme: theme4 }) => (0, import_utils2.px)(theme4.spacing[8])};
 `;
-var RadioGroupContext = import_react6.default.createContext({
+var RadioGroupContext = React3.createContext({
   name: void 0,
   selected: void 0,
   disabled: false,
@@ -502,13 +516,13 @@ function RadioGroup({
   hasError,
   children
 }) {
-  const handleChange = (0, import_react6.useCallback)(
+  const handleChange = (0, import_react4.useCallback)(
     (next) => {
       onChange(next);
     },
     [onChange]
   );
-  return /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     RadioGroupContext.Provider,
     {
       value: {
@@ -518,36 +532,36 @@ function RadioGroup({
         readonly: readonly ?? false,
         hasError: hasError ?? false,
         onChange: handleChange
-      }
-    },
-    /* @__PURE__ */ import_react6.default.createElement(
-      StyledRadioGroup,
-      {
-        role: "radiogroup",
-        "aria-orientation": "vertical",
-        "aria-label": label,
-        "aria-invalid": hasError,
-        className
       },
-      children
-    )
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        StyledRadioGroup,
+        {
+          role: "radiogroup",
+          "aria-orientation": "vertical",
+          "aria-label": label,
+          "aria-invalid": hasError,
+          className,
+          children
+        }
+      )
+    }
   );
 }
 
 // src/components/MultiSelect/index.tsx
-var import_react8 = __toESM(require("react"));
+var import_react6 = require("react");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_warning2 = __toESM(require("warning"));
 var import_utils3 = require("@charcoal-ui/utils");
 
 // src/components/MultiSelect/context.ts
-var import_react7 = require("react");
-var MultiSelectGroupContext = (0, import_react7.createContext)({
+var import_react5 = require("react");
+var MultiSelectGroupContext = (0, import_react5.createContext)({
   name: void 0,
   selected: [],
   disabled: false,
   readonly: false,
-  hasError: false,
+  invalid: false,
   onChange() {
     throw new Error(
       "Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?"
@@ -556,9 +570,9 @@ var MultiSelectGroupContext = (0, import_react7.createContext)({
 });
 
 // src/components/MultiSelect/index.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function MultiSelect({
   value,
-  forceChecked = false,
   disabled = false,
   onChange,
   variant = "default",
@@ -569,16 +583,16 @@ function MultiSelect({
     selected,
     disabled: parentDisabled,
     readonly,
-    hasError,
+    invalid,
     onChange: parentOnChange
-  } = (0, import_react8.useContext)(MultiSelectGroupContext);
+  } = (0, import_react6.useContext)(MultiSelectGroupContext);
   (0, import_warning2.default)(
     name !== void 0,
     `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
   );
-  const isSelected = selected.includes(value) || forceChecked;
+  const isSelected = selected.includes(value);
   const isDisabled = disabled || parentDisabled || readonly;
-  const handleChange = (0, import_react8.useCallback)(
+  const handleChange = (0, import_react6.useCallback)(
     (event) => {
       if (!(event.currentTarget instanceof HTMLInputElement)) {
         return;
@@ -589,29 +603,33 @@ function MultiSelect({
     },
     [onChange, parentOnChange, value]
   );
-  return /* @__PURE__ */ import_react8.default.createElement(MultiSelectRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ import_react8.default.createElement(
-    MultiSelectInput,
-    {
-      ...{
-        name,
-        value,
-        hasError
-      },
-      checked: isSelected,
-      disabled: isDisabled,
-      onChange: handleChange,
-      overlay: variant === "overlay",
-      "aria-invalid": hasError
-    }
-  ), /* @__PURE__ */ import_react8.default.createElement(
-    MultiSelectInputOverlay,
-    {
-      overlay: variant === "overlay",
-      hasError,
-      "aria-hidden": true
-    },
-    /* @__PURE__ */ import_react8.default.createElement("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
-  ), Boolean(children) && /* @__PURE__ */ import_react8.default.createElement(MultiSelectLabel, null, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(MultiSelectRoot, { "aria-disabled": isDisabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      MultiSelectInput,
+      {
+        ...{
+          name,
+          value,
+          invalid
+        },
+        checked: isSelected,
+        disabled: isDisabled,
+        onChange: handleChange,
+        overlay: variant === "overlay",
+        "aria-invalid": invalid
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      MultiSelectInputOverlay,
+      {
+        overlay: variant === "overlay",
+        invalid,
+        "aria-hidden": true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
+      }
+    ),
+    Boolean(children) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSelectLabel, { children })
+  ] });
 }
 var MultiSelectRoot = import_styled_components7.default.label`
   display: grid;
@@ -642,10 +660,10 @@ var MultiSelectInput = import_styled_components7.default.input.attrs({ type: "ch
       ${theme((o) => o.bg.brand.hover.press)}
     }
 
-    ${({ hasError, overlay }) => theme((o) => [
+    ${({ invalid, overlay }) => theme((o) => [
   o.bg.text3.hover.press,
   o.borderRadius("oval"),
-  hasError && !overlay && o.outline.assertive,
+  invalid && !overlay && o.outline.assertive,
   overlay && o.bg.surface4
 ])};
   }
@@ -659,12 +677,12 @@ var MultiSelectInputOverlay = import_styled_components7.default.div`
   align-items: center;
   justify-content: center;
 
-  ${({ hasError, overlay }) => theme((o) => [
+  ${({ invalid, overlay }) => theme((o) => [
   o.width.px(24),
   o.height.px(24),
   o.borderRadius("oval"),
   o.font.text5,
-  hasError && overlay && o.outline.assertive
+  invalid && overlay && o.outline.assertive
 ])}
 
   ${({ overlay }) => overlay && import_styled_components7.css`
@@ -676,15 +694,15 @@ var MultiSelectInputOverlay = import_styled_components7.default.div`
 function MultiSelectGroup({
   className,
   name,
-  ariaLabel,
+  label,
   selected,
   onChange,
   disabled = false,
   readonly = false,
-  hasError = false,
+  invalid = false,
   children
 }) {
-  const handleChange = (0, import_react8.useCallback)(
+  const handleChange = (0, import_react6.useCallback)(
     (payload) => {
       const index = selected.indexOf(payload.value);
       if (payload.selected) {
@@ -699,7 +717,7 @@ function MultiSelectGroup({
     },
     [onChange, selected]
   );
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     MultiSelectGroupContext.Provider,
     {
       value: {
@@ -707,31 +725,24 @@ function MultiSelectGroup({
         selected: Array.from(new Set(selected)),
         disabled,
         readonly,
-        hasError,
+        invalid,
         onChange: handleChange
-      }
-    },
-    /* @__PURE__ */ import_react8.default.createElement(
-      "div",
-      {
-        className,
-        "aria-label": ariaLabel,
-        "data-testid": "SelectGroup"
       },
-      children
-    )
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, "aria-label": label, "data-testid": "SelectGroup", children })
+    }
   );
 }
 
 // src/components/Switch/index.tsx
 var import_switch = require("@react-aria/switch");
-var import_react9 = __toESM(require("react"));
+var import_react7 = require("react");
 var import_react_stately = require("react-stately");
 var import_styled_components8 = __toESM(require("styled-components"));
 var import_utils4 = require("@charcoal-ui/utils");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function SwitchCheckbox(props) {
   const { disabled, className } = props;
-  const ariaSwitchProps = (0, import_react9.useMemo)(
+  const ariaSwitchProps = (0, import_react7.useMemo)(
     () => ({
       ...props,
       "aria-label": "children" in props ? void 0 : props.label,
@@ -741,11 +752,14 @@ function SwitchCheckbox(props) {
     [props]
   );
   const state = (0, import_react_stately.useToggleState)(ariaSwitchProps);
-  const ref = (0, import_react9.useRef)(null);
+  const ref = (0, import_react7.useRef)(null);
   const {
     inputProps: { className: _className, type: _type, ...rest }
   } = (0, import_switch.useSwitch)(ariaSwitchProps, state, ref);
-  return /* @__PURE__ */ import_react9.default.createElement(Label, { className, "aria-disabled": disabled }, /* @__PURE__ */ import_react9.default.createElement(SwitchInput, { ...rest, ref }), "children" in props ? /* @__PURE__ */ import_react9.default.createElement(LabelInner, null, props.children) : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Label, { className, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SwitchInput, { ...rest, ref }),
+    "children" in props ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LabelInner, { children: props.children }) : void 0
+  ] });
 }
 var Label = import_styled_components8.default.label`
   display: inline-grid;
@@ -838,14 +852,16 @@ var SwitchInput = import_styled_components8.default.input.attrs({
 // src/components/TextField/index.tsx
 var import_textfield = require("@react-aria/textfield");
 var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react11 = __toESM(require("react"));
+var import_react8 = require("react");
+var React5 = __toESM(require("react"));
 var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/components/FieldLabel/index.tsx
-var import_react10 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_styled_components9 = __toESM(require("styled-components"));
 var import_styled8 = require("@charcoal-ui/styled");
-var FieldLabel = import_react10.default.forwardRef(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var FieldLabel = React4.forwardRef(
   function FieldLabel2({
     style,
     className,
@@ -855,7 +871,11 @@ var FieldLabel = import_react10.default.forwardRef(
     subLabel,
     ...labelProps
   }, ref) {
-    return /* @__PURE__ */ import_react10.default.createElement(FieldLabelWrapper, { style, className }, /* @__PURE__ */ import_react10.default.createElement(Label2, { ref, ...labelProps }, label), required && /* @__PURE__ */ import_react10.default.createElement(RequiredText, null, requiredText), /* @__PURE__ */ import_react10.default.createElement(SubLabelClickable, null, /* @__PURE__ */ import_react10.default.createElement("span", null, subLabel)));
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FieldLabelWrapper, { style, className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label2, { ref, ...labelProps, children: label }),
+      required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RequiredText, { children: requiredText }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SubLabelClickable, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: subLabel }) })
+    ] });
   }
 );
 var FieldLabel_default = FieldLabel;
@@ -888,6 +908,7 @@ var FieldLabelWrapper = import_styled_components9.default.div`
 
 // src/components/TextField/index.tsx
 var import_styled9 = require("@charcoal-ui/styled");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var theme3 = (0, import_styled9.createTheme)(import_styled_components10.default);
 function mergeRefs(...refs) {
   return (value) => {
@@ -904,13 +925,13 @@ function mergeRefs(...refs) {
 function countCodePointsInString(string) {
   return Array.from(string).length;
 }
-var TextField = import_react11.default.forwardRef(
+var TextField = React5.forwardRef(
   function TextField2(props, ref) {
-    return props.multiline !== void 0 && props.multiline ? /* @__PURE__ */ import_react11.default.createElement(MultiLineTextField, { ref, ...props }) : /* @__PURE__ */ import_react11.default.createElement(SingleLineTextField, { ref, ...props });
+    return props.multiline !== void 0 && props.multiline ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MultiLineTextField, { ref, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SingleLineTextField, { ref, ...props });
   }
 );
 var TextField_default = TextField;
-var SingleLineTextField = import_react11.default.forwardRef(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef4) {
+var SingleLineTextField = React5.forwardRef(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef12) {
   const {
     className,
     showLabel = false,
@@ -927,14 +948,14 @@ var SingleLineTextField = import_react11.default.forwardRef(function SingleLineT
     suffix = null
   } = props;
   const { visuallyHiddenProps } = (0, import_visually_hidden.useVisuallyHidden)();
-  const ariaRef = (0, import_react11.useRef)(null);
-  const prefixRef = (0, import_react11.useRef)(null);
-  const suffixRef = (0, import_react11.useRef)(null);
-  const [count, setCount] = (0, import_react11.useState)(countCodePointsInString(props.value ?? ""));
-  const [prefixWidth, setPrefixWidth] = (0, import_react11.useState)(0);
-  const [suffixWidth, setSuffixWidth] = (0, import_react11.useState)(0);
+  const ariaRef = (0, import_react8.useRef)(null);
+  const prefixRef = (0, import_react8.useRef)(null);
+  const suffixRef = (0, import_react8.useRef)(null);
+  const [count, setCount] = (0, import_react8.useState)(countCodePointsInString(props.value ?? ""));
+  const [prefixWidth, setPrefixWidth] = (0, import_react8.useState)(0);
+  const [suffixWidth, setSuffixWidth] = (0, import_react8.useState)(0);
   const nonControlled = props.value === void 0;
-  const handleChange = (0, import_react11.useCallback)(
+  const handleChange = (0, import_react8.useCallback)(
     (value) => {
       const count2 = countCodePointsInString(value);
       if (maxLength !== void 0 && count2 > maxLength) {
@@ -947,7 +968,7 @@ var SingleLineTextField = import_react11.default.forwardRef(function SingleLineT
     },
     [maxLength, nonControlled, onChange]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setCount(countCodePointsInString(props.value ?? ""));
   }, [props.value]);
   const { inputProps, labelProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
@@ -963,7 +984,7 @@ var SingleLineTextField = import_react11.default.forwardRef(function SingleLineT
     },
     ariaRef
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const prefixObserver = new ResizeObserver((entries) => {
       setPrefixWidth(entries[0].contentRect.width);
     });
@@ -981,35 +1002,46 @@ var SingleLineTextField = import_react11.default.forwardRef(function SingleLineT
       prefixObserver.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ import_react11.default.createElement(TextFieldRoot, { className, isDisabled: disabled }, /* @__PURE__ */ import_react11.default.createElement(
-    TextFieldLabel,
-    {
-      label,
-      requiredText,
-      required,
-      subLabel,
-      ...labelProps,
-      ...!showLabel ? visuallyHiddenProps : {}
-    }
-  ), /* @__PURE__ */ import_react11.default.createElement(StyledInputContainer, null, /* @__PURE__ */ import_react11.default.createElement(PrefixContainer, { ref: prefixRef }, /* @__PURE__ */ import_react11.default.createElement(Affix, null, prefix)), /* @__PURE__ */ import_react11.default.createElement(
-    StyledInput,
-    {
-      ref: mergeRefs(forwardRef4, ariaRef),
-      invalid,
-      extraLeftPadding: prefixWidth,
-      extraRightPadding: suffixWidth,
-      ...inputProps
-    }
-  ), /* @__PURE__ */ import_react11.default.createElement(SuffixContainer, { ref: suffixRef }, /* @__PURE__ */ import_react11.default.createElement(Affix, null, suffix), showCount && /* @__PURE__ */ import_react11.default.createElement(SingleLineCounter, null, maxLength !== void 0 ? `${count}/${maxLength}` : count))), assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ import_react11.default.createElement(
-    AssistiveText,
-    {
-      invalid,
-      ...invalid ? errorMessageProps : descriptionProps
-    },
-    assistiveText
-  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      TextFieldLabel,
+      {
+        label,
+        requiredText,
+        required,
+        subLabel,
+        ...labelProps,
+        ...!showLabel ? visuallyHiddenProps : {}
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(StyledInputContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PrefixContainer, { ref: prefixRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Affix, { children: prefix }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        StyledInput,
+        {
+          ref: mergeRefs(forwardRef12, ariaRef),
+          invalid,
+          extraLeftPadding: prefixWidth,
+          extraRightPadding: suffixWidth,
+          ...inputProps
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SuffixContainer, { ref: suffixRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Affix, { children: suffix }),
+        showCount && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+      ] })
+    ] }),
+    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      AssistiveText,
+      {
+        invalid,
+        ...invalid ? errorMessageProps : descriptionProps,
+        children: assistiveText
+      }
+    )
+  ] });
 });
-var MultiLineTextField = import_react11.default.forwardRef(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef4) {
+var MultiLineTextField = React5.forwardRef(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef12) {
   const {
     className,
     showCount = false,
@@ -1026,11 +1058,11 @@ var MultiLineTextField = import_react11.default.forwardRef(function MultiLineTex
     rows: initialRows = 4
   } = props;
   const { visuallyHiddenProps } = (0, import_visually_hidden.useVisuallyHidden)();
-  const textareaRef = (0, import_react11.useRef)(null);
-  const ariaRef = (0, import_react11.useRef)(null);
-  const [count, setCount] = (0, import_react11.useState)(countCodePointsInString(props.value ?? ""));
-  const [rows, setRows] = (0, import_react11.useState)(initialRows);
-  const syncHeight = (0, import_react11.useCallback)(
+  const textareaRef = (0, import_react8.useRef)(null);
+  const ariaRef = (0, import_react8.useRef)(null);
+  const [count, setCount] = (0, import_react8.useState)(countCodePointsInString(props.value ?? ""));
+  const [rows, setRows] = (0, import_react8.useState)(initialRows);
+  const syncHeight = (0, import_react8.useCallback)(
     (textarea) => {
       const rows2 = (`${textarea.value}
 `.match(/\n/gu)?.length ?? 0) || 1;
@@ -1039,7 +1071,7 @@ var MultiLineTextField = import_react11.default.forwardRef(function MultiLineTex
     [initialRows]
   );
   const nonControlled = props.value === void 0;
-  const handleChange = (0, import_react11.useCallback)(
+  const handleChange = (0, import_react8.useCallback)(
     (value) => {
       const count2 = countCodePointsInString(value);
       if (maxLength !== void 0 && count2 > maxLength) {
@@ -1055,7 +1087,7 @@ var MultiLineTextField = import_react11.default.forwardRef(function MultiLineTex
     },
     [autoHeight, maxLength, nonControlled, onChange, syncHeight]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setCount(countCodePointsInString(props.value ?? ""));
   }, [props.value]);
   const { inputProps, labelProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
@@ -1071,45 +1103,51 @@ var MultiLineTextField = import_react11.default.forwardRef(function MultiLineTex
     },
     ariaRef
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
   }, [autoHeight, syncHeight]);
-  return /* @__PURE__ */ import_react11.default.createElement(TextFieldRoot, { className, isDisabled: disabled }, /* @__PURE__ */ import_react11.default.createElement(
-    TextFieldLabel,
-    {
-      label,
-      requiredText,
-      required,
-      subLabel,
-      ...labelProps,
-      ...!showLabel ? visuallyHiddenProps : {}
-    }
-  ), /* @__PURE__ */ import_react11.default.createElement(
-    StyledTextareaContainer,
-    {
-      invalid,
-      rows: showCount ? rows + 1 : rows
-    },
-    /* @__PURE__ */ import_react11.default.createElement(
-      StyledTextarea,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      TextFieldLabel,
       {
-        ref: mergeRefs(textareaRef, forwardRef4, ariaRef),
-        rows,
-        noBottomPadding: showCount,
-        ...inputProps
+        label,
+        requiredText,
+        required,
+        subLabel,
+        ...labelProps,
+        ...!showLabel ? visuallyHiddenProps : {}
       }
     ),
-    showCount && /* @__PURE__ */ import_react11.default.createElement(MultiLineCounter, null, maxLength !== void 0 ? `${count}/${maxLength}` : count)
-  ), assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ import_react11.default.createElement(
-    AssistiveText,
-    {
-      invalid,
-      ...invalid ? errorMessageProps : descriptionProps
-    },
-    assistiveText
-  ));
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      StyledTextareaContainer,
+      {
+        invalid,
+        rows: showCount ? rows + 1 : rows,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            StyledTextarea,
+            {
+              ref: mergeRefs(textareaRef, forwardRef12, ariaRef),
+              rows,
+              noBottomPadding: showCount,
+              ...inputProps
+            }
+          ),
+          showCount && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        ]
+      }
+    ),
+    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      AssistiveText,
+      {
+        invalid,
+        ...invalid ? errorMessageProps : descriptionProps,
+        children: assistiveText
+      }
+    )
+  ] });
 });
 var TextFieldRoot = import_styled_components10.default.div`
   display: flex;
@@ -1260,10 +1298,11 @@ var AssistiveText = import_styled_components10.default.p`
 `;
 
 // src/components/Icon/index.tsx
-var import_react12 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_icons = require("@charcoal-ui/icons");
-var Icon = import_react12.default.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
-  return /* @__PURE__ */ import_react12.default.createElement(
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Icon = React6.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "pixiv-icon",
     {
       ref,
@@ -1278,7 +1317,8 @@ var Icon = import_react12.default.forwardRef(function IconInner({ name, scale, u
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-var import_react13 = __toESM(require("react"));
+var import_react9 = require("react");
+var React7 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_focus = require("@react-aria/focus");
@@ -1295,6 +1335,7 @@ function columnSystem(span, column, gutter) {
 var import_utils5 = require("@charcoal-ui/utils");
 var import_styled11 = require("@charcoal-ui/styled");
 var import_react_spring = require("react-spring");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
 function Modal({
   children,
@@ -1310,7 +1351,7 @@ function Modal({
     onClose,
     isOpen = false
   } = props;
-  const ref = (0, import_react13.useRef)(null);
+  const ref = (0, import_react9.useRef)(null);
   const { overlayProps, underlayProps } = (0, import_overlays2.useOverlay)(props, ref);
   const { modalProps } = (0, import_overlays2.useModalOverlay)(
     props,
@@ -1347,44 +1388,46 @@ function Modal({
   });
   const showDismiss = !isMobile || bottomSheet !== true;
   return transition(
-    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ import_react13.default.createElement(import_overlays2.Overlay, { portalContainer }, /* @__PURE__ */ import_react13.default.createElement(
+    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_overlays2.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ModalBackground,
       {
         zIndex,
         ...underlayProps,
-        style: transitionEnabled ? { backgroundColor } : {}
-      },
-      /* @__PURE__ */ import_react13.default.createElement(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react13.default.createElement(DialogContainer, { bottomSheet, size }, /* @__PURE__ */ import_react13.default.createElement(
-        ModalDialog,
-        {
-          ref,
-          ...overlayProps,
-          ...modalProps,
-          ...dialogProps,
-          style: transitionEnabled ? { transform } : {},
-          size,
-          bottomSheet
-        },
-        /* @__PURE__ */ import_react13.default.createElement(
-          ModalContext.Provider,
+        style: transitionEnabled ? { backgroundColor } : {},
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DialogContainer, { bottomSheet, size, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          ModalDialog,
           {
-            value: { titleProps, title, close: onClose, showDismiss }
-          },
-          children,
-          isDismissable === true && /* @__PURE__ */ import_react13.default.createElement(
-            ModalCrossButton,
-            {
-              size: "S",
-              icon: "24/Close",
-              onClick: onClose
-            }
-          )
-        )
-      )))
-    ))
+            ref,
+            ...overlayProps,
+            ...modalProps,
+            ...dialogProps,
+            style: transitionEnabled ? { transform } : {},
+            size,
+            bottomSheet,
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              ModalContext.Provider,
+              {
+                value: { titleProps, title, close: onClose, showDismiss },
+                children: [
+                  children,
+                  isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    ModalCrossButton,
+                    {
+                      size: "S",
+                      icon: "24/Close",
+                      onClick: onClose
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }) })
+      }
+    ) })
   );
 }
-var ModalContext = import_react13.default.createContext({
+var ModalContext = React7.createContext({
   titleProps: {},
   title: "",
   close: void 0,
@@ -1458,8 +1501,8 @@ var ModalCrossButton = (0, import_styled_components11.default)(IconButton_defaul
   ${theme((o) => [o.font.text3.hover.press])}
 `;
 function ModalTitle(props) {
-  const { titleProps, title } = (0, import_react13.useContext)(ModalContext);
-  return /* @__PURE__ */ import_react13.default.createElement(ModalHeading, { ...titleProps, ...props }, title);
+  const { titleProps, title } = (0, import_react9.useContext)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
 }
 var ModalHeading = import_styled_components11.default.h3`
   margin: 0;
@@ -1468,10 +1511,10 @@ var ModalHeading = import_styled_components11.default.h3`
 `;
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_react14 = __toESM(require("react"));
 var import_styled_components12 = __toESM(require("styled-components"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ModalHeader() {
-  return /* @__PURE__ */ import_react14.default.createElement(ModalHeaderRoot, null, /* @__PURE__ */ import_react14.default.createElement(StyledModalTitle, null));
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalHeaderRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledModalTitle, {}) });
 }
 var ModalHeaderRoot = import_styled_components12.default.div`
   height: 64px;
@@ -1497,14 +1540,15 @@ var ModalButtons = import_styled_components12.default.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-var import_react15 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function LoadingSpinner({
   size = 48,
   padding = 16,
   transparent = false
 }) {
-  return /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerIcon, null));
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LoadingSpinnerRoot, { size, padding, transparent, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LoadingSpinnerIcon, {}) });
 }
 var LoadingSpinnerRoot = import_styled_components13.default.div.attrs({ role: "progressbar" })`
   box-sizing: content-box;
@@ -1543,52 +1587,90 @@ var Icon2 = import_styled_components13.default.div.attrs({ role: "presentation"
     animation: none;
   }
 `;
-var LoadingSpinnerIcon = import_react15.default.forwardRef(function LoadingSpinnerIcon2({ once = false }, ref) {
-  const iconRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useImperativeHandle)(ref, () => ({
-    restart: () => {
-      if (!iconRef.current) {
-        return;
+var LoadingSpinnerIcon = (0, import_react10.forwardRef)(
+  function LoadingSpinnerIcon2({ once = false }, ref) {
+    const iconRef = (0, import_react10.useRef)(null);
+    (0, import_react10.useImperativeHandle)(ref, () => ({
+      restart: () => {
+        if (!iconRef.current) {
+          return;
+        }
+        iconRef.current.dataset.resetAnimation = "true";
+        void iconRef.current.offsetWidth;
+        delete iconRef.current.dataset.resetAnimation;
       }
-      iconRef.current.dataset.resetAnimation = "true";
-      void iconRef.current.offsetWidth;
-      delete iconRef.current.dataset.resetAnimation;
-    }
-  }));
-  return /* @__PURE__ */ import_react15.default.createElement(Icon2, { ref: iconRef, once });
-});
+    }));
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon2, { ref: iconRef, once });
+  }
+);
 
 // src/components/DropdownSelector/index.tsx
-var import_react17 = __toESM(require("react"));
-var import_styled_components15 = __toESM(require("styled-components"));
-var import_react_stately2 = require("react-stately");
+var import_react17 = require("react");
+var import_styled_components16 = __toESM(require("styled-components"));
 var import_utils6 = require("@charcoal-ui/utils");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react16 = __toESM(require("react"));
+var import_react12 = require("react");
+
+// src/components/DropdownSelector/Popover/index.tsx
+var import_react11 = require("react");
 var import_overlays3 = require("@react-aria/overlays");
 var import_styled_components14 = __toESM(require("styled-components"));
-var DropdownPopoverDiv = import_styled_components14.default.div`
-  width: 100%;
-  ${theme((o) => o.margin.top(4).bottom(4))}
-`;
-function DropdownPopover({ children, state, ...props }) {
-  const ref = (0, import_react16.useRef)(null);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var _empty = () => null;
+function Popover(props) {
+  const defaultPopoverRef = (0, import_react11.useRef)(null);
+  const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const { popoverProps, underlayProps } = (0, import_overlays3.usePopover)(
     {
-      ...props,
-      popoverRef: ref,
-      containerPadding: 0
+      triggerRef: props.triggerRef,
+      popoverRef: finalPopoverRef,
+      containerPadding: 16
     },
-    state
+    {
+      close: props.onClose,
+      isOpen: props.isOpen,
+      open: _empty,
+      setOpen: _empty,
+      toggle: _empty
+    }
   );
-  (0, import_react16.useEffect)(() => {
-    if (ref.current && props.triggerRef.current) {
+  if (!props.isOpen)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_overlays3.Overlay, { portalContainer: document.body, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_overlays3.DismissButton, { onDismiss: () => props.onClose() }),
+      props.children,
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_overlays3.DismissButton, { onDismiss: () => props.onClose() })
+    ] })
+  ] });
+}
+var DropdownPopoverDiv = import_styled_components14.default.div`
+  margin: 4px 0;
+  list-style: none;
+  overflow: auto;
+  max-height: inherit;
+
+  ${theme((o) => [
+  o.bg.background1,
+  o.border.default,
+  o.borderRadius(8),
+  o.padding.vertical(8)
+])}
+`;
+
+// src/components/DropdownSelector/DropdownPopover.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function DropdownPopover({ children, ...props }) {
+  const ref = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
+    if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
-  }, [props.triggerRef]);
-  (0, import_react16.useEffect)(() => {
-    if (state.isOpen && props.value !== void 0) {
+  }, [props.triggerRef, props.isOpen]);
+  (0, import_react12.useEffect)(() => {
+    if (props.isOpen && props.value !== void 0) {
       const windowScrollY = window.scrollY;
       const windowScrollX = window.scrollX;
       const selectedElement = document.querySelector(
@@ -1598,92 +1680,163 @@ function DropdownPopover({ children, state, ...props }) {
       selectedElement?.focus();
       window.scrollTo(windowScrollX, windowScrollY);
     }
-  }, [props.value, state.isOpen]);
-  return /* @__PURE__ */ import_react16.default.createElement(import_overlays3.Overlay, { portalContainer: document.body }, /* @__PURE__ */ import_react16.default.createElement("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }), /* @__PURE__ */ import_react16.default.createElement(DropdownPopoverDiv, { ...popoverProps, ref }, /* @__PURE__ */ import_react16.default.createElement(import_overlays3.DismissButton, { onDismiss: () => state.close() }), children, /* @__PURE__ */ import_react16.default.createElement(import_overlays3.DismissButton, { onDismiss: () => state.close() })));
+  }, [props.value, props.isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Popover,
+    {
+      isOpen: props.isOpen,
+      onClose: props.onClose,
+      popoverRef: ref,
+      triggerRef: props.triggerRef,
+      children
+    }
+  );
 }
 
-// src/components/DropdownSelector/index.tsx
-var DropdownSelectorContext = (0, import_react17.createContext)({
+// src/components/DropdownSelector/utils/findPreviewRecursive.tsx
+var import_react13 = __toESM(require("react"));
+function findPreviewRecursive(children, value) {
+  const childArray = import_react13.default.Children.toArray(children);
+  for (let i = 0; i < childArray.length; i++) {
+    const child = childArray[i];
+    if (import_react13.default.isValidElement(child)) {
+      if ("value" in child.props) {
+        const childValue = child.props.value;
+        if (childValue === value && "children" in child.props) {
+          const children2 = child.props.children;
+          return children2;
+        }
+      }
+      if ("children" in child.props) {
+        const children2 = findPreviewRecursive(
+          child.props.children,
+          value
+        );
+        if (children2 !== void 0) {
+          return children2;
+        }
+      }
+    }
+  }
+}
+
+// src/components/DropdownSelector/MenuList/index.tsx
+var import_react16 = require("react");
+var import_styled_components15 = __toESM(require("styled-components"));
+
+// src/components/DropdownSelector/MenuList/MenuListContext.ts
+var import_react14 = require("react");
+var MenuListContext = (0, import_react14.createContext)({
+  root: void 0,
   value: "",
+  values: [],
   setValue: (_v) => {
   }
 });
-var defaultRequiredText = "*\u5FC5\u9808";
-function DropdownSelector(props) {
-  const triggerRef = (0, import_react17.useRef)(null);
-  const state = (0, import_react_stately2.useOverlayTriggerState)({});
-  let preview;
-  const childArray = import_react17.default.Children.toArray(props.children);
+
+// src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
+var import_react15 = __toESM(require("react"));
+function getValuesRecursive(children, values = []) {
+  const childArray = import_react15.default.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (import_react17.default.isValidElement(child) && "value" in child.props) {
-      const find = child.props.value === props.value;
-      if (find && "children" in child.props) {
-        preview = child.props.children;
-        break;
+    if (import_react15.default.isValidElement(child)) {
+      const props = child.props;
+      if ("value" in props && typeof props.value === "string") {
+        const childValue = props.value;
+        values.push(childValue);
+      }
+      if ("children" in props && props.children) {
+        getValuesRecursive(props.children, values);
       }
     }
   }
-  return /* @__PURE__ */ import_react17.default.createElement(DropdownSelectorRoot, { "aria-disabled": props.disabled }, props.showLabel === true && /* @__PURE__ */ import_react17.default.createElement(
-    DropdownFieldLabel,
-    {
-      label: props.label,
-      required: props.required,
-      requiredText: props.requiredText ?? defaultRequiredText,
-      subLabel: props.subLabel
-    }
-  ), /* @__PURE__ */ import_react17.default.createElement(
-    DropdownButton,
-    {
-      invalid: props.invalid,
-      disabled: props.disabled,
-      onClick: () => {
-        if (props.disabled === true)
-          return;
-        state.open();
-      },
-      ref: triggerRef
-    },
-    /* @__PURE__ */ import_react17.default.createElement(DropdownButtonText, null, props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview),
-    /* @__PURE__ */ import_react17.default.createElement(DropdownButtonIcon, { name: "16/Menu" })
-  ), state.isOpen && /* @__PURE__ */ import_react17.default.createElement(
-    DropdownPopover,
+}
+
+// src/components/DropdownSelector/MenuList/index.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function MenuList(props) {
+  const root = (0, import_react16.useRef)(null);
+  const values = [];
+  getValuesRecursive(props.children, values);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    MenuListContext.Provider,
     {
-      state,
-      triggerRef,
-      value: props.value
-    },
-    /* @__PURE__ */ import_react17.default.createElement(ListboxRoot, null, /* @__PURE__ */ import_react17.default.createElement(
-      DropdownSelectorContext.Provider,
-      {
-        value: {
-          value: props.value,
-          setValue: (v) => {
-            props.onChange(v);
-            state.close();
-          }
+      value: {
+        value: props.value ?? "",
+        root,
+        values,
+        setValue: (v) => {
+          props.onChange?.(v);
         }
       },
-      props.children
-    ))
-  ), props.assistiveText !== void 0 && /* @__PURE__ */ import_react17.default.createElement(AssertiveText, { invalid: props.invalid }, props.assistiveText));
+      children: props.children
+    }
+  ) });
 }
-var ListboxRoot = import_styled_components15.default.ul`
-  padding-left: 0;
+var StyledUl = import_styled_components15.default.ul`
+  padding: 0;
   margin: 0;
-  box-sizing: border-box;
-  list-style: none;
-  overflow: auto;
-  max-height: inherit;
-
-  ${theme((o) => [
-  o.bg.background1,
-  o.border.default,
-  o.borderRadius(8),
-  o.padding.vertical(8)
-])}
 `;
-var DropdownSelectorRoot = import_styled_components15.default.div`
+
+// src/components/DropdownSelector/index.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var defaultRequiredText = "*\u5FC5\u9808";
+function DropdownSelector(props) {
+  const triggerRef = (0, import_react17.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
+  const preview = findPreviewRecursive(props.children, props.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
+    props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      DropdownFieldLabel,
+      {
+        label: props.label,
+        required: props.required,
+        requiredText: props.requiredText ?? defaultRequiredText,
+        subLabel: props.subLabel
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      DropdownButton,
+      {
+        invalid: props.invalid,
+        disabled: props.disabled,
+        onClick: () => {
+          if (props.disabled === true)
+            return;
+          setIsOpen(true);
+        },
+        ref: triggerRef,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownButtonIcon, { name: "16/Menu" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      DropdownPopover,
+      {
+        isOpen,
+        onClose: () => setIsOpen(false),
+        triggerRef,
+        value: props.value,
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          MenuList,
+          {
+            value: props.value,
+            onChange: (v) => {
+              props.onChange(v);
+              setIsOpen(false);
+            },
+            children: props.children
+          }
+        )
+      }
+    ),
+    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
+  ] });
+}
+var DropdownSelectorRoot = import_styled_components16.default.div`
   display: inline-block;
   width: 100%;
 
@@ -1692,12 +1845,12 @@ var DropdownSelectorRoot = import_styled_components15.default.div`
     ${theme((o) => o.disabled)}
   }
 `;
-var DropdownFieldLabel = (0, import_styled_components15.default)(FieldLabel_default)`
+var DropdownFieldLabel = (0, import_styled_components16.default)(FieldLabel_default)`
   width: 100%;
 
   ${theme((o) => o.margin.bottom(8))}
 `;
-var DropdownButton = import_styled_components15.default.button`
+var DropdownButton = import_styled_components16.default.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1720,15 +1873,15 @@ var DropdownButton = import_styled_components15.default.button`
   invalid === true && o.outline.assertive
 ])}
 `;
-var DropdownButtonText = import_styled_components15.default.span`
+var DropdownButtonText = import_styled_components16.default.span`
   text-align: left;
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
-var DropdownButtonIcon = (0, import_styled_components15.default)(Icon_default)`
+var DropdownButtonIcon = (0, import_styled_components16.default)(Icon_default)`
   ${theme((o) => [o.font.text2])}
 `;
-var AssertiveText = import_styled_components15.default.div`
+var AssertiveText = import_styled_components16.default.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
@@ -1736,129 +1889,204 @@ var AssertiveText = import_styled_components15.default.div`
 ])}
 `;
 
-// src/components/DropdownSelector/OptionItem.tsx
-var import_react18 = __toESM(require("react"));
-var import_styled_components16 = __toESM(require("styled-components"));
-var import_utils7 = require("@charcoal-ui/utils");
+// src/components/DropdownSelector/DropdownMenuItem.tsx
+var import_styled_components18 = __toESM(require("styled-components"));
 
-// src/components/DropdownSelector/utils/handleFocusByKeyBoard.tsx
-function handleFocusByKeyBoard(element) {
-  const parent = element.parentElement;
-  if (!parent)
-    return;
-  const rect = element.getBoundingClientRect();
-  const parentRect = parent.getBoundingClientRect();
-  if (rect.bottom > parentRect.bottom) {
-    parent.scrollTo({
-      top: parent.scrollTop + rect.bottom - parentRect.bottom
-    });
-  } else if (rect.top < parentRect.top) {
-    parent.scrollTo({
-      top: parent.scrollTop - (parentRect.top - rect.top)
-    });
-  }
+// src/components/DropdownSelector/ListItem/index.tsx
+var import_styled_components17 = __toESM(require("styled-components"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ListItem(props) {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ItemDiv, { ...rest, children: props.children }) });
 }
+var StyledLi = import_styled_components17.default.li`
+  list-style: none;
+`;
+var ItemDiv = import_styled_components17.default.div`
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  ${theme((o) => [o.padding.horizontal(16), o.disabled])}
+
+  &[aria-disabled="true"] {
+    cursor: default;
+  }
+
+  :hover,
+  :focus,
+  :focus-within {
+    ${theme((o) => [o.bg.surface3])}
+  }
+`;
 
-// src/components/DropdownSelector/utils/focusIfHTMLLIElement.tsx
-function focusIfHTMLLIElement(element) {
-  if (element instanceof HTMLLIElement) {
-    element.focus({ preventScroll: true });
-    handleFocusByKeyBoard(element);
+// src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
+var import_react18 = require("react");
+
+// src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
+function handleFocusByKeyBoard(element, parent) {
+  const isScrollable = parent.scrollHeight > parent.clientHeight;
+  if (isScrollable) {
+    const rect = element.getBoundingClientRect();
+    const parentRect = parent.getBoundingClientRect();
+    if (rect.bottom > parentRect.bottom) {
+      parent.scrollTo({
+        top: parent.scrollTop + rect.bottom - parentRect.bottom
+      });
+    } else if (rect.top < parentRect.top) {
+      parent.scrollTo({
+        top: parent.scrollTop - (parentRect.top - rect.top)
+      });
+    }
+  } else {
+    scrollIfNeeded(element);
+  }
+}
+function scrollIfNeeded(element) {
+  const elementRect = element.getBoundingClientRect();
+  const isVisible = elementRect.top >= 0 && elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
+  if (!isVisible) {
+    element.scrollIntoView({
+      block: "nearest"
+    });
   }
 }
 
-// src/components/DropdownSelector/OptionItem.tsx
-function OptionItem(props) {
-  const { value, setValue } = (0, import_react18.useContext)(DropdownSelectorContext);
-  const isSelected = props.value === value;
-  const onSelect = () => {
-    setValue(props.value);
-  };
-  return /* @__PURE__ */ import_react18.default.createElement(
-    OptionRoot,
-    {
-      "data-key": props.value,
-      onMouseMove: (e) => {
-        e.currentTarget.focus({ preventScroll: true });
-      },
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          onSelect();
-        } else if (e.key === "ArrowUp") {
-          e.preventDefault();
-          const prev = e.currentTarget.previousElementSibling;
-          if (prev === null) {
-            focusIfHTMLLIElement(e.currentTarget.parentElement?.lastChild);
-          }
-          focusIfHTMLLIElement(prev);
-        } else if (e.key === "ArrowDown") {
-          e.preventDefault();
-          const next = e.currentTarget.nextElementSibling;
-          if (next === null) {
-            focusIfHTMLLIElement(e.currentTarget.parentElement?.firstChild);
+// src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
+function useMenuItemHandleKeyDown(value) {
+  const { setValue, root, values } = (0, import_react18.useContext)(MenuListContext);
+  const setContextValue = (0, import_react18.useCallback)(() => {
+    if (value !== void 0)
+      setValue(value);
+  }, [value, setValue]);
+  const handleKeyDown = (0, import_react18.useCallback)(
+    (e) => {
+      if (e.key === "Enter") {
+        setContextValue();
+      } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!values || value === void 0)
+          return;
+        const index = values.indexOf(value);
+        if (index === -1)
+          return;
+        const focusValue = e.key === "ArrowUp" ? index - 1 < 0 ? values[values.length - 1] : values[index - 1] : index + 1 >= values.length ? values[0] : values[index + 1];
+        const next = root?.current?.querySelector(`[data-key='${focusValue}']`);
+        if (next instanceof HTMLElement) {
+          next.focus({ preventScroll: true });
+          if (root?.current?.parentElement) {
+            handleFocusByKeyBoard(next, root.current.parentElement);
           }
-          focusIfHTMLLIElement(next);
-        } else if (e.key === " ") {
-          e.preventDefault();
         }
-      },
-      onClick: onSelect,
-      tabIndex: -1
+      }
     },
-    isSelected && /* @__PURE__ */ import_react18.default.createElement(OptionCheckIcon, { name: "16/Check" }),
-    /* @__PURE__ */ import_react18.default.createElement(OptionText, { isSelected }, props.children)
+    [setContextValue, value, root, values]
   );
+  return [handleKeyDown, setContextValue];
 }
-var OptionRoot = import_styled_components16.default.li`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: theme4 }) => (0, import_utils7.px)(theme4.spacing[4])};
-  height: 40px;
-  cursor: pointer;
-  outline: none;
 
-  ${theme((o) => [o.padding.horizontal(8)])}
+// src/components/DropdownSelector/MenuItem/index.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function MenuItem(props) {
+  const { children, as, ...rest } = props;
+  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    ListItem,
+    {
+      ...rest,
+      as,
+      "data-key": props.value,
+      onKeyDown: handleKeyDown,
+      onClick: props.disabled === true ? void 0 : setContextValue,
+      tabIndex: -1,
+      "aria-disabled": props.disabled,
+      children: props.children
+    }
+  );
+}
 
-  :focus {
-    ${theme((o) => [o.bg.surface3])}
-  }
+// src/components/DropdownSelector/DropdownMenuItem.tsx
+var import_react19 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function DropdownMenuItem(props) {
+  const { value: ctxValue } = (0, import_react19.useContext)(MenuListContext);
+  const isSelected = props.value === ctxValue;
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(MenuItem, { ...rest, children: [
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text2ColorIcon, { name: "16/Check" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledSpan, { isSelected, children: props.children })
+  ] });
+}
+var StyledSpan = import_styled_components18.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 OptionCheckIcon = (0, import_styled_components16.default)(Icon_default)`
+var Text2ColorIcon = (0, import_styled_components18.default)(Icon_default)`
   ${theme((o) => [o.font.text2])}
+  padding-right: 4px;
 `;
-var OptionText = import_styled_components16.default.span`
+
+// src/components/DropdownSelector/MenuItemGroup/index.tsx
+var import_styled_components19 = __toESM(require("styled-components"));
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function MenuItemGroup(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(StyledLi2, { role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextSpan, { children: props.text }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledUl2, { role: "group", children: props.children })
+  ] });
+}
+var TextSpan = import_styled_components19.default.span`
+  display: block;
+  color: ${({ theme: theme4 }) => theme4.color.text3};
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 0 8px 16px;
+`;
+var StyledUl2 = import_styled_components19.default.ul`
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+`;
+var StyledLi2 = import_styled_components19.default.li`
   display: block;
-  ${theme((o) => [o.typography(14), o.font.text2])}
-  margin-left: ${({ isSelected }) => isSelected === true ? 0 : 20}px;
 `;
 
 // src/components/SegmentedControl/index.tsx
-var import_react20 = __toESM(require("react"));
-var import_react_stately3 = require("react-stately");
+var import_react21 = require("react");
+var import_react_stately2 = require("react-stately");
 var import_radio = require("@react-aria/radio");
-var import_styled_components17 = __toESM(require("styled-components"));
-var import_utils8 = require("@charcoal-ui/utils");
+var import_styled_components20 = __toESM(require("styled-components"));
+var import_utils7 = require("@charcoal-ui/utils");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react19 = __toESM(require("react"));
-var RadioContext = (0, import_react19.createContext)(null);
+var import_react20 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var RadioContext = (0, import_react20.createContext)(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ import_react19.default.createElement(RadioContext.Provider, { value }, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react19.useContext)(RadioContext);
+  const state = (0, import_react20.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-var SegmentedControl = (0, import_react20.forwardRef)(
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var SegmentedControl = (0, import_react21.forwardRef)(
   function SegmentedControlInner(props, ref) {
-    const ariaRadioGroupProps = (0, import_react20.useMemo)(
+    const ariaRadioGroupProps = (0, import_react21.useMemo)(
       () => ({
         ...props,
         isDisabled: props.disabled,
@@ -1868,30 +2096,34 @@ var SegmentedControl = (0, import_react20.forwardRef)(
       }),
       [props]
     );
-    const state = (0, import_react_stately3.useRadioGroupState)(ariaRadioGroupProps);
+    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_react21.useMemo)(() => {
       return props.data.map(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
     }, [props.data]);
-    return /* @__PURE__ */ import_react20.default.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ import_react20.default.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ import_react20.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SegmentedControlRoot, { ref, ...radioGroupProps, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Segmented,
       {
-        key: item.value,
         value: item.value,
-        disabled: item.disabled
+        disabled: item.disabled,
+        children: item.label
       },
-      item.label
-    ))));
+      item.value
+    )) }) });
   }
 );
-var SegmentedControl_default = (0, import_react20.memo)(SegmentedControl);
-var Segmented = ({ children, ...props }) => {
+var SegmentedControl_default = (0, import_react21.memo)(SegmentedControl);
+var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react20.useRef)(null);
-  const ariaRadioProps = (0, import_react20.useMemo)(
-    () => ({ ...props, isDisabled: props.disabled }),
+  const ref = (0, import_react21.useRef)(null);
+  const ariaRadioProps = (0, import_react21.useMemo)(
+    () => ({
+      value: props.value,
+      isDisabled: props.disabled,
+      children: props.children
+    }),
     [props]
   );
   const { inputProps, isDisabled, isSelected } = (0, import_radio.useRadio)(
@@ -1899,30 +2131,32 @@ var Segmented = ({ children, ...props }) => {
     state,
     ref
   );
-  return /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     SegmentedRoot,
     {
       "aria-disabled": isDisabled || state.isReadOnly,
-      checked: isSelected
-    },
-    /* @__PURE__ */ import_react20.default.createElement(SegmentedInput, { ...inputProps, ref }),
-    /* @__PURE__ */ import_react20.default.createElement(RadioLabel2, null, /* @__PURE__ */ import_react20.default.createElement(SegmentedLabelInner, null, children))
+      checked: isSelected,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SegmentedInput, { ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadioLabel2, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SegmentedLabelInner, { children: props.children }) })
+      ]
+    }
   );
 };
-var SegmentedControlRoot = import_styled_components17.default.div`
+var SegmentedControlRoot = import_styled_components20.default.div`
   display: inline-flex;
   align-items: center;
 
   ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
 `;
-var SegmentedRoot = import_styled_components17.default.label`
+var SegmentedRoot = import_styled_components20.default.label`
   position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
   height: 32px;
 
-  ${import_utils8.disabledSelector} {
+  ${import_utils7.disabledSelector} {
     cursor: default;
   }
 
@@ -1934,7 +2168,7 @@ var SegmentedRoot = import_styled_components17.default.label`
   checked === true ? o.font.text5 : o.font.text2
 ])}
 `;
-var SegmentedInput = import_styled_components17.default.input`
+var SegmentedInput = import_styled_components20.default.input`
   position: absolute;
 
   height: 0px;
@@ -1948,26 +2182,27 @@ var SegmentedInput = import_styled_components17.default.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = import_styled_components17.default.div`
+var RadioLabel2 = import_styled_components20.default.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = import_styled_components17.default.div`
+var SegmentedLabelInner = import_styled_components20.default.div`
   ${theme((o) => [o.typography(14)])}
 `;
 
 // src/components/Checkbox/index.tsx
-var import_react21 = __toESM(require("react"));
-var import_styled_components18 = __toESM(require("styled-components"));
+var import_react22 = require("react");
+var import_styled_components21 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
-var import_utils9 = require("@react-aria/utils");
-var import_react_stately4 = require("react-stately");
-var import_utils10 = require("@charcoal-ui/utils");
-var Checkbox = (0, import_react21.forwardRef)(
+var import_utils8 = require("@react-aria/utils");
+var import_react_stately3 = require("react-stately");
+var import_utils9 = require("@charcoal-ui/utils");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Checkbox = (0, import_react22.forwardRef)(
   function CheckboxInner(props, ref) {
-    const ariaCheckboxProps = (0, import_react21.useMemo)(
+    const ariaCheckboxProps = (0, import_react22.useMemo)(
       () => ({
         ...props,
         isSelected: props.checked,
@@ -1977,33 +2212,39 @@ var Checkbox = (0, import_react21.forwardRef)(
       }),
       [props]
     );
-    const state = (0, import_react_stately4.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils9.useObjectRef)(ref);
+    const state = (0, import_react_stately3.useToggleState)(ariaCheckboxProps);
+    const objectRef = (0, import_utils8.useObjectRef)(ref);
     const { inputProps } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-    return /* @__PURE__ */ import_react21.default.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ import_react21.default.createElement(CheckboxRoot, null, /* @__PURE__ */ import_react21.default.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ import_react21.default.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ import_react21.default.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ import_react21.default.createElement(InputLabel, null, props.children));
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputRoot, { "aria-disabled": isDisabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(CheckboxRoot, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CheckboxInput, { type: "checkbox", ...inputProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
+      ] }),
+      "children" in props && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputLabel, { children: props.children })
+    ] });
   }
 );
-var Checkbox_default = (0, import_react21.memo)(Checkbox);
-var hiddenCss = import_styled_components18.css`
+var Checkbox_default = (0, import_react22.memo)(Checkbox);
+var hiddenCss = import_styled_components21.css`
   visibility: hidden;
 `;
-var InputRoot = import_styled_components18.default.label`
+var InputRoot = import_styled_components21.default.label`
   position: relative;
   display: flex;
 
   cursor: pointer;
-  ${import_utils10.disabledSelector} {
+  ${import_utils9.disabledSelector} {
     cursor: default;
   }
 
-  gap: ${({ theme: theme4 }) => (0, import_utils10.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme4 }) => (0, import_utils9.px)(theme4.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
-var CheckboxRoot = import_styled_components18.default.div`
+var CheckboxRoot = import_styled_components21.default.div`
   position: relative;
 `;
-var CheckboxInput = import_styled_components18.default.input`
+var CheckboxInput = import_styled_components21.default.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -2026,7 +2267,7 @@ var CheckboxInput = import_styled_components18.default.input`
     transition: all 0.2s !important;
   }
 `;
-var CheckboxInputOverlay = import_styled_components18.default.div`
+var CheckboxInputOverlay = import_styled_components21.default.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -2039,7 +2280,7 @@ var CheckboxInputOverlay = import_styled_components18.default.div`
 
   ${({ checked }) => checked !== true && hiddenCss};
 `;
-var InputLabel = import_styled_components18.default.div`
+var InputLabel = import_styled_components21.default.div`
   ${theme((o) => [o.font.text2])}
 
   font-size: 14px;
@@ -2048,16 +2289,17 @@ var InputLabel = import_styled_components18.default.div`
 `;
 
 // src/components/TagItem/index.tsx
-var import_react22 = __toESM(require("react"));
-var import_utils11 = require("@react-aria/utils");
-var import_styled_components19 = __toESM(require("styled-components"));
-var import_utils12 = require("@charcoal-ui/utils");
+var import_react23 = require("react");
+var import_utils10 = require("@react-aria/utils");
+var import_styled_components22 = __toESM(require("styled-components"));
+var import_utils11 = require("@charcoal-ui/utils");
 var import_button = require("@react-aria/button");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react22.forwardRef)(
+var TagItem = (0, import_react23.forwardRef)(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2069,8 +2311,8 @@ var TagItem = (0, import_react22.forwardRef)(
     className,
     ...props
   }, _ref) {
-    const ref = (0, import_utils11.useObjectRef)(_ref);
-    const ariaButtonProps = (0, import_react22.useMemo)(
+    const ref = (0, import_utils10.useObjectRef)(_ref);
+    const ariaButtonProps = (0, import_react23.useMemo)(
       () => ({
         elementType: "a",
         isDisabled: disabled,
@@ -2080,22 +2322,30 @@ var TagItem = (0, import_react22.forwardRef)(
     );
     const { buttonProps } = (0, import_button.useButton)(ariaButtonProps, ref);
     const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-    return /* @__PURE__ */ import_react22.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       TagItemRoot,
       {
         ref,
         size: hasTranslatedLabel ? "M" : size,
         status,
         ...buttonProps,
-        className
-      },
-      /* @__PURE__ */ import_react22.default.createElement(Background, { bgColor, bgImage, status }),
-      /* @__PURE__ */ import_react22.default.createElement(Inner, null, /* @__PURE__ */ import_react22.default.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ import_react22.default.createElement(TranslatedLabel, null, /* @__PURE__ */ import_react22.default.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ import_react22.default.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ import_react22.default.createElement(Icon_default, { name: "16/Remove" }))
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Background, { bgColor, bgImage, status }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Inner, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
+              hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TranslatedLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label3, { children: translatedLabel }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label3, { children: label })
+            ] }),
+            status === "active" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: "16/Remove" })
+          ] })
+        ]
+      }
     );
   }
 );
-var TagItem_default = (0, import_react22.memo)(TagItem);
-var TagItemRoot = import_styled_components19.default.a`
+var TagItem_default = (0, import_react23.memo)(TagItem);
+var TagItemRoot = import_styled_components22.default.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2115,12 +2365,12 @@ var TagItemRoot = import_styled_components19.default.a`
   ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
 ])}
 
-  ${import_utils12.disabledSelector} {
+  ${import_utils11.disabledSelector} {
     ${theme((o) => [o.disabled])}
     cursor: default;
   }
 `;
-var Background = import_styled_components19.default.div`
+var Background = import_styled_components22.default.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2131,7 +2381,7 @@ var Background = import_styled_components19.default.div`
   background-color: ${({ bgColor }) => bgColor};
   ${({ status }) => status === "inactive" && theme((o) => o.bg.surface3)}
 
-  ${({ bgImage }) => bgImage !== void 0 && import_styled_components19.css`
+  ${({ bgImage }) => bgImage !== void 0 && import_styled_components22.css`
       ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
@@ -2147,25 +2397,25 @@ var Background = import_styled_components19.default.div`
       }
     `}
 `;
-var Inner = import_styled_components19.default.div`
+var Inner = import_styled_components22.default.div`
   display: inline-flex;
-  gap: ${({ theme: theme4 }) => (0, import_utils12.px)(theme4.spacing[8])};
+  gap: ${({ theme: theme4 }) => (0, import_utils11.px)(theme4.spacing[8])};
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = import_styled_components19.css`
+var labelCSS = import_styled_components22.css`
   ${theme((o) => [o.typography(14).bold])}
 `;
-var translateLabelCSS = import_styled_components19.css`
+var translateLabelCSS = import_styled_components22.css`
   display: flex;
   align-items: center;
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = import_styled_components19.default.div`
+var LabelWrapper = import_styled_components22.default.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = import_styled_components19.default.span`
+var Label3 = import_styled_components22.default.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2174,7 +2424,7 @@ var Label3 = import_styled_components19.default.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = import_styled_components19.default.div`
+var TranslatedLabel = import_styled_components22.default.div`
   ${theme((o) => [o.typography(12).bold])}
 `;
 // Annotate the CommonJS export names for ESM import in node:
@@ -2184,11 +2434,13 @@ var TranslatedLabel = import_styled_components19.default.div`
   Checkbox,
   Clickable,
   ComponentAbstraction,
+  DropdownMenuItem,
   DropdownSelector,
   Icon,
   IconButton,
   LoadingSpinner,
   LoadingSpinnerIcon,
+  MenuItemGroup,
   Modal,
   ModalAlign,
   ModalBody,
@@ -2196,7 +2448,6 @@ var TranslatedLabel = import_styled_components19.default.div`
   ModalHeader,
   MultiSelect,
   MultiSelectGroup,
-  OptionItem,
   OverlayProvider,
   Radio,
   RadioGroup,