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

package/dist/index.esm.js

@@ -1,8 +1,10 @@
 // src/core/ComponentAbstraction.tsx
-import React, { useContext } from "react";
+import { useContext } from "react";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 var DefaultLink = React.forwardRef(
   function DefaultLink2({ to, children, ...rest }, ref) {
-    return /* @__PURE__ */ React.createElement("a", { href: to, ref, ...rest }, children);
+    return /* @__PURE__ */ jsx("a", { href: to, ref, ...rest, children });
   }
 );
 var DefaultValue = {
@@ -10,12 +12,12 @@ var DefaultValue = {
 };
 var ComponentAbstractionContext = React.createContext(DefaultValue);
 function ComponentAbstraction({ children, components }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ComponentAbstractionContext.Provider,
     {
-      value: { ...DefaultValue, ...components }
-    },
-    children
+      value: { ...DefaultValue, ...components },
+      children
+    }
   );
 }
 function useComponentAbstraction() {
@@ -29,9 +31,9 @@ import { SSRProvider } from "@react-aria/ssr";
 import { OverlayProvider } from "@react-aria/overlays";
 
 // src/core/CharcoalProvider.tsx
-import React2 from "react";
 import { ThemeProvider } from "styled-components";
 import { TokenInjector } from "@charcoal-ui/styled";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function CharcoalProvider({
   themeMap,
   defaultTheme = themeMap[":root"],
@@ -39,11 +41,14 @@ function CharcoalProvider({
   injectTokens = true,
   children
 }) {
-  return /* @__PURE__ */ React2.createElement(SSRProvider, null, /* @__PURE__ */ React2.createElement(ThemeProvider, { theme: defaultTheme }, injectTokens && /* @__PURE__ */ React2.createElement(TokenInjector, { theme: themeMap }), /* @__PURE__ */ React2.createElement(ComponentAbstraction, { components }, /* @__PURE__ */ React2.createElement(OverlayProvider, null, children))));
+  return /* @__PURE__ */ jsx2(SSRProvider, { children: /* @__PURE__ */ jsxs(ThemeProvider, { theme: defaultTheme, children: [
+    injectTokens && /* @__PURE__ */ jsx2(TokenInjector, { theme: themeMap }),
+    /* @__PURE__ */ jsx2(ComponentAbstraction, { components, children: /* @__PURE__ */ jsx2(OverlayProvider, { children }) })
+  ] }) });
 }
 
 // src/components/Button/index.tsx
-import React4 from "react";
+import { forwardRef as forwardRef3 } from "react";
 import styled3 from "styled-components";
 
 // src/_lib/index.ts
@@ -52,6 +57,21 @@ function unreachable(value) {
     arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`
   );
 }
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== null) {
+        ;
+        ref.current = value;
+      }
+    }
+  };
+}
+function countCodePointsInString(string) {
+  return Array.from(string).length;
+}
 
 // src/styled.ts
 import styled from "styled-components";
@@ -59,15 +79,16 @@ import { createTheme } from "@charcoal-ui/styled";
 var theme = createTheme(styled);
 
 // src/components/Clickable/index.tsx
-import React3 from "react";
+import * as React2 from "react";
 import styled2, { css } from "styled-components";
 import { disabledSelector } from "@charcoal-ui/utils";
-var Clickable = React3.forwardRef(
+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__ */ React3.createElement(
+      return /* @__PURE__ */ jsx3(
         A,
         {
           ...rest,
@@ -78,7 +99,7 @@ var Clickable = React3.forwardRef(
         }
       );
     } else {
-      return /* @__PURE__ */ React3.createElement(Button, { ...props, ref });
+      return /* @__PURE__ */ jsx3(Button, { ...props, ref });
     }
   }
 );
@@ -143,7 +164,8 @@ var A = styled2.span`
 `;
 
 // src/components/Button/index.tsx
-var Button2 = React4.forwardRef(function Button3({
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Button2 = forwardRef3(function Button3({
   children,
   variant = "Default",
   size = "M",
@@ -151,7 +173,7 @@ var Button2 = React4.forwardRef(function Button3({
   disabled = false,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ jsx4(
     StyledButton,
     {
       ...rest,
@@ -159,9 +181,9 @@ var Button2 = React4.forwardRef(function Button3({
       variant,
       size,
       fullWidth: fixed,
-      ref
-    },
-    children
+      ref,
+      children
+    }
   );
 });
 var Button_default = Button2;
@@ -230,12 +252,13 @@ function sizeToProps(size) {
 }
 
 // src/components/IconButton/index.tsx
-import React5 from "react";
+import { forwardRef as forwardRef4 } from "react";
 import styled4 from "styled-components";
-var IconButton = React5.forwardRef(
+import { jsx as jsx5 } from "react/jsx-runtime";
+var IconButton = forwardRef4(
   function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
     validateIconSize(size, icon);
-    return /* @__PURE__ */ React5.createElement(StyledIconButton, { ...rest, ref, variant, size }, /* @__PURE__ */ React5.createElement("pixiv-icon", { name: icon }));
+    return /* @__PURE__ */ jsx5(StyledIconButton, { ...rest, ref, variant, size, children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon }) });
   }
 );
 var IconButton_default = IconButton;
@@ -314,22 +337,19 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-import React6, { useCallback, useContext as useContext2 } from "react";
+import { memo, forwardRef as forwardRef5, useCallback, useContext as useContext2 } from "react";
+import * as React3 from "react";
 import styled5 from "styled-components";
 import warning from "warning";
 import { px } from "@charcoal-ui/utils";
-function Radio({
-  value,
-  forceChecked = false,
-  disabled = false,
-  children
-}) {
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var Radio = forwardRef5(function RadioInner({ value, disabled = false, children, className }, ref) {
   const {
     name,
     selected,
     disabled: isParentDisabled,
     readonly,
-    hasError,
+    invalid,
     onChange
   } = useContext2(RadioGroupContext);
   warning(
@@ -345,22 +365,27 @@ function Radio({
     },
     [onChange]
   );
-  return /* @__PURE__ */ React6.createElement(RadioRoot, { "aria-disabled": isDisabled || isReadonly }, /* @__PURE__ */ React6.createElement(
-    RadioInput,
-    {
-      name,
-      value,
-      checked: forceChecked || isSelected,
-      hasError,
-      onChange: handleChange,
-      disabled: isDisabled || isReadonly
-    }
-  ), children != null && /* @__PURE__ */ React6.createElement(RadioLabel, null, children));
-}
+  return /* @__PURE__ */ jsxs2(RadioRoot, { "aria-disabled": isDisabled || isReadonly, className, children: [
+    /* @__PURE__ */ jsx6(
+      RadioInput,
+      {
+        name,
+        value,
+        checked: isSelected,
+        invalid,
+        onChange: handleChange,
+        disabled: isDisabled || isReadonly,
+        ref
+      }
+    ),
+    children != null && /* @__PURE__ */ jsx6(RadioLabel, { children })
+  ] });
+});
+var Radio_default = memo(Radio);
 var RadioRoot = styled5.label`
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: ${({ theme: theme4 }) => px(theme4.spacing[4])};
+  grid-gap: ${({ theme: theme3 }) => px(theme3.spacing[4])};
   align-items: center;
   cursor: pointer;
 
@@ -378,19 +403,18 @@ var RadioInput = styled5.input.attrs({ type: "radio" })`
 
     width: 20px;
     height: 20px;
-
     cursor: pointer;
 
-    ${({ hasError = false }) => theme((o) => [
+    ${({ invalid = false }) => theme((o) => [
   o.borderRadius("oval"),
   o.bg.surface1.hover.press,
-  hasError && o.outline.assertive
+  invalid && o.outline.assertive
 ])};
 
     &:not(:checked) {
       border-width: 2px;
       border-style: solid;
-      border-color: ${({ theme: theme4 }) => theme4.color.text3};
+      border-color: ${({ theme: theme3 }) => theme3.color.text3};
     }
 
     &:checked {
@@ -419,14 +443,14 @@ var RadioLabel = styled5.div`
 var StyledRadioGroup = styled5.div`
   display: grid;
   grid-template-columns: 1fr;
-  grid-gap: ${({ theme: theme4 }) => px(theme4.spacing[8])};
+  grid-gap: ${({ theme: theme3 }) => px(theme3.spacing[8])};
 `;
-var RadioGroupContext = React6.createContext({
+var RadioGroupContext = React3.createContext({
   name: void 0,
   selected: void 0,
   disabled: false,
   readonly: false,
-  hasError: false,
+  invalid: false,
   onChange() {
     throw new Error(
       "Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?"
@@ -441,7 +465,7 @@ function RadioGroup({
   onChange,
   disabled,
   readonly,
-  hasError,
+  invalid,
   children
 }) {
   const handleChange = useCallback(
@@ -450,7 +474,7 @@ function RadioGroup({
     },
     [onChange]
   );
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ jsx6(
     RadioGroupContext.Provider,
     {
       value: {
@@ -458,38 +482,38 @@ function RadioGroup({
         selected: value,
         disabled: disabled ?? false,
         readonly: readonly ?? false,
-        hasError: hasError ?? false,
+        invalid: invalid ?? false,
         onChange: handleChange
-      }
-    },
-    /* @__PURE__ */ React6.createElement(
-      StyledRadioGroup,
-      {
-        role: "radiogroup",
-        "aria-orientation": "vertical",
-        "aria-label": label,
-        "aria-invalid": hasError,
-        className
       },
-      children
-    )
+      children: /* @__PURE__ */ jsx6(
+        StyledRadioGroup,
+        {
+          role: "radiogroup",
+          "aria-orientation": "vertical",
+          "aria-label": label,
+          "aria-invalid": invalid,
+          className,
+          children
+        }
+      )
+    }
   );
 }
 
 // src/components/MultiSelect/index.tsx
-import React7, { useCallback as useCallback2, useContext as useContext3 } from "react";
+import { useCallback as useCallback2, useContext as useContext3, forwardRef as forwardRef6, memo as memo2 } from "react";
 import styled6, { css as css2 } from "styled-components";
 import warning2 from "warning";
 import { disabledSelector as disabledSelector2, px as px2 } from "@charcoal-ui/utils";
 
 // src/components/MultiSelect/context.ts
-import { createContext } from "react";
-var MultiSelectGroupContext = createContext({
+import { createContext as createContext3 } from "react";
+var MultiSelectGroupContext = createContext3({
   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 />` ?"
@@ -498,63 +522,72 @@ var MultiSelectGroupContext = createContext({
 });
 
 // src/components/MultiSelect/index.tsx
-function MultiSelect({
-  value,
-  forceChecked = false,
-  disabled = false,
-  onChange,
-  variant = "default",
-  children
-}) {
-  const {
-    name,
-    selected,
-    disabled: parentDisabled,
-    readonly,
-    hasError,
-    onChange: parentOnChange
-  } = useContext3(MultiSelectGroupContext);
-  warning2(
-    name !== void 0,
-    `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
-  );
-  const isSelected = selected.includes(value) || forceChecked;
-  const isDisabled = disabled || parentDisabled || readonly;
-  const handleChange = useCallback2(
-    (event) => {
-      if (!(event.currentTarget instanceof HTMLInputElement)) {
-        return;
-      }
-      if (onChange)
-        onChange({ value, selected: event.currentTarget.checked });
-      parentOnChange({ value, selected: event.currentTarget.checked });
-    },
-    [onChange, parentOnChange, value]
-  );
-  return /* @__PURE__ */ React7.createElement(MultiSelectRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React7.createElement(
-    MultiSelectInput,
-    {
-      ...{
-        name,
-        value,
-        hasError
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var MultiSelect = forwardRef6(
+  function MultiSelectInner({
+    value,
+    disabled = false,
+    onChange,
+    variant = "default",
+    className,
+    children
+  }, ref) {
+    const {
+      name,
+      selected,
+      disabled: parentDisabled,
+      readonly,
+      invalid,
+      onChange: parentOnChange
+    } = useContext3(MultiSelectGroupContext);
+    warning2(
+      name !== void 0,
+      `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
+    );
+    const isSelected = selected.includes(value);
+    const isDisabled = disabled || parentDisabled || readonly;
+    const handleChange = useCallback2(
+      (event) => {
+        if (!(event.currentTarget instanceof HTMLInputElement)) {
+          return;
+        }
+        if (onChange)
+          onChange({ value, selected: event.currentTarget.checked });
+        parentOnChange({ value, selected: event.currentTarget.checked });
       },
-      checked: isSelected,
-      disabled: isDisabled,
-      onChange: handleChange,
-      overlay: variant === "overlay",
-      "aria-invalid": hasError
-    }
-  ), /* @__PURE__ */ React7.createElement(
-    MultiSelectInputOverlay,
-    {
-      overlay: variant === "overlay",
-      hasError,
-      "aria-hidden": true
-    },
-    /* @__PURE__ */ React7.createElement("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
-  ), Boolean(children) && /* @__PURE__ */ React7.createElement(MultiSelectLabel, null, children));
-}
+      [onChange, parentOnChange, value]
+    );
+    return /* @__PURE__ */ jsxs3(MultiSelectRoot, { "aria-disabled": isDisabled, className, children: [
+      /* @__PURE__ */ jsx7(
+        MultiSelectInput,
+        {
+          ...{
+            name,
+            value,
+            invalid
+          },
+          checked: isSelected,
+          disabled: isDisabled,
+          onChange: handleChange,
+          overlay: variant === "overlay",
+          "aria-invalid": invalid,
+          ref
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        MultiSelectInputOverlay,
+        {
+          overlay: variant === "overlay",
+          invalid,
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx7("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
+        }
+      ),
+      Boolean(children) && /* @__PURE__ */ jsx7(MultiSelectLabel, { children })
+    ] });
+  }
+);
+var MultiSelect_default = memo2(MultiSelect);
 var MultiSelectRoot = styled6.label`
   display: grid;
   grid-template-columns: auto 1fr;
@@ -564,7 +597,7 @@ var MultiSelectRoot = styled6.label`
   ${disabledSelector2} {
     cursor: default;
   }
-  gap: ${({ theme: theme4 }) => px2(theme4.spacing[4])};
+  gap: ${({ theme: theme3 }) => px2(theme3.spacing[4])};
   ${theme((o) => o.disabled)}
 `;
 var MultiSelectLabel = styled6.div`
@@ -584,10 +617,10 @@ var MultiSelectInput = styled6.input.attrs({ type: "checkbox" })`
       ${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
 ])};
   }
@@ -601,16 +634,16 @@ var MultiSelectInputOverlay = styled6.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 && css2`
-      border-color: ${({ theme: theme4 }) => theme4.color.text5};
+      border-color: ${({ theme: theme3 }) => theme3.color.text5};
       border-width: 2px;
       border-style: solid;
     `}
@@ -618,12 +651,12 @@ var MultiSelectInputOverlay = styled6.div`
 function MultiSelectGroup({
   className,
   name,
-  ariaLabel,
+  label,
   selected,
   onChange,
   disabled = false,
   readonly = false,
-  hasError = false,
+  invalid = false,
   children
 }) {
   const handleChange = useCallback2(
@@ -641,7 +674,7 @@ function MultiSelectGroup({
     },
     [onChange, selected]
   );
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ jsx7(
     MultiSelectGroupContext.Provider,
     {
       value: {
@@ -649,46 +682,46 @@ function MultiSelectGroup({
         selected: Array.from(new Set(selected)),
         disabled,
         readonly,
-        hasError,
+        invalid,
         onChange: handleChange
-      }
-    },
-    /* @__PURE__ */ React7.createElement(
-      "div",
-      {
-        className,
-        "aria-label": ariaLabel,
-        "data-testid": "SelectGroup"
       },
-      children
-    )
+      children: /* @__PURE__ */ jsx7("div", { className, "aria-label": label, "data-testid": "SelectGroup", children })
+    }
   );
 }
 
 // src/components/Switch/index.tsx
 import { useSwitch } from "@react-aria/switch";
-import React8, { useRef, useMemo } from "react";
+import { useMemo, memo as memo3, forwardRef as forwardRef7 } from "react";
 import { useToggleState } from "react-stately";
 import styled7 from "styled-components";
 import { disabledSelector as disabledSelector3 } from "@charcoal-ui/utils";
-function SwitchCheckbox(props) {
-  const { disabled, className } = props;
-  const ariaSwitchProps = useMemo(
-    () => ({
-      ...props,
-      "aria-label": "children" in props ? void 0 : props.label,
-      isDisabled: props.disabled,
-      isSelected: props.checked
-    }),
-    [props]
-  );
-  const state = useToggleState(ariaSwitchProps);
-  const ref = useRef(null);
-  const {
-    inputProps: { className: _className, type: _type, ...rest }
-  } = useSwitch(ariaSwitchProps, state, ref);
-  return /* @__PURE__ */ React8.createElement(Label, { className, "aria-disabled": disabled }, /* @__PURE__ */ React8.createElement(SwitchInput, { ...rest, ref }), "children" in props ? /* @__PURE__ */ React8.createElement(LabelInner, null, props.children) : void 0);
-}
+import { useObjectRef } from "@react-aria/utils";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var SwitchCheckbox = forwardRef7(
+  function SwitchCheckboxInner(props, external) {
+    const { disabled, className } = props;
+    const ariaSwitchProps = useMemo(
+      () => ({
+        ...props,
+        "aria-label": "children" in props ? void 0 : props.label,
+        isDisabled: props.disabled,
+        isSelected: props.checked
+      }),
+      [props]
+    );
+    const state = useToggleState(ariaSwitchProps);
+    const ref = useObjectRef(external);
+    const {
+      inputProps: { className: _className, type: _type, ...rest }
+    } = useSwitch(ariaSwitchProps, state, ref);
+    return /* @__PURE__ */ jsxs4(Label, { className, "aria-disabled": disabled, children: [
+      /* @__PURE__ */ jsx8(SwitchInput, { ...rest, ref }),
+      "children" in props ? /* @__PURE__ */ jsx8(LabelInner, { children: props.children }) : void 0
+    ] });
+  }
+);
+var Switch_default = memo3(SwitchCheckbox);
 var Label = styled7.label`
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -780,19 +813,16 @@ var SwitchInput = styled7.input.attrs({
 // src/components/TextField/index.tsx
 import { useTextField } from "@react-aria/textfield";
 import { useVisuallyHidden } from "@react-aria/visually-hidden";
-import React10, {
-  useCallback as useCallback3,
-  useEffect,
-  useRef as useRef2,
-  useState
-} from "react";
-import styled9, { css as css3 } from "styled-components";
+import { useCallback as useCallback3, useEffect, useRef, useState } from "react";
+import * as React5 from "react";
+import styled9 from "styled-components";
 
 // src/components/FieldLabel/index.tsx
-import React9 from "react";
+import * as React4 from "react";
 import styled8 from "styled-components";
 import { createTheme as createTheme2 } from "@charcoal-ui/styled";
-var FieldLabel = React9.forwardRef(
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var FieldLabel = React4.forwardRef(
   function FieldLabel2({
     style,
     className,
@@ -802,7 +832,11 @@ var FieldLabel = React9.forwardRef(
     subLabel,
     ...labelProps
   }, ref) {
-    return /* @__PURE__ */ React9.createElement(FieldLabelWrapper, { style, className }, /* @__PURE__ */ React9.createElement(Label2, { ref, ...labelProps }, label), required && /* @__PURE__ */ React9.createElement(RequiredText, null, requiredText), /* @__PURE__ */ React9.createElement(SubLabelClickable, null, /* @__PURE__ */ React9.createElement("span", null, subLabel)));
+    return /* @__PURE__ */ jsxs5(FieldLabelWrapper, { style, className, children: [
+      /* @__PURE__ */ jsx9(Label2, { ref, ...labelProps, children: label }),
+      required && /* @__PURE__ */ jsx9(RequiredText, { children: requiredText }),
+      /* @__PURE__ */ jsx9(SubLabelClickable, { children: /* @__PURE__ */ jsx9("span", { children: subLabel }) })
+    ] });
   }
 );
 var FieldLabel_default = FieldLabel;
@@ -834,230 +868,122 @@ var FieldLabelWrapper = styled8.div`
 `;
 
 // src/components/TextField/index.tsx
-import { createTheme as createTheme3 } from "@charcoal-ui/styled";
-var theme3 = createTheme3(styled9);
-function mergeRefs(...refs) {
-  return (value) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref !== null) {
-        ;
-        ref.current = value;
-      }
-    }
-  };
-}
-function countCodePointsInString(string) {
-  return Array.from(string).length;
-}
-var TextField = React10.forwardRef(
-  function TextField2(props, ref) {
-    return props.multiline !== void 0 && props.multiline ? /* @__PURE__ */ React10.createElement(MultiLineTextField, { ref, ...props }) : /* @__PURE__ */ React10.createElement(SingleLineTextField, { ref, ...props });
-  }
-);
-var TextField_default = TextField;
-var SingleLineTextField = React10.forwardRef(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef4) {
-  const {
-    className,
-    showLabel = false,
-    showCount = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    assistiveText,
-    maxLength,
-    prefix = null,
-    suffix = null
-  } = props;
-  const { visuallyHiddenProps } = useVisuallyHidden();
-  const ariaRef = useRef2(null);
-  const prefixRef = useRef2(null);
-  const suffixRef = useRef2(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) => {
-      const count2 = countCodePointsInString(value);
-      if (maxLength !== void 0 && count2 > maxLength) {
-        return;
-      }
-      if (nonControlled) {
-        setCount(count2);
-      }
-      onChange?.(value);
-    },
-    [maxLength, nonControlled, onChange]
-  );
-  useEffect(() => {
-    setCount(countCodePointsInString(props.value ?? ""));
-  }, [props.value]);
-  const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField(
-    {
-      inputElementType: "input",
-      isDisabled: disabled,
-      isRequired: required,
-      validationState: invalid ? "invalid" : "valid",
-      description: !invalid && assistiveText,
-      errorMessage: invalid && assistiveText,
-      onChange: handleChange,
-      ...props
-    },
-    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();
-    };
-  }, []);
-  return /* @__PURE__ */ React10.createElement(TextFieldRoot, { className, isDisabled: disabled }, /* @__PURE__ */ React10.createElement(
-    TextFieldLabel,
-    {
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var TextField = React5.forwardRef(
+  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef16) {
+    const {
+      className,
+      showLabel = false,
+      showCount = false,
       label,
       requiredText,
-      required,
       subLabel,
-      ...labelProps,
-      ...!showLabel ? visuallyHiddenProps : {}
-    }
-  ), /* @__PURE__ */ React10.createElement(StyledInputContainer, null, /* @__PURE__ */ React10.createElement(PrefixContainer, { ref: prefixRef }, /* @__PURE__ */ React10.createElement(Affix, null, prefix)), /* @__PURE__ */ React10.createElement(
-    StyledInput,
-    {
-      ref: mergeRefs(forwardRef4, ariaRef),
-      invalid,
-      extraLeftPadding: prefixWidth,
-      extraRightPadding: suffixWidth,
-      ...inputProps
-    }
-  ), /* @__PURE__ */ React10.createElement(SuffixContainer, { ref: suffixRef }, /* @__PURE__ */ React10.createElement(Affix, null, suffix), showCount && /* @__PURE__ */ React10.createElement(SingleLineCounter, null, maxLength !== void 0 ? `${count}/${maxLength}` : count))), assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ React10.createElement(
-    AssistiveText,
-    {
-      invalid,
-      ...invalid ? errorMessageProps : descriptionProps
-    },
-    assistiveText
-  ));
-});
-var MultiLineTextField = React10.forwardRef(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef4) {
-  const {
-    className,
-    showCount = false,
-    showLabel = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    assistiveText,
-    maxLength,
-    autoHeight = false,
-    rows: initialRows = 4
-  } = props;
-  const { visuallyHiddenProps } = useVisuallyHidden();
-  const textareaRef = useRef2(null);
-  const ariaRef = useRef2(null);
-  const [count, setCount] = useState(countCodePointsInString(props.value ?? ""));
-  const [rows, setRows] = useState(initialRows);
-  const syncHeight = useCallback3(
-    (textarea) => {
-      const rows2 = (`${textarea.value}
-`.match(/\n/gu)?.length ?? 0) || 1;
-      setRows(initialRows <= rows2 ? rows2 : initialRows);
-    },
-    [initialRows]
-  );
-  const nonControlled = props.value === void 0;
-  const handleChange = useCallback3(
-    (value) => {
-      const count2 = countCodePointsInString(value);
-      if (maxLength !== void 0 && count2 > maxLength) {
-        return;
-      }
-      if (nonControlled) {
-        setCount(count2);
-      }
-      if (autoHeight && textareaRef.current !== null) {
-        syncHeight(textareaRef.current);
-      }
-      onChange?.(value);
-    },
-    [autoHeight, maxLength, nonControlled, onChange, syncHeight]
-  );
-  useEffect(() => {
-    setCount(countCodePointsInString(props.value ?? ""));
-  }, [props.value]);
-  const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField(
-    {
-      inputElementType: "textarea",
-      isDisabled: disabled,
-      isRequired: required,
-      validationState: invalid ? "invalid" : "valid",
-      description: !invalid && assistiveText,
-      errorMessage: invalid && assistiveText,
-      onChange: handleChange,
-      ...props
-    },
-    ariaRef
-  );
-  useEffect(() => {
-    if (autoHeight && textareaRef.current !== null) {
-      syncHeight(textareaRef.current);
-    }
-  }, [autoHeight, syncHeight]);
-  return /* @__PURE__ */ React10.createElement(TextFieldRoot, { className, isDisabled: disabled }, /* @__PURE__ */ React10.createElement(
-    TextFieldLabel,
-    {
-      label,
-      requiredText,
+      disabled = false,
       required,
-      subLabel,
-      ...labelProps,
-      ...!showLabel ? visuallyHiddenProps : {}
-    }
-  ), /* @__PURE__ */ React10.createElement(
-    StyledTextareaContainer,
-    {
-      invalid,
-      rows: showCount ? rows + 1 : rows
-    },
-    /* @__PURE__ */ React10.createElement(
-      StyledTextarea,
+      invalid = false,
+      assistiveText,
+      maxLength,
+      prefix = null,
+      suffix = null
+    } = 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) => {
+        const count2 = countCodePointsInString(value);
+        if (maxLength !== void 0 && count2 > maxLength) {
+          return;
+        }
+        if (nonControlled) {
+          setCount(count2);
+        }
+        onChange?.(value);
+      },
+      [maxLength, nonControlled, onChange]
+    );
+    useEffect(() => {
+      setCount(countCodePointsInString(props.value ?? ""));
+    }, [props.value]);
+    const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField(
       {
-        ref: mergeRefs(textareaRef, forwardRef4, ariaRef),
-        rows,
-        noBottomPadding: showCount,
-        ...inputProps
+        inputElementType: "input",
+        isDisabled: disabled,
+        isRequired: required,
+        validationState: invalid ? "invalid" : "valid",
+        description: !invalid && assistiveText,
+        errorMessage: invalid && assistiveText,
+        onChange: handleChange,
+        ...props
+      },
+      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);
       }
-    ),
-    showCount && /* @__PURE__ */ React10.createElement(MultiLineCounter, null, maxLength !== void 0 ? `${count}/${maxLength}` : count)
-  ), assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ React10.createElement(
-    AssistiveText,
-    {
-      invalid,
-      ...invalid ? errorMessageProps : descriptionProps
-    },
-    assistiveText
-  ));
-});
+      if (suffixRef.current !== null) {
+        suffixObserver.observe(suffixRef.current);
+      }
+      return () => {
+        suffixObserver.disconnect();
+        prefixObserver.disconnect();
+      };
+    }, []);
+    return /* @__PURE__ */ jsxs6(TextFieldRoot, { className, isDisabled: disabled, children: [
+      /* @__PURE__ */ jsx10(
+        TextFieldLabel,
+        {
+          label,
+          requiredText,
+          required,
+          subLabel,
+          ...labelProps,
+          ...!showLabel ? visuallyHiddenProps : {}
+        }
+      ),
+      /* @__PURE__ */ jsxs6(StyledInputContainer, { children: [
+        /* @__PURE__ */ jsx10(PrefixContainer, { ref: prefixRef, children: /* @__PURE__ */ jsx10(Affix, { children: prefix }) }),
+        /* @__PURE__ */ jsx10(
+          StyledInput,
+          {
+            ref: mergeRefs(forwardRef16, 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 })
+        ] })
+      ] }),
+      assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx10(
+        AssistiveText,
+        {
+          invalid,
+          ...invalid ? errorMessageProps : descriptionProps,
+          children: assistiveText
+        }
+      )
+    ] });
+  }
+);
+var TextField_default = TextField;
 var TextFieldRoot = styled9.div`
   display: flex;
   flex-direction: column;
@@ -1065,7 +991,7 @@ var TextFieldRoot = styled9.div`
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
 var TextFieldLabel = styled9(FieldLabel_default)`
-  ${theme3((o) => o.margin.bottom(8))}
+  ${theme((o) => o.margin.bottom(8))}
 `;
 var StyledInputContainer = styled9.div`
   height: 40px;
@@ -1091,7 +1017,7 @@ var SuffixContainer = styled9.span`
 var Affix = styled9.span`
   user-select: none;
 
-  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
+  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
 `;
 var StyledInput = styled9.input`
   border: none;
@@ -1113,7 +1039,7 @@ var StyledInput = styled9.input`
   /* Display box-shadow for iOS Safari */
   appearance: none;
 
-  ${(p) => theme3((o) => [
+  ${(p) => theme((o) => [
   o.bg.surface3.hover,
   o.outline.default.focus,
   p.invalid && o.outline.assertive,
@@ -1121,37 +1047,170 @@ var StyledInput = styled9.input`
 ])}
 
   &::placeholder {
-    ${theme3((o) => o.font.text3)}
+    ${theme((o) => o.font.text3)}
   }
 `;
-var StyledTextareaContainer = styled9.div`
+var SingleLineCounter = styled9.span`
+  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.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"]
+])}
+`;
+
+// src/components/TextArea/index.tsx
+import { useTextField as useTextField2 } from "@react-aria/textfield";
+import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
+import React6, { useCallback as useCallback4, useEffect as useEffect2, 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 = React6.forwardRef(
+  function TextAreaInner({ onChange, ...props }, forwardRef16) {
+    const {
+      className,
+      showCount = false,
+      showLabel = false,
+      label,
+      requiredText,
+      subLabel,
+      disabled = false,
+      required,
+      invalid = false,
+      assistiveText,
+      maxLength,
+      autoHeight = false,
+      rows: initialRows = 4
+    } = props;
+    const { visuallyHiddenProps } = useVisuallyHidden2();
+    const textareaRef = useRef2(null);
+    const ariaRef = useRef2(null);
+    const [count, setCount] = useState2(
+      countCodePointsInString(props.value ?? "")
+    );
+    const [rows, setRows] = useState2(initialRows);
+    const syncHeight = useCallback4(
+      (textarea) => {
+        const rows2 = (`${textarea.value}
+`.match(/\n/gu)?.length ?? 0) || 1;
+        setRows(initialRows <= rows2 ? rows2 : initialRows);
+      },
+      [initialRows]
+    );
+    const nonControlled = props.value === void 0;
+    const handleChange = useCallback4(
+      (value) => {
+        const count2 = countCodePointsInString(value);
+        if (maxLength !== void 0 && count2 > maxLength) {
+          return;
+        }
+        if (nonControlled) {
+          setCount(count2);
+        }
+        if (autoHeight && textareaRef.current !== null) {
+          syncHeight(textareaRef.current);
+        }
+        onChange?.(value);
+      },
+      [autoHeight, maxLength, nonControlled, onChange, syncHeight]
+    );
+    useEffect2(() => {
+      setCount(countCodePointsInString(props.value ?? ""));
+    }, [props.value]);
+    const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField2(
+      {
+        inputElementType: "textarea",
+        isDisabled: disabled,
+        isRequired: required,
+        validationState: invalid ? "invalid" : "valid",
+        description: !invalid && assistiveText,
+        errorMessage: invalid && assistiveText,
+        onChange: handleChange,
+        ...props
+      },
+      ariaRef
+    );
+    useEffect2(() => {
+      if (autoHeight && textareaRef.current !== null) {
+        syncHeight(textareaRef.current);
+      }
+    }, [autoHeight, syncHeight]);
+    return /* @__PURE__ */ jsxs7(TextFieldRoot2, { className, isDisabled: disabled, children: [
+      /* @__PURE__ */ jsx11(
+        TextFieldLabel2,
+        {
+          label,
+          requiredText,
+          required,
+          subLabel,
+          ...labelProps,
+          ...!showLabel ? visuallyHiddenProps : {}
+        }
+      ),
+      /* @__PURE__ */ jsxs7(
+        StyledTextareaContainer,
+        {
+          invalid,
+          rows: showCount ? rows + 1 : rows,
+          children: [
+            /* @__PURE__ */ jsx11(
+              StyledTextarea,
+              {
+                ref: mergeRefs(textareaRef, forwardRef16, ariaRef),
+                rows,
+                noBottomPadding: showCount,
+                ...inputProps
+              }
+            ),
+            showCount && /* @__PURE__ */ jsx11(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+          ]
+        }
+      ),
+      assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx11(
+        AssistiveText2,
+        {
+          invalid,
+          ...invalid ? errorMessageProps : descriptionProps,
+          children: assistiveText
+        }
+      )
+    ] });
+  }
+);
+var TextArea_default = TextArea;
+var TextFieldRoot2 = styled10.div`
+  display: flex;
+  flex-direction: column;
+
+  ${(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) => theme3((o) => [
+  ${(p) => theme((o) => [
   o.bg.surface3.hover,
   p.invalid && o.outline.assertive,
   o.font.text2,
   o.borderRadius(4)
 ])}
 
-  /**
-   * FIXME: o.outline.default を &:focus-within 内に書いてると、外れるときに transition が効かない
-   * 本来 o.outline.default.focus と書けば足してくれるような transition の内容を一旦明示している
-   * o.outline.default.focusWithin のようなものがあればこの行は不要になるはず
-   */
-  transition: box-shadow 0.2s;
-
   &:focus-within {
-    ${(p) => theme3((o) => p.invalid ? o.outline.assertive : o.outline.default)}
+    ${(p) => theme((o) => p.invalid ? o.outline.assertive : o.outline.default)}
   }
 
   ${({ rows }) => css3`
     height: calc(22px * ${rows} + 18px);
   `};
 `;
-var StyledTextarea = styled9.textarea`
+var StyledTextarea = styled10.textarea`
   border: none;
   outline: none;
   resize: none;
@@ -1176,7 +1235,7 @@ var StyledTextarea = styled9.textarea`
   background: none;
 
   &::placeholder {
-    ${theme3((o) => o.font.text3)}
+    ${theme((o) => o.font.text3)}
   }
 
   /* Hide scrollbar for Chrome, Safari and Opera */
@@ -1187,18 +1246,15 @@ var StyledTextarea = styled9.textarea`
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 `;
-var SingleLineCounter = styled9.span`
-  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
-`;
-var MultiLineCounter = styled9.span`
+var MultiLineCounter = styled10.span`
   position: absolute;
   bottom: 9px;
   right: 8px;
 
-  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
 `;
-var AssistiveText = styled9.p`
-  ${(p) => theme3((o) => [
+var AssistiveText2 = styled10.p`
+  ${(p) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
   o.margin.bottom(0),
@@ -1207,10 +1263,11 @@ var AssistiveText = styled9.p`
 `;
 
 // src/components/Icon/index.tsx
-import React11 from "react";
+import * as React7 from "react";
 import "@charcoal-ui/icons";
-var Icon = React11.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
-  return /* @__PURE__ */ React11.createElement(
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Icon = React7.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx12(
     "pixiv-icon",
     {
       ref,
@@ -1225,13 +1282,14 @@ var Icon = React11.forwardRef(function IconInner({ name, scale, unsafeNonGuideli
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-import React12, { useContext as useContext4, useRef as useRef3 } from "react";
+import { useContext as useContext4, forwardRef as forwardRef11, memo as memo4 } from "react";
+import * as React8 from "react";
 import {
   Overlay,
   useModalOverlay,
   useOverlay
 } from "@react-aria/overlays";
-import styled10, { css as css4, useTheme } from "styled-components";
+import styled11, { css as css4, useTheme } from "styled-components";
 import { FocusScope } from "@react-aria/focus";
 import { useDialog } from "@react-aria/dialog";
 
@@ -1246,22 +1304,20 @@ function columnSystem(span, column, gutter) {
 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";
 var DEFAULT_Z_INDEX = 10;
-function Modal({
-  children,
-  zIndex = DEFAULT_Z_INDEX,
-  portalContainer,
-  ...props
-}) {
+var Modal = forwardRef11(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
   const {
     title,
     size = "M",
     bottomSheet = false,
     isDismissable,
     onClose,
+    className,
     isOpen = false
   } = props;
-  const ref = useRef3(null);
+  const ref = useObjectRef2(external);
   const { overlayProps, underlayProps } = useOverlay(props, ref);
   const { modalProps } = useModalOverlay(
     props,
@@ -1278,8 +1334,8 @@ function Modal({
     ref
   );
   const { dialogProps, titleProps } = useDialog(props, ref);
-  const theme4 = useTheme();
-  const isMobile = useMedia(maxWidth(theme4.breakpoint.screen1)) ?? false;
+  const theme3 = useTheme();
+  const isMobile = useMedia(maxWidth(theme3.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const transition = useTransition(isOpen, {
     from: {
@@ -1298,50 +1354,54 @@ function Modal({
   });
   const showDismiss = !isMobile || bottomSheet !== true;
   return transition(
-    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ React12.createElement(Overlay, { portalContainer }, /* @__PURE__ */ React12.createElement(
+    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ jsx13(Overlay, { portalContainer, children: /* @__PURE__ */ jsx13(
       ModalBackground,
       {
         zIndex,
         ...underlayProps,
-        style: transitionEnabled ? { backgroundColor } : {}
-      },
-      /* @__PURE__ */ React12.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React12.createElement(DialogContainer, { bottomSheet, size }, /* @__PURE__ */ React12.createElement(
-        ModalDialog,
-        {
-          ref,
-          ...overlayProps,
-          ...modalProps,
-          ...dialogProps,
-          style: transitionEnabled ? { transform } : {},
-          size,
-          bottomSheet
-        },
-        /* @__PURE__ */ React12.createElement(
-          ModalContext.Provider,
+        style: transitionEnabled ? { backgroundColor } : {},
+        children: /* @__PURE__ */ jsx13(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx13(DialogContainer, { bottomSheet, size, children: /* @__PURE__ */ jsx13(
+          ModalDialog,
           {
-            value: { titleProps, title, close: onClose, showDismiss }
-          },
-          children,
-          isDismissable === true && /* @__PURE__ */ React12.createElement(
-            ModalCrossButton,
-            {
-              size: "S",
-              icon: "24/Close",
-              onClick: onClose
-            }
-          )
-        )
-      )))
-    ))
+            ref,
+            ...overlayProps,
+            ...modalProps,
+            ...dialogProps,
+            style: transitionEnabled ? { transform } : {},
+            size,
+            bottomSheet,
+            className,
+            children: /* @__PURE__ */ jsxs8(
+              ModalContext.Provider,
+              {
+                value: { titleProps, title, close: onClose, showDismiss },
+                children: [
+                  children,
+                  isDismissable === true && /* @__PURE__ */ jsx13(
+                    ModalCrossButton,
+                    {
+                      size: "S",
+                      icon: "24/Close",
+                      onClick: onClose
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }) })
+      }
+    ) })
   );
-}
-var ModalContext = React12.createContext({
+});
+var Modal_default = memo4(Modal);
+var ModalContext = React8.createContext({
   titleProps: {},
   title: "",
   close: void 0,
   showDismiss: true
 });
-var ModalBackground = animated(styled10.div`
+var ModalBackground = animated(styled11.div`
   z-index: ${({ zIndex }) => zIndex};
   overflow: scroll;
   display: flex;
@@ -1353,7 +1413,7 @@ var ModalBackground = animated(styled10.div`
 
   ${theme((o) => [o.bg.surface4])}
 `);
-var DialogContainer = styled10.div`
+var DialogContainer = styled11.div`
   position: relative;
   margin: auto;
   padding: 24px 0;
@@ -1374,7 +1434,7 @@ var DialogContainer = styled10.div`
   }
 }}px;
 
-  @media ${({ theme: theme4 }) => maxWidth(theme4.breakpoint.screen1)} {
+  @media ${({ theme: theme3 }) => maxWidth(theme3.breakpoint.screen1)} {
     width: calc(100% - 48px);
     ${(p) => p.bottomSheet !== false && css4`
         margin: 0;
@@ -1386,13 +1446,13 @@ var DialogContainer = styled10.div`
       `}
   }
 `;
-var ModalDialog = animated(styled10.div`
+var ModalDialog = animated(styled11.div`
   position: relative;
   margin: auto;
   padding: 24px 0;
 
   ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-  @media ${({ theme: theme4 }) => maxWidth(theme4.breakpoint.screen1)} {
+  @media ${({ theme: theme3 }) => maxWidth(theme3.breakpoint.screen1)} {
     ${(p) => p.bottomSheet !== false && css4`
         border-radius: 0;
         ${p.bottomSheet === "full" && css4`
@@ -1401,7 +1461,7 @@ var ModalDialog = animated(styled10.div`
       `}
   }
 `);
-var ModalCrossButton = styled10(IconButton_default)`
+var ModalCrossButton = styled11(IconButton_default)`
   position: absolute;
   top: 8px;
   right: 8px;
@@ -1410,36 +1470,36 @@ var ModalCrossButton = styled10(IconButton_default)`
 `;
 function ModalTitle(props) {
   const { titleProps, title } = useContext4(ModalContext);
-  return /* @__PURE__ */ React12.createElement(ModalHeading, { ...titleProps, ...props }, title);
+  return /* @__PURE__ */ jsx13(ModalHeading, { ...titleProps, ...props, children: title });
 }
-var ModalHeading = styled10.h3`
+var ModalHeading = styled11.h3`
   margin: 0;
   font-weight: inherit;
   font-size: inherit;
 `;
 
 // src/components/Modal/ModalPlumbing.tsx
-import React13 from "react";
-import styled11 from "styled-components";
+import styled12 from "styled-components";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function ModalHeader() {
-  return /* @__PURE__ */ React13.createElement(ModalHeaderRoot, null, /* @__PURE__ */ React13.createElement(StyledModalTitle, null));
+  return /* @__PURE__ */ jsx14(ModalHeaderRoot, { children: /* @__PURE__ */ jsx14(StyledModalTitle, {}) });
 }
-var ModalHeaderRoot = styled11.div`
+var ModalHeaderRoot = styled12.div`
   height: 64px;
   display: grid;
   align-content: center;
   justify-content: center;
 `;
-var StyledModalTitle = styled11(ModalTitle)`
+var StyledModalTitle = styled12(ModalTitle)`
   ${theme((o) => [o.font.text1, o.typography(16).bold])}
 `;
-var ModalAlign = styled11.div`
+var ModalAlign = styled12.div`
   ${theme((o) => [o.padding.horizontal(16)])}
 `;
-var ModalBody = styled11.div`
+var ModalBody = styled12.div`
   ${theme((o) => [o.padding.bottom(40)])}
 `;
-var ModalButtons = styled11.div`
+var ModalButtons = styled12.div`
   display: grid;
   grid-auto-flow: row;
   grid-row-gap: 8px;
@@ -1448,16 +1508,26 @@ var ModalButtons = styled11.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-import React14, { useImperativeHandle, useRef as useRef4 } from "react";
-import styled12, { keyframes } from "styled-components";
-function LoadingSpinner({
-  size = 48,
-  padding = 16,
-  transparent = false
-}) {
-  return /* @__PURE__ */ React14.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ React14.createElement(LoadingSpinnerIcon, null));
-}
-var LoadingSpinnerRoot = styled12.div.attrs({ role: "progressbar" })`
+import { forwardRef as forwardRef12, 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 = forwardRef12(
+  function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, className }, ref) {
+    return /* @__PURE__ */ jsx15(
+      LoadingSpinnerRoot,
+      {
+        size,
+        padding,
+        transparent,
+        className,
+        ref,
+        children: /* @__PURE__ */ jsx15(LoadingSpinnerIcon, {})
+      }
+    );
+  }
+);
+var LoadingSpinner_default = memo5(LoadingSpinner);
+var LoadingSpinnerRoot = styled13.div.attrs({ role: "progressbar" })`
   box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
@@ -1482,7 +1552,7 @@ var scaleout = keyframes`
     opacity: 0;
   }
 `;
-var Icon2 = styled12.div.attrs({ role: "presentation" })`
+var Icon2 = styled13.div.attrs({ role: "presentation" })`
   width: 1em;
   height: 1em;
   border-radius: 1em;
@@ -1494,56 +1564,90 @@ var Icon2 = styled12.div.attrs({ role: "presentation" })`
     animation: none;
   }
 `;
-var LoadingSpinnerIcon = React14.forwardRef(function LoadingSpinnerIcon2({ once = false }, ref) {
-  const iconRef = useRef4(null);
-  useImperativeHandle(ref, () => ({
-    restart: () => {
-      if (!iconRef.current) {
-        return;
+var LoadingSpinnerIcon = forwardRef12(
+  function LoadingSpinnerIcon2({ once = false }, ref) {
+    const iconRef = useRef3(null);
+    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__ */ React14.createElement(Icon2, { ref: iconRef, once });
-});
+    }));
+    return /* @__PURE__ */ jsx15(Icon2, { ref: iconRef, once });
+  }
+);
 
 // src/components/DropdownSelector/index.tsx
-import React16, { createContext as createContext2, useRef as useRef6 } from "react";
-import styled14 from "styled-components";
-import { useOverlayTriggerState } from "react-stately";
+import { useState as useState3, useRef as useRef7 } from "react";
+import styled16 from "styled-components";
 import { disabledSelector as disabledSelector4 } from "@charcoal-ui/utils";
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-import React15, { useEffect as useEffect2, useRef as useRef5 } from "react";
-import {
-  DismissButton,
-  Overlay as Overlay2,
-  usePopover
-} from "@react-aria/overlays";
-import styled13 from "styled-components";
-var DropdownPopoverDiv = styled13.div`
-  width: 100%;
-  ${theme((o) => o.margin.top(4).bottom(4))}
-`;
-function DropdownPopover({ children, state, ...props }) {
-  const ref = useRef5(null);
+import { useEffect as useEffect3, useRef as useRef5 } from "react";
+
+// src/components/DropdownSelector/Popover/index.tsx
+import { useRef as useRef4 } 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";
+var _empty = () => null;
+function Popover(props) {
+  const defaultPopoverRef = useRef4(null);
+  const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const { popoverProps, underlayProps } = 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
+    }
   );
-  useEffect2(() => {
-    if (ref.current && props.triggerRef.current) {
+  if (!props.isOpen)
+    return null;
+  return /* @__PURE__ */ jsxs9(Overlay2, { portalContainer: document.body, children: [
+    /* @__PURE__ */ jsx16("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }),
+    /* @__PURE__ */ jsxs9(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
+      /* @__PURE__ */ jsx16(DismissButton, { onDismiss: () => props.onClose() }),
+      props.children,
+      /* @__PURE__ */ jsx16(DismissButton, { onDismiss: () => props.onClose() })
+    ] })
+  ] });
+}
+var DropdownPopoverDiv = styled14.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
+import { jsx as jsx17 } from "react/jsx-runtime";
+function DropdownPopover({ children, ...props }) {
+  const ref = useRef5(null);
+  useEffect3(() => {
+    if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
-  }, [props.triggerRef]);
-  useEffect2(() => {
-    if (state.isOpen && props.value !== void 0) {
+  }, [props.triggerRef, props.isOpen]);
+  useEffect3(() => {
+    if (props.isOpen && props.value !== void 0) {
       const windowScrollY = window.scrollY;
       const windowScrollX = window.scrollX;
       const selectedElement = document.querySelector(
@@ -1553,92 +1657,163 @@ function DropdownPopover({ children, state, ...props }) {
       selectedElement?.focus();
       window.scrollTo(windowScrollX, windowScrollY);
     }
-  }, [props.value, state.isOpen]);
-  return /* @__PURE__ */ React15.createElement(Overlay2, { portalContainer: document.body }, /* @__PURE__ */ React15.createElement("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }), /* @__PURE__ */ React15.createElement(DropdownPopoverDiv, { ...popoverProps, ref }, /* @__PURE__ */ React15.createElement(DismissButton, { onDismiss: () => state.close() }), children, /* @__PURE__ */ React15.createElement(DismissButton, { onDismiss: () => state.close() })));
+  }, [props.value, props.isOpen]);
+  return /* @__PURE__ */ jsx17(
+    Popover,
+    {
+      isOpen: props.isOpen,
+      onClose: props.onClose,
+      popoverRef: ref,
+      triggerRef: props.triggerRef,
+      children
+    }
+  );
 }
 
-// src/components/DropdownSelector/index.tsx
-var DropdownSelectorContext = createContext2({
+// src/components/DropdownSelector/utils/findPreviewRecursive.tsx
+import React10 from "react";
+function findPreviewRecursive(children, value) {
+  const childArray = React10.Children.toArray(children);
+  for (let i = 0; i < childArray.length; i++) {
+    const child = childArray[i];
+    if (React10.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
+import { useRef as useRef6 } from "react";
+import styled15 from "styled-components";
+
+// src/components/DropdownSelector/MenuList/MenuListContext.ts
+import { createContext as createContext5 } from "react";
+var MenuListContext = createContext5({
+  root: void 0,
   value: "",
+  values: [],
   setValue: (_v) => {
   }
 });
-var defaultRequiredText = "*\u5FC5\u9808";
-function DropdownSelector(props) {
-  const triggerRef = useRef6(null);
-  const state = useOverlayTriggerState({});
-  let preview;
-  const childArray = React16.Children.toArray(props.children);
+
+// src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
+import React11 from "react";
+function getValuesRecursive(children, values = []) {
+  const childArray = React11.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React16.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 (React11.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__ */ React16.createElement(DropdownSelectorRoot, { "aria-disabled": props.disabled }, props.showLabel === true && /* @__PURE__ */ React16.createElement(
-    DropdownFieldLabel,
-    {
-      label: props.label,
-      required: props.required,
-      requiredText: props.requiredText ?? defaultRequiredText,
-      subLabel: props.subLabel
-    }
-  ), /* @__PURE__ */ React16.createElement(
-    DropdownButton,
-    {
-      invalid: props.invalid,
-      disabled: props.disabled,
-      onClick: () => {
-        if (props.disabled === true)
-          return;
-        state.open();
-      },
-      ref: triggerRef
-    },
-    /* @__PURE__ */ React16.createElement(DropdownButtonText, null, props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview),
-    /* @__PURE__ */ React16.createElement(DropdownButtonIcon, { name: "16/Menu" })
-  ), state.isOpen && /* @__PURE__ */ React16.createElement(
-    DropdownPopover,
+}
+
+// src/components/DropdownSelector/MenuList/index.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function MenuList(props) {
+  const root = useRef6(null);
+  const values = [];
+  getValuesRecursive(props.children, values);
+  return /* @__PURE__ */ jsx18(StyledUl, { ref: root, children: /* @__PURE__ */ jsx18(
+    MenuListContext.Provider,
     {
-      state,
-      triggerRef,
-      value: props.value
-    },
-    /* @__PURE__ */ React16.createElement(ListboxRoot, null, /* @__PURE__ */ React16.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__ */ React16.createElement(AssertiveText, { invalid: props.invalid }, props.assistiveText));
+      children: props.children
+    }
+  ) });
 }
-var ListboxRoot = styled14.ul`
-  padding-left: 0;
+var StyledUl = styled15.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 = styled14.div`
+
+// src/components/DropdownSelector/index.tsx
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+var defaultRequiredText = "*\u5FC5\u9808";
+function DropdownSelector(props) {
+  const triggerRef = useRef7(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(
+      DropdownFieldLabel,
+      {
+        label: props.label,
+        required: props.required,
+        requiredText: props.requiredText ?? defaultRequiredText,
+        subLabel: props.subLabel
+      }
+    ),
+    /* @__PURE__ */ jsxs10(
+      DropdownButton,
+      {
+        invalid: props.invalid,
+        disabled: props.disabled,
+        onClick: () => {
+          if (props.disabled === true)
+            return;
+          setIsOpen(true);
+        },
+        ref: triggerRef,
+        children: [
+          /* @__PURE__ */ jsx19(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
+          /* @__PURE__ */ jsx19(DropdownButtonIcon, { name: "16/Menu" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx19(
+      DropdownPopover,
+      {
+        isOpen,
+        onClose: () => setIsOpen(false),
+        triggerRef,
+        value: props.value,
+        children: /* @__PURE__ */ jsx19(
+          MenuList,
+          {
+            value: props.value,
+            onChange: (v) => {
+              props.onChange(v);
+              setIsOpen(false);
+            },
+            children: props.children
+          }
+        )
+      }
+    ),
+    props.assistiveText !== void 0 && /* @__PURE__ */ jsx19(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
+  ] });
+}
+var DropdownSelectorRoot = styled16.div`
   display: inline-block;
   width: 100%;
 
@@ -1647,12 +1822,12 @@ var DropdownSelectorRoot = styled14.div`
     ${theme((o) => o.disabled)}
   }
 `;
-var DropdownFieldLabel = styled14(FieldLabel_default)`
+var DropdownFieldLabel = styled16(FieldLabel_default)`
   width: 100%;
 
   ${theme((o) => o.margin.bottom(8))}
 `;
-var DropdownButton = styled14.button`
+var DropdownButton = styled16.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1675,15 +1850,15 @@ var DropdownButton = styled14.button`
   invalid === true && o.outline.assertive
 ])}
 `;
-var DropdownButtonText = styled14.span`
+var DropdownButtonText = styled16.span`
   text-align: left;
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
-var DropdownButtonIcon = styled14(Icon_default)`
+var DropdownButtonIcon = styled16(Icon_default)`
   ${theme((o) => [o.font.text2])}
 `;
-var AssertiveText = styled14.div`
+var AssertiveText = styled16.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
@@ -1691,130 +1866,205 @@ var AssertiveText = styled14.div`
 ])}
 `;
 
-// src/components/DropdownSelector/OptionItem.tsx
-import React17, { useContext as useContext5 } from "react";
-import styled15 from "styled-components";
-import { px as px3 } from "@charcoal-ui/utils";
-
-// 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/DropdownMenuItem.tsx
+import styled18 from "styled-components";
+
+// src/components/DropdownSelector/ListItem/index.tsx
+import styled17 from "styled-components";
+import { jsx as jsx20 } 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 }) });
 }
+var StyledLi = styled17.li`
+  list-style: none;
+`;
+var ItemDiv = styled17.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
+import { useCallback as useCallback5, useContext as useContext5 } from "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 } = useContext5(DropdownSelectorContext);
-  const isSelected = props.value === value;
-  const onSelect = () => {
-    setValue(props.value);
-  };
-  return /* @__PURE__ */ React17.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 } = useContext5(MenuListContext);
+  const setContextValue = useCallback5(() => {
+    if (value !== void 0)
+      setValue(value);
+  }, [value, setValue]);
+  const handleKeyDown = useCallback5(
+    (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__ */ React17.createElement(OptionCheckIcon, { name: "16/Check" }),
-    /* @__PURE__ */ React17.createElement(OptionText, { isSelected }, props.children)
+    [setContextValue, value, root, values]
   );
+  return [handleKeyDown, setContextValue];
 }
-var OptionRoot = styled15.li`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: theme4 }) => px3(theme4.spacing[4])};
-  height: 40px;
-  cursor: pointer;
-  outline: none;
 
-  ${theme((o) => [o.padding.horizontal(8)])}
+// src/components/DropdownSelector/MenuItem/index.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function MenuItem(props) {
+  const { children, as, ...rest } = props;
+  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value);
+  return /* @__PURE__ */ jsx21(
+    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
+import { useContext as useContext6 } from "react";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+function DropdownMenuItem(props) {
+  const { value: ctxValue } = useContext6(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 })
+  ] });
+}
+var StyledSpan = styled18.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 = styled15(Icon_default)`
+var Text2ColorIcon = styled18(Icon_default)`
   ${theme((o) => [o.font.text2])}
+  padding-right: 4px;
 `;
-var OptionText = styled15.span`
+
+// src/components/DropdownSelector/MenuItemGroup/index.tsx
+import styled19 from "styled-components";
+import { jsx as jsx23, 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 })
+  ] });
+}
+var TextSpan = styled19.span`
+  display: block;
+  color: ${({ theme: theme3 }) => theme3.color.text3};
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 0 8px 16px;
+`;
+var StyledUl2 = styled19.ul`
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+`;
+var StyledLi2 = styled19.li`
   display: block;
-  ${theme((o) => [o.typography(14), o.font.text2])}
-  margin-left: ${({ isSelected }) => isSelected === true ? 0 : 20}px;
 `;
 
 // src/components/SegmentedControl/index.tsx
-import React19, { forwardRef, memo, useMemo as useMemo2, useRef as useRef7 } from "react";
+import { forwardRef as forwardRef13, memo as memo6, useMemo as useMemo2, useRef as useRef8 } from "react";
 import { useRadioGroupState } from "react-stately";
 import {
   useRadio,
   useRadioGroup
 } from "@react-aria/radio";
-import styled16 from "styled-components";
+import styled20 from "styled-components";
 import { disabledSelector as disabledSelector5 } from "@charcoal-ui/utils";
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-import React18, { createContext as createContext3, useContext as useContext6 } from "react";
-var RadioContext = createContext3(null);
+import { createContext as createContext6, useContext as useContext7 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var RadioContext = createContext6(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ React18.createElement(RadioContext.Provider, { value }, children);
+  return /* @__PURE__ */ jsx24(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = useContext6(RadioContext);
+  const state = useContext7(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-var SegmentedControl = forwardRef(
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+var SegmentedControl = forwardRef13(
   function SegmentedControlInner(props, ref) {
     const ariaRadioGroupProps = useMemo2(
       () => ({
@@ -1833,23 +2083,35 @@ var SegmentedControl = forwardRef(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
     }, [props.data]);
-    return /* @__PURE__ */ React19.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ React19.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ React19.createElement(
-      Segmented,
+    return /* @__PURE__ */ jsx25(
+      SegmentedControlRoot,
       {
-        key: item.value,
-        value: item.value,
-        disabled: item.disabled
-      },
-      item.label
-    ))));
+        ref,
+        ...radioGroupProps,
+        className: props.className,
+        children: /* @__PURE__ */ jsx25(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx25(
+          Segmented,
+          {
+            value: item.value,
+            disabled: item.disabled,
+            children: item.label
+          },
+          item.value
+        )) })
+      }
+    );
   }
 );
-var SegmentedControl_default = memo(SegmentedControl);
-var Segmented = ({ children, ...props }) => {
+var SegmentedControl_default = memo6(SegmentedControl);
+var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = useRef7(null);
+  const ref = useRef8(null);
   const ariaRadioProps = useMemo2(
-    () => ({ ...props, isDisabled: props.disabled }),
+    () => ({
+      value: props.value,
+      isDisabled: props.disabled,
+      children: props.children
+    }),
     [props]
   );
   const { inputProps, isDisabled, isSelected } = useRadio(
@@ -1857,23 +2119,25 @@ var Segmented = ({ children, ...props }) => {
     state,
     ref
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ jsxs13(
     SegmentedRoot,
     {
       "aria-disabled": isDisabled || state.isReadOnly,
-      checked: isSelected
-    },
-    /* @__PURE__ */ React19.createElement(SegmentedInput, { ...inputProps, ref }),
-    /* @__PURE__ */ React19.createElement(RadioLabel2, null, /* @__PURE__ */ React19.createElement(SegmentedLabelInner, null, children))
+      checked: isSelected,
+      children: [
+        /* @__PURE__ */ jsx25(SegmentedInput, { ...inputProps, ref }),
+        /* @__PURE__ */ jsx25(RadioLabel2, { children: /* @__PURE__ */ jsx25(SegmentedLabelInner, { children: props.children }) })
+      ]
+    }
   );
 };
-var SegmentedControlRoot = styled16.div`
+var SegmentedControlRoot = styled20.div`
   display: inline-flex;
   align-items: center;
 
   ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
 `;
-var SegmentedRoot = styled16.label`
+var SegmentedRoot = styled20.label`
   position: relative;
   display: flex;
   align-items: center;
@@ -1892,7 +2156,7 @@ var SegmentedRoot = styled16.label`
   checked === true ? o.font.text5 : o.font.text2
 ])}
 `;
-var SegmentedInput = styled16.input`
+var SegmentedInput = styled20.input`
   position: absolute;
 
   height: 0px;
@@ -1906,24 +2170,25 @@ var SegmentedInput = styled16.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = styled16.div`
+var RadioLabel2 = styled20.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = styled16.div`
+var SegmentedLabelInner = styled20.div`
   ${theme((o) => [o.typography(14)])}
 `;
 
 // src/components/Checkbox/index.tsx
-import React20, { forwardRef as forwardRef2, memo as memo2, useMemo as useMemo3 } from "react";
-import styled17, { css as css5 } from "styled-components";
+import { forwardRef as forwardRef14, memo as memo7, useMemo as useMemo3 } from "react";
+import styled21, { css as css5 } from "styled-components";
 import { useCheckbox } from "@react-aria/checkbox";
-import { useObjectRef } from "@react-aria/utils";
+import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "react-stately";
-import { disabledSelector as disabledSelector6, px as px4 } from "@charcoal-ui/utils";
-var Checkbox = forwardRef2(
+import { disabledSelector as disabledSelector6, px as px3 } from "@charcoal-ui/utils";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+var Checkbox = forwardRef14(
   function CheckboxInner(props, ref) {
     const ariaCheckboxProps = useMemo3(
       () => ({
@@ -1936,17 +2201,23 @@ var Checkbox = forwardRef2(
       [props]
     );
     const state = useToggleState2(ariaCheckboxProps);
-    const objectRef = useObjectRef(ref);
+    const objectRef = useObjectRef3(ref);
     const { inputProps } = useCheckbox(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-    return /* @__PURE__ */ React20.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React20.createElement(CheckboxRoot, null, /* @__PURE__ */ React20.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ React20.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ React20.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ React20.createElement(InputLabel, null, props.children));
+    return /* @__PURE__ */ jsxs14(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
+      /* @__PURE__ */ jsxs14(CheckboxRoot, { children: [
+        /* @__PURE__ */ jsx26(CheckboxInput, { type: "checkbox", ...inputProps }),
+        /* @__PURE__ */ jsx26(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ jsx26(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
+      ] }),
+      "children" in props && /* @__PURE__ */ jsx26(InputLabel, { children: props.children })
+    ] });
   }
 );
-var Checkbox_default = memo2(Checkbox);
+var Checkbox_default = memo7(Checkbox);
 var hiddenCss = css5`
   visibility: hidden;
 `;
-var InputRoot = styled17.label`
+var InputRoot = styled21.label`
   position: relative;
   display: flex;
 
@@ -1955,13 +2226,13 @@ var InputRoot = styled17.label`
     cursor: default;
   }
 
-  gap: ${({ theme: theme4 }) => px4(theme4.spacing[4])};
+  gap: ${({ theme: theme3 }) => px3(theme3.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
-var CheckboxRoot = styled17.div`
+var CheckboxRoot = styled21.div`
   position: relative;
 `;
-var CheckboxInput = styled17.input`
+var CheckboxInput = styled21.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -1976,7 +2247,7 @@ var CheckboxInput = styled17.input`
     &:not(:checked) {
       border-width: 2px;
       border-style: solid;
-      border-color: ${({ theme: theme4 }) => theme4.color.text4};
+      border-color: ${({ theme: theme3 }) => theme3.color.text4};
     }
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
 
@@ -1984,7 +2255,7 @@ var CheckboxInput = styled17.input`
     transition: all 0.2s !important;
   }
 `;
-var CheckboxInputOverlay = styled17.div`
+var CheckboxInputOverlay = styled21.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -1997,7 +2268,7 @@ var CheckboxInputOverlay = styled17.div`
 
   ${({ checked }) => checked !== true && hiddenCss};
 `;
-var InputLabel = styled17.div`
+var InputLabel = styled21.div`
   ${theme((o) => [o.font.text2])}
 
   font-size: 14px;
@@ -2006,20 +2277,17 @@ var InputLabel = styled17.div`
 `;
 
 // src/components/TagItem/index.tsx
-import React21, {
-  forwardRef as forwardRef3,
-  memo as memo3,
-  useMemo as useMemo4
-} from "react";
-import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
-import styled18, { css as css6 } from "styled-components";
-import { disabledSelector as disabledSelector7, px as px5 } from "@charcoal-ui/utils";
+import { forwardRef as forwardRef15, 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 { 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";
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = forwardRef3(
+var TagItem = forwardRef15(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2031,7 +2299,7 @@ var TagItem = forwardRef3(
     className,
     ...props
   }, _ref) {
-    const ref = useObjectRef2(_ref);
+    const ref = useObjectRef4(_ref);
     const ariaButtonProps = useMemo4(
       () => ({
         elementType: "a",
@@ -2042,22 +2310,30 @@ var TagItem = forwardRef3(
     );
     const { buttonProps } = useButton(ariaButtonProps, ref);
     const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-    return /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ jsxs15(
       TagItemRoot,
       {
         ref,
         size: hasTranslatedLabel ? "M" : size,
         status,
         ...buttonProps,
-        className
-      },
-      /* @__PURE__ */ React21.createElement(Background, { bgColor, bgImage, status }),
-      /* @__PURE__ */ React21.createElement(Inner, null, /* @__PURE__ */ React21.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ React21.createElement(TranslatedLabel, null, /* @__PURE__ */ React21.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ React21.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ React21.createElement(Icon_default, { name: "16/Remove" }))
+        className,
+        children: [
+          /* @__PURE__ */ jsx27(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 })
+            ] }),
+            status === "active" && /* @__PURE__ */ jsx27(Icon_default, { name: "16/Remove" })
+          ] })
+        ]
+      }
     );
   }
 );
-var TagItem_default = memo3(TagItem);
-var TagItemRoot = styled18.a`
+var TagItem_default = memo8(TagItem);
+var TagItemRoot = styled22.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2082,7 +2358,7 @@ var TagItemRoot = styled18.a`
     cursor: default;
   }
 `;
-var Background = styled18.div`
+var Background = styled22.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2109,9 +2385,9 @@ var Background = styled18.div`
       }
     `}
 `;
-var Inner = styled18.div`
+var Inner = styled22.div`
   display: inline-flex;
-  gap: ${({ theme: theme4 }) => px5(theme4.spacing[8])};
+  gap: ${({ theme: theme3 }) => px4(theme3.spacing[8])};
   align-items: center;
   z-index: 2;
 `;
@@ -2124,10 +2400,10 @@ var translateLabelCSS = css6`
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = styled18.div`
+var LabelWrapper = styled22.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = styled18.span`
+var Label3 = styled22.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2136,7 +2412,7 @@ var Label3 = styled18.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = styled18.div`
+var TranslatedLabel = styled22.div`
   ${theme((o) => [o.typography(12).bold])}
 `;
 export {
@@ -2145,26 +2421,28 @@ export {
   Checkbox_default as Checkbox,
   Clickable_default as Clickable,
   ComponentAbstraction,
+  DropdownMenuItem,
   DropdownSelector,
   Icon_default as Icon,
   IconButton_default as IconButton,
-  LoadingSpinner,
+  LoadingSpinner_default as LoadingSpinner,
   LoadingSpinnerIcon,
-  Modal,
+  MenuItemGroup,
+  Modal_default as Modal,
   ModalAlign,
   ModalBody,
   ModalButtons,
   ModalHeader,
-  MultiSelect,
+  MultiSelect_default as MultiSelect,
   MultiSelectGroup,
-  OptionItem,
   OverlayProvider,
-  Radio,
+  Radio_default as Radio,
   RadioGroup,
   SSRProvider,
   SegmentedControl_default as SegmentedControl,
-  SwitchCheckbox as Switch,
+  Switch_default as Switch,
   TagItem_default as TagItem,
+  TextArea_default as TextArea,
   TextField_default as TextField,
   useComponentAbstraction
 };