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

package/dist/index.cjs.js

@@ -35,23 +35,24 @@ __export(src_exports, {
   DropdownSelector: () => DropdownSelector,
   Icon: () => Icon_default,
   IconButton: () => IconButton_default,
-  LoadingSpinner: () => LoadingSpinner,
+  LoadingSpinner: () => LoadingSpinner_default,
   LoadingSpinnerIcon: () => LoadingSpinnerIcon,
   MenuItemGroup: () => MenuItemGroup,
-  Modal: () => Modal,
+  Modal: () => Modal_default,
   ModalAlign: () => ModalAlign,
   ModalBody: () => ModalBody,
   ModalButtons: () => ModalButtons,
   ModalHeader: () => ModalHeader,
-  MultiSelect: () => MultiSelect,
+  MultiSelect: () => MultiSelect_default,
   MultiSelectGroup: () => MultiSelectGroup,
   OverlayProvider: () => import_overlays.OverlayProvider,
-  Radio: () => Radio,
+  Radio: () => Radio_default,
   RadioGroup: () => RadioGroup,
   SSRProvider: () => import_ssr.SSRProvider,
   SegmentedControl: () => SegmentedControl_default,
-  Switch: () => SwitchCheckbox,
+  Switch: () => Switch_default,
   TagItem: () => TagItem_default,
+  TextArea: () => TextArea_default,
   TextField: () => TextField_default,
   useComponentAbstraction: () => useComponentAbstraction
 });
@@ -116,6 +117,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
 var import_styled_components2 = __toESM(require("styled-components"));
@@ -387,18 +403,13 @@ 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,
-  disabled = false,
-  children
-}) {
+var Radio = (0, import_react4.forwardRef)(function RadioInner({ value, disabled = false, children, className }, ref) {
   const {
     name,
     selected,
     disabled: isParentDisabled,
     readonly,
-    hasError,
+    invalid,
     onChange
   } = (0, import_react4.useContext)(RadioGroupContext);
   (0, import_warning.default)(
@@ -414,25 +425,27 @@ function Radio({
     },
     [onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(RadioRoot, { "aria-disabled": isDisabled || isReadonly, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(RadioRoot, { "aria-disabled": isDisabled || isReadonly, className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       RadioInput,
       {
         name,
         value,
-        checked: forceChecked || isSelected,
-        hasError,
+        checked: isSelected,
+        invalid,
         onChange: handleChange,
-        disabled: isDisabled || isReadonly
+        disabled: isDisabled || isReadonly,
+        ref
       }
     ),
     children != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioLabel, { children })
   ] });
-}
+});
+var Radio_default = (0, import_react4.memo)(Radio);
 var RadioRoot = import_styled_components6.default.label`
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: ${({ theme: theme4 }) => (0, import_utils2.px)(theme4.spacing[4])};
+  grid-gap: ${({ theme: theme3 }) => (0, import_utils2.px)(theme3.spacing[4])};
   align-items: center;
   cursor: pointer;
 
@@ -450,19 +463,18 @@ var RadioInput = import_styled_components6.default.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 {
@@ -491,14 +503,14 @@ var RadioLabel = import_styled_components6.default.div`
 var StyledRadioGroup = import_styled_components6.default.div`
   display: grid;
   grid-template-columns: 1fr;
-  grid-gap: ${({ theme: theme4 }) => (0, import_utils2.px)(theme4.spacing[8])};
+  grid-gap: ${({ theme: theme3 }) => (0, import_utils2.px)(theme3.spacing[8])};
 `;
 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> ?"
@@ -513,7 +525,7 @@ function RadioGroup({
   onChange,
   disabled,
   readonly,
-  hasError,
+  invalid,
   children
 }) {
   const handleChange = (0, import_react4.useCallback)(
@@ -530,7 +542,7 @@ function RadioGroup({
         selected: value,
         disabled: disabled ?? false,
         readonly: readonly ?? false,
-        hasError: hasError ?? false,
+        invalid: invalid ?? false,
         onChange: handleChange
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -539,7 +551,7 @@ function RadioGroup({
           role: "radiogroup",
           "aria-orientation": "vertical",
           "aria-label": label,
-          "aria-invalid": hasError,
+          "aria-invalid": invalid,
           className,
           children
         }
@@ -571,66 +583,71 @@ var MultiSelectGroupContext = (0, import_react5.createContext)({
 
 // src/components/MultiSelect/index.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function MultiSelect({
-  value,
-  disabled = false,
-  onChange,
-  variant = "default",
-  children
-}) {
-  const {
-    name,
-    selected,
-    disabled: parentDisabled,
-    readonly,
-    invalid,
-    onChange: parentOnChange
-  } = (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);
-  const isDisabled = disabled || parentDisabled || readonly;
-  const handleChange = (0, import_react6.useCallback)(
-    (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__ */ (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 MultiSelect = (0, import_react6.forwardRef)(
+  function MultiSelectInner({
+    value,
+    disabled = false,
+    onChange,
+    variant = "default",
+    className,
+    children
+  }, ref) {
+    const {
+      name,
+      selected,
+      disabled: parentDisabled,
+      readonly,
+      invalid,
+      onChange: parentOnChange
+    } = (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);
+    const isDisabled = disabled || parentDisabled || readonly;
+    const handleChange = (0, import_react6.useCallback)(
+      (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__ */ (0, import_jsx_runtime7.jsxs)(MultiSelectRoot, { "aria-disabled": isDisabled, className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        MultiSelectInput,
+        {
+          ...{
+            name,
+            value,
+            invalid
+          },
+          checked: isSelected,
+          disabled: isDisabled,
+          onChange: handleChange,
+          overlay: variant === "overlay",
+          "aria-invalid": invalid,
+          ref
+        }
+      ),
+      /* @__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 MultiSelect_default = (0, import_react6.memo)(MultiSelect);
 var MultiSelectRoot = import_styled_components7.default.label`
   display: grid;
   grid-template-columns: auto 1fr;
@@ -640,7 +657,7 @@ var MultiSelectRoot = import_styled_components7.default.label`
   ${import_utils3.disabledSelector} {
     cursor: default;
   }
-  gap: ${({ theme: theme4 }) => (0, import_utils3.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme3 }) => (0, import_utils3.px)(theme3.spacing[4])};
   ${theme((o) => o.disabled)}
 `;
 var MultiSelectLabel = import_styled_components7.default.div`
@@ -686,7 +703,7 @@ var MultiSelectInputOverlay = import_styled_components7.default.div`
 ])}
 
   ${({ overlay }) => overlay && import_styled_components7.css`
-      border-color: ${({ theme: theme4 }) => theme4.color.text5};
+      border-color: ${({ theme: theme3 }) => theme3.color.text5};
       border-width: 2px;
       border-style: solid;
     `}
@@ -739,28 +756,32 @@ 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_utils5 = require("@react-aria/utils");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function SwitchCheckbox(props) {
-  const { disabled, className } = props;
-  const ariaSwitchProps = (0, import_react7.useMemo)(
-    () => ({
-      ...props,
-      "aria-label": "children" in props ? void 0 : props.label,
-      isDisabled: props.disabled,
-      isSelected: props.checked
-    }),
-    [props]
-  );
-  const state = (0, import_react_stately.useToggleState)(ariaSwitchProps);
-  const ref = (0, import_react7.useRef)(null);
-  const {
-    inputProps: { className: _className, type: _type, ...rest }
-  } = (0, import_switch.useSwitch)(ariaSwitchProps, state, ref);
-  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 SwitchCheckbox = (0, import_react7.forwardRef)(
+  function SwitchCheckboxInner(props, external) {
+    const { disabled, className } = props;
+    const ariaSwitchProps = (0, import_react7.useMemo)(
+      () => ({
+        ...props,
+        "aria-label": "children" in props ? void 0 : props.label,
+        isDisabled: props.disabled,
+        isSelected: props.checked
+      }),
+      [props]
+    );
+    const state = (0, import_react_stately.useToggleState)(ariaSwitchProps);
+    const ref = (0, import_utils5.useObjectRef)(external);
+    const {
+      inputProps: { className: _className, type: _type, ...rest }
+    } = (0, import_switch.useSwitch)(ariaSwitchProps, state, ref);
+    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 Switch_default = (0, import_react7.memo)(SwitchCheckbox);
 var Label = import_styled_components8.default.label`
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -907,248 +928,122 @@ 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) => {
-    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 = React5.forwardRef(
-  function TextField2(props, ref) {
-    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 = React5.forwardRef(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef12) {
-  const {
-    className,
-    showLabel = false,
-    showCount = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    assistiveText,
-    maxLength,
-    prefix = null,
-    suffix = null
-  } = props;
-  const { visuallyHiddenProps } = (0, import_visually_hidden.useVisuallyHidden)();
-  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_react8.useCallback)(
-    (value) => {
-      const count2 = countCodePointsInString(value);
-      if (maxLength !== void 0 && count2 > maxLength) {
-        return;
-      }
-      if (nonControlled) {
-        setCount(count2);
-      }
-      onChange?.(value);
-    },
-    [maxLength, nonControlled, onChange]
-  );
-  (0, import_react8.useEffect)(() => {
-    setCount(countCodePointsInString(props.value ?? ""));
-  }, [props.value]);
-  const { inputProps, labelProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
-    {
-      inputElementType: "input",
-      isDisabled: disabled,
-      isRequired: required,
-      validationState: invalid ? "invalid" : "valid",
-      description: !invalid && assistiveText,
-      errorMessage: invalid && assistiveText,
-      onChange: handleChange,
-      ...props
-    },
-    ariaRef
-  );
-  (0, import_react8.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__ */ (0, import_jsx_runtime10.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      TextFieldLabel,
+  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef16) {
+    const {
+      className,
+      showLabel = false,
+      showCount = false,
+      label,
+      requiredText,
+      subLabel,
+      disabled = false,
+      required,
+      invalid = false,
+      assistiveText,
+      maxLength,
+      prefix = null,
+      suffix = null
+    } = props;
+    const { visuallyHiddenProps } = (0, import_visually_hidden.useVisuallyHidden)();
+    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_react8.useCallback)(
+      (value) => {
+        const count2 = countCodePointsInString(value);
+        if (maxLength !== void 0 && count2 > maxLength) {
+          return;
+        }
+        if (nonControlled) {
+          setCount(count2);
+        }
+        onChange?.(value);
+      },
+      [maxLength, nonControlled, onChange]
+    );
+    (0, import_react8.useEffect)(() => {
+      setCount(countCodePointsInString(props.value ?? ""));
+    }, [props.value]);
+    const { inputProps, labelProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
       {
-        label,
-        requiredText,
-        required,
-        subLabel,
-        ...labelProps,
-        ...!showLabel ? visuallyHiddenProps : {}
+        inputElementType: "input",
+        isDisabled: disabled,
+        isRequired: required,
+        validationState: invalid ? "invalid" : "valid",
+        description: !invalid && assistiveText,
+        errorMessage: invalid && assistiveText,
+        onChange: handleChange,
+        ...props
+      },
+      ariaRef
+    );
+    (0, import_react8.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);
       }
-    ),
-    /* @__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 }) }),
+      if (suffixRef.current !== null) {
+        suffixObserver.observe(suffixRef.current);
+      }
+      return () => {
+        suffixObserver.disconnect();
+        prefixObserver.disconnect();
+      };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        StyledInput,
+        TextFieldLabel,
         {
-          ref: mergeRefs(forwardRef12, ariaRef),
-          invalid,
-          extraLeftPadding: prefixWidth,
-          extraRightPadding: suffixWidth,
-          ...inputProps
+          label,
+          requiredText,
+          required,
+          subLabel,
+          ...labelProps,
+          ...!showLabel ? visuallyHiddenProps : {}
         }
       ),
-      /* @__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 = React5.forwardRef(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef12) {
-  const {
-    className,
-    showCount = false,
-    showLabel = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    assistiveText,
-    maxLength,
-    autoHeight = false,
-    rows: initialRows = 4
-  } = props;
-  const { visuallyHiddenProps } = (0, import_visually_hidden.useVisuallyHidden)();
-  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;
-      setRows(initialRows <= rows2 ? rows2 : initialRows);
-    },
-    [initialRows]
-  );
-  const nonControlled = props.value === void 0;
-  const handleChange = (0, import_react8.useCallback)(
-    (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]
-  );
-  (0, import_react8.useEffect)(() => {
-    setCount(countCodePointsInString(props.value ?? ""));
-  }, [props.value]);
-  const { inputProps, labelProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
-    {
-      inputElementType: "textarea",
-      isDisabled: disabled,
-      isRequired: required,
-      validationState: invalid ? "invalid" : "valid",
-      description: !invalid && assistiveText,
-      errorMessage: invalid && assistiveText,
-      onChange: handleChange,
-      ...props
-    },
-    ariaRef
-  );
-  (0, import_react8.useEffect)(() => {
-    if (autoHeight && textareaRef.current !== null) {
-      syncHeight(textareaRef.current);
-    }
-  }, [autoHeight, syncHeight]);
-  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)(
-      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
-      }
-    )
-  ] });
-});
+      /* @__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(forwardRef16, 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 TextField_default = TextField;
 var TextFieldRoot = import_styled_components10.default.div`
   display: flex;
   flex-direction: column;
@@ -1156,7 +1051,7 @@ var TextFieldRoot = import_styled_components10.default.div`
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
 var TextFieldLabel = (0, import_styled_components10.default)(FieldLabel_default)`
-  ${theme3((o) => o.margin.bottom(8))}
+  ${theme((o) => o.margin.bottom(8))}
 `;
 var StyledInputContainer = import_styled_components10.default.div`
   height: 40px;
@@ -1182,7 +1077,7 @@ var SuffixContainer = import_styled_components10.default.span`
 var Affix = import_styled_components10.default.span`
   user-select: none;
 
-  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
+  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
 `;
 var StyledInput = import_styled_components10.default.input`
   border: none;
@@ -1204,7 +1099,7 @@ var StyledInput = import_styled_components10.default.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,
@@ -1212,37 +1107,170 @@ var StyledInput = import_styled_components10.default.input`
 ])}
 
   &::placeholder {
-    ${theme3((o) => o.font.text3)}
+    ${theme((o) => o.font.text3)}
+  }
+`;
+var SingleLineCounter = import_styled_components10.default.span`
+  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+`;
+var AssistiveText = import_styled_components10.default.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
+var import_textfield2 = require("@react-aria/textfield");
+var import_visually_hidden2 = require("@react-aria/visually-hidden");
+var import_react9 = __toESM(require("react"));
+var import_styled_components11 = __toESM(require("styled-components"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TextArea = import_react9.default.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 } = (0, import_visually_hidden2.useVisuallyHidden)();
+    const textareaRef = (0, import_react9.useRef)(null);
+    const ariaRef = (0, import_react9.useRef)(null);
+    const [count, setCount] = (0, import_react9.useState)(
+      countCodePointsInString(props.value ?? "")
+    );
+    const [rows, setRows] = (0, import_react9.useState)(initialRows);
+    const syncHeight = (0, import_react9.useCallback)(
+      (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 = (0, import_react9.useCallback)(
+      (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]
+    );
+    (0, import_react9.useEffect)(() => {
+      setCount(countCodePointsInString(props.value ?? ""));
+    }, [props.value]);
+    const { inputProps, labelProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(
+      {
+        inputElementType: "textarea",
+        isDisabled: disabled,
+        isRequired: required,
+        validationState: invalid ? "invalid" : "valid",
+        description: !invalid && assistiveText,
+        errorMessage: invalid && assistiveText,
+        onChange: handleChange,
+        ...props
+      },
+      ariaRef
+    );
+    (0, import_react9.useEffect)(() => {
+      if (autoHeight && textareaRef.current !== null) {
+        syncHeight(textareaRef.current);
+      }
+    }, [autoHeight, syncHeight]);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TextFieldRoot2, { className, isDisabled: disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        TextFieldLabel2,
+        {
+          label,
+          requiredText,
+          required,
+          subLabel,
+          ...labelProps,
+          ...!showLabel ? visuallyHiddenProps : {}
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        StyledTextareaContainer,
+        {
+          invalid,
+          rows: showCount ? rows + 1 : rows,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              StyledTextarea,
+              {
+                ref: mergeRefs(textareaRef, forwardRef16, ariaRef),
+                rows,
+                noBottomPadding: showCount,
+                ...inputProps
+              }
+            ),
+            showCount && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+          ]
+        }
+      ),
+      assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        AssistiveText2,
+        {
+          invalid,
+          ...invalid ? errorMessageProps : descriptionProps,
+          children: assistiveText
+        }
+      )
+    ] });
   }
+);
+var TextArea_default = TextArea;
+var TextFieldRoot2 = import_styled_components11.default.div`
+  display: flex;
+  flex-direction: column;
+
+  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
+`;
+var TextFieldLabel2 = (0, import_styled_components11.default)(FieldLabel_default)`
+  ${theme((o) => o.margin.bottom(8))}
 `;
-var StyledTextareaContainer = import_styled_components10.default.div`
+var StyledTextareaContainer = import_styled_components11.default.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 }) => import_styled_components10.css`
+  ${({ rows }) => import_styled_components11.css`
     height: calc(22px * ${rows} + 18px);
   `};
 `;
-var StyledTextarea = import_styled_components10.default.textarea`
+var StyledTextarea = import_styled_components11.default.textarea`
   border: none;
   outline: none;
   resize: none;
@@ -1257,7 +1285,7 @@ var StyledTextarea = import_styled_components10.default.textarea`
   line-height: calc(22px / 0.875);
   padding: calc(9px / 0.875) 0 ${(p) => p.noBottomPadding ? 0 : ""};
 
-  ${({ rows = 1 }) => import_styled_components10.css`
+  ${({ rows = 1 }) => import_styled_components11.css`
     height: calc(22px / 0.875 * ${rows});
   `};
 
@@ -1267,7 +1295,7 @@ var StyledTextarea = import_styled_components10.default.textarea`
   background: none;
 
   &::placeholder {
-    ${theme3((o) => o.font.text3)}
+    ${theme((o) => o.font.text3)}
   }
 
   /* Hide scrollbar for Chrome, Safari and Opera */
@@ -1278,18 +1306,15 @@ var StyledTextarea = import_styled_components10.default.textarea`
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 `;
-var SingleLineCounter = import_styled_components10.default.span`
-  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
-`;
-var MultiLineCounter = import_styled_components10.default.span`
+var MultiLineCounter = import_styled_components11.default.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 = import_styled_components10.default.p`
-  ${(p) => theme3((o) => [
+var AssistiveText2 = import_styled_components11.default.p`
+  ${(p) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
   o.margin.bottom(0),
@@ -1298,11 +1323,11 @@ var AssistiveText = import_styled_components10.default.p`
 `;
 
 // src/components/Icon/index.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_icons = require("@charcoal-ui/icons");
-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)(
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Icon = React7.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "pixiv-icon",
     {
       ref,
@@ -1317,10 +1342,10 @@ var Icon = React6.forwardRef(function IconInner({ name, scale, unsafeNonGuidelin
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-var import_react9 = require("react");
-var React7 = __toESM(require("react"));
+var import_react10 = require("react");
+var React8 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_styled_components12 = __toESM(require("styled-components"));
 var import_focus = require("@react-aria/focus");
 var import_dialog = require("@react-aria/dialog");
 
@@ -1332,26 +1357,23 @@ function columnSystem(span, column, gutter) {
 }
 
 // src/components/Modal/index.tsx
-var import_utils5 = require("@charcoal-ui/utils");
-var import_styled11 = require("@charcoal-ui/styled");
+var import_utils6 = require("@charcoal-ui/utils");
+var import_styled12 = require("@charcoal-ui/styled");
 var import_react_spring = require("react-spring");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_utils7 = require("@react-aria/utils");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-function Modal({
-  children,
-  zIndex = DEFAULT_Z_INDEX,
-  portalContainer,
-  ...props
-}) {
+var Modal = (0, import_react10.forwardRef)(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
   const {
     title,
     size = "M",
     bottomSheet = false,
     isDismissable,
     onClose,
+    className,
     isOpen = false
   } = props;
-  const ref = (0, import_react9.useRef)(null);
+  const ref = (0, import_utils7.useObjectRef)(external);
   const { overlayProps, underlayProps } = (0, import_overlays2.useOverlay)(props, ref);
   const { modalProps } = (0, import_overlays2.useModalOverlay)(
     props,
@@ -1368,8 +1390,8 @@ function Modal({
     ref
   );
   const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
-  const theme4 = (0, import_styled_components11.useTheme)();
-  const isMobile = (0, import_styled11.useMedia)((0, import_utils5.maxWidth)(theme4.breakpoint.screen1)) ?? false;
+  const theme3 = (0, import_styled_components12.useTheme)();
+  const isMobile = (0, import_styled12.useMedia)((0, import_utils6.maxWidth)(theme3.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const transition = (0, import_react_spring.useTransition)(isOpen, {
     from: {
@@ -1388,13 +1410,13 @@ function Modal({
   });
   const showDismiss = !isMobile || bottomSheet !== true;
   return transition(
-    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_overlays2.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_overlays2.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ModalBackground,
       {
         zIndex,
         ...underlayProps,
         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)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogContainer, { bottomSheet, size, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           ModalDialog,
           {
             ref,
@@ -1404,13 +1426,14 @@ function Modal({
             style: transitionEnabled ? { transform } : {},
             size,
             bottomSheet,
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            className,
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               ModalContext.Provider,
               {
                 value: { titleProps, title, close: onClose, showDismiss },
                 children: [
                   children,
-                  isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     ModalCrossButton,
                     {
                       size: "S",
@@ -1426,14 +1449,15 @@ function Modal({
       }
     ) })
   );
-}
-var ModalContext = React7.createContext({
+});
+var Modal_default = (0, import_react10.memo)(Modal);
+var ModalContext = React8.createContext({
   titleProps: {},
   title: "",
   close: void 0,
   showDismiss: true
 });
-var ModalBackground = (0, import_react_spring.animated)(import_styled_components11.default.div`
+var ModalBackground = (0, import_react_spring.animated)(import_styled_components12.default.div`
   z-index: ${({ zIndex }) => zIndex};
   overflow: scroll;
   display: flex;
@@ -1445,7 +1469,7 @@ var ModalBackground = (0, import_react_spring.animated)(import_styled_components
 
   ${theme((o) => [o.bg.surface4])}
 `);
-var DialogContainer = import_styled_components11.default.div`
+var DialogContainer = import_styled_components12.default.div`
   position: relative;
   margin: auto;
   padding: 24px 0;
@@ -1466,9 +1490,9 @@ var DialogContainer = import_styled_components11.default.div`
   }
 }}px;
 
-  @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
+  @media ${({ theme: theme3 }) => (0, import_utils6.maxWidth)(theme3.breakpoint.screen1)} {
     width: calc(100% - 48px);
-    ${(p) => p.bottomSheet !== false && import_styled_components11.css`
+    ${(p) => p.bottomSheet !== false && import_styled_components12.css`
         margin: 0;
         padding: 0;
         bottom: 0;
@@ -1478,22 +1502,22 @@ var DialogContainer = import_styled_components11.default.div`
       `}
   }
 `;
-var ModalDialog = (0, import_react_spring.animated)(import_styled_components11.default.div`
+var ModalDialog = (0, import_react_spring.animated)(import_styled_components12.default.div`
   position: relative;
   margin: auto;
   padding: 24px 0;
 
   ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-  @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
-    ${(p) => p.bottomSheet !== false && import_styled_components11.css`
+  @media ${({ theme: theme3 }) => (0, import_utils6.maxWidth)(theme3.breakpoint.screen1)} {
+    ${(p) => p.bottomSheet !== false && import_styled_components12.css`
         border-radius: 0;
-        ${p.bottomSheet === "full" && import_styled_components11.css`
+        ${p.bottomSheet === "full" && import_styled_components12.css`
           height: 100%;
         `}
       `}
   }
 `);
-var ModalCrossButton = (0, import_styled_components11.default)(IconButton_default)`
+var ModalCrossButton = (0, import_styled_components12.default)(IconButton_default)`
   position: absolute;
   top: 8px;
   right: 8px;
@@ -1501,37 +1525,37 @@ var ModalCrossButton = (0, import_styled_components11.default)(IconButton_defaul
   ${theme((o) => [o.font.text3.hover.press])}
 `;
 function ModalTitle(props) {
-  const { titleProps, title } = (0, import_react9.useContext)(ModalContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
+  const { titleProps, title } = (0, import_react10.useContext)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
 }
-var ModalHeading = import_styled_components11.default.h3`
+var ModalHeading = import_styled_components12.default.h3`
   margin: 0;
   font-weight: inherit;
   font-size: inherit;
 `;
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_styled_components12 = __toESM(require("styled-components"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_styled_components13 = __toESM(require("styled-components"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ModalHeader() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalHeaderRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledModalTitle, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalHeaderRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledModalTitle, {}) });
 }
-var ModalHeaderRoot = import_styled_components12.default.div`
+var ModalHeaderRoot = import_styled_components13.default.div`
   height: 64px;
   display: grid;
   align-content: center;
   justify-content: center;
 `;
-var StyledModalTitle = (0, import_styled_components12.default)(ModalTitle)`
+var StyledModalTitle = (0, import_styled_components13.default)(ModalTitle)`
   ${theme((o) => [o.font.text1, o.typography(16).bold])}
 `;
-var ModalAlign = import_styled_components12.default.div`
+var ModalAlign = import_styled_components13.default.div`
   ${theme((o) => [o.padding.horizontal(16)])}
 `;
-var ModalBody = import_styled_components12.default.div`
+var ModalBody = import_styled_components13.default.div`
   ${theme((o) => [o.padding.bottom(40)])}
 `;
-var ModalButtons = import_styled_components12.default.div`
+var ModalButtons = import_styled_components13.default.div`
   display: grid;
   grid-auto-flow: row;
   grid-row-gap: 8px;
@@ -1540,17 +1564,26 @@ var ModalButtons = import_styled_components12.default.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-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__ */ (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" })`
+var import_react11 = require("react");
+var import_styled_components14 = __toESM(require("styled-components"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var LoadingSpinner = (0, import_react11.forwardRef)(
+  function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, className }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      LoadingSpinnerRoot,
+      {
+        size,
+        padding,
+        transparent,
+        className,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LoadingSpinnerIcon, {})
+      }
+    );
+  }
+);
+var LoadingSpinner_default = (0, import_react11.memo)(LoadingSpinner);
+var LoadingSpinnerRoot = import_styled_components14.default.div.attrs({ role: "progressbar" })`
   box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
@@ -1564,7 +1597,7 @@ var LoadingSpinnerRoot = import_styled_components13.default.div.attrs({ role: "p
   transparent ? o.bg.transparent : o.bg.background1
 ])}
 `;
-var scaleout = import_styled_components13.keyframes`
+var scaleout = import_styled_components14.keyframes`
   from {
     transform: scale(0);
     opacity: 1;
@@ -1575,7 +1608,7 @@ var scaleout = import_styled_components13.keyframes`
     opacity: 0;
   }
 `;
-var Icon2 = import_styled_components13.default.div.attrs({ role: "presentation" })`
+var Icon2 = import_styled_components14.default.div.attrs({ role: "presentation" })`
   width: 1em;
   height: 1em;
   border-radius: 1em;
@@ -1587,10 +1620,10 @@ var Icon2 = import_styled_components13.default.div.attrs({ role: "presentation"
     animation: none;
   }
 `;
-var LoadingSpinnerIcon = (0, import_react10.forwardRef)(
+var LoadingSpinnerIcon = (0, import_react11.forwardRef)(
   function LoadingSpinnerIcon2({ once = false }, ref) {
-    const iconRef = (0, import_react10.useRef)(null);
-    (0, import_react10.useImperativeHandle)(ref, () => ({
+    const iconRef = (0, import_react11.useRef)(null);
+    (0, import_react11.useImperativeHandle)(ref, () => ({
       restart: () => {
         if (!iconRef.current) {
           return;
@@ -1600,26 +1633,26 @@ var LoadingSpinnerIcon = (0, import_react10.forwardRef)(
         delete iconRef.current.dataset.resetAnimation;
       }
     }));
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon2, { ref: iconRef, once });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon2, { ref: iconRef, once });
   }
 );
 
 // src/components/DropdownSelector/index.tsx
-var import_react17 = require("react");
-var import_styled_components16 = __toESM(require("styled-components"));
-var import_utils6 = require("@charcoal-ui/utils");
+var import_react18 = require("react");
+var import_styled_components17 = __toESM(require("styled-components"));
+var import_utils8 = require("@charcoal-ui/utils");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_overlays3 = require("@react-aria/overlays");
-var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_styled_components15 = __toESM(require("styled-components"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = (0, import_react11.useRef)(null);
+  const defaultPopoverRef = (0, import_react12.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const { popoverProps, underlayProps } = (0, import_overlays3.usePopover)(
     {
@@ -1637,16 +1670,16 @@ function Popover(props) {
   );
   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() }),
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_overlays3.Overlay, { portalContainer: document.body, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_overlays3.DismissButton, { onDismiss: () => props.onClose() }),
       props.children,
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_overlays3.DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_overlays3.DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
-var DropdownPopoverDiv = import_styled_components14.default.div`
+var DropdownPopoverDiv = import_styled_components15.default.div`
   margin: 4px 0;
   list-style: none;
   overflow: auto;
@@ -1661,15 +1694,15 @@ var DropdownPopoverDiv = import_styled_components14.default.div`
 `;
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function DropdownPopover({ children, ...props }) {
-  const ref = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const ref = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (props.isOpen && props.value !== void 0) {
       const windowScrollY = window.scrollY;
       const windowScrollX = window.scrollX;
@@ -1681,7 +1714,7 @@ function DropdownPopover({ children, ...props }) {
       window.scrollTo(windowScrollX, windowScrollY);
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Popover,
     {
       isOpen: props.isOpen,
@@ -1694,12 +1727,12 @@ function DropdownPopover({ children, ...props }) {
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 function findPreviewRecursive(children, value) {
-  const childArray = import_react13.default.Children.toArray(children);
+  const childArray = import_react14.default.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (import_react13.default.isValidElement(child)) {
+    if (import_react14.default.isValidElement(child)) {
       if ("value" in child.props) {
         const childValue = child.props.value;
         if (childValue === value && "children" in child.props) {
@@ -1721,12 +1754,12 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react16 = require("react");
-var import_styled_components15 = __toESM(require("styled-components"));
+var import_react17 = require("react");
+var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react14 = require("react");
-var MenuListContext = (0, import_react14.createContext)({
+var import_react15 = require("react");
+var MenuListContext = (0, import_react15.createContext)({
   root: void 0,
   value: "",
   values: [],
@@ -1735,12 +1768,12 @@ var MenuListContext = (0, import_react14.createContext)({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 function getValuesRecursive(children, values = []) {
-  const childArray = import_react15.default.Children.toArray(children);
+  const childArray = import_react16.default.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (import_react15.default.isValidElement(child)) {
+    if (import_react16.default.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
         const childValue = props.value;
@@ -1754,12 +1787,12 @@ function getValuesRecursive(children, values = []) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function MenuList(props) {
-  const root = (0, import_react16.useRef)(null);
+  const root = (0, import_react17.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     MenuListContext.Provider,
     {
       value: {
@@ -1774,20 +1807,20 @@ function MenuList(props) {
     }
   ) });
 }
-var StyledUl = import_styled_components15.default.ul`
+var StyledUl = import_styled_components16.default.ul`
   padding: 0;
   margin: 0;
 `;
 
 // src/components/DropdownSelector/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = 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 triggerRef = (0, import_react18.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react18.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
+    props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       DropdownFieldLabel,
       {
         label: props.label,
@@ -1796,7 +1829,7 @@ function DropdownSelector(props) {
         subLabel: props.subLabel
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       DropdownButton,
       {
         invalid: props.invalid,
@@ -1808,19 +1841,19 @@ function DropdownSelector(props) {
         },
         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_runtime19.jsx)(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DropdownButtonIcon, { name: "16/Menu" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       DropdownPopover,
       {
         isOpen,
         onClose: () => setIsOpen(false),
         triggerRef,
         value: props.value,
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           MenuList,
           {
             value: props.value,
@@ -1833,24 +1866,24 @@ function DropdownSelector(props) {
         )
       }
     ),
-    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = import_styled_components16.default.div`
+var DropdownSelectorRoot = import_styled_components17.default.div`
   display: inline-block;
   width: 100%;
 
-  ${import_utils6.disabledSelector} {
+  ${import_utils8.disabledSelector} {
     cursor: default;
     ${theme((o) => o.disabled)}
   }
 `;
-var DropdownFieldLabel = (0, import_styled_components16.default)(FieldLabel_default)`
+var DropdownFieldLabel = (0, import_styled_components17.default)(FieldLabel_default)`
   width: 100%;
 
   ${theme((o) => o.margin.bottom(8))}
 `;
-var DropdownButton = import_styled_components16.default.button`
+var DropdownButton = import_styled_components17.default.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1860,7 +1893,7 @@ var DropdownButton = import_styled_components16.default.button`
   box-sizing: border-box;
   cursor: pointer;
 
-  ${import_utils6.disabledSelector} {
+  ${import_utils8.disabledSelector} {
     cursor: default;
   }
 
@@ -1873,15 +1906,15 @@ var DropdownButton = import_styled_components16.default.button`
   invalid === true && o.outline.assertive
 ])}
 `;
-var DropdownButtonText = import_styled_components16.default.span`
+var DropdownButtonText = import_styled_components17.default.span`
   text-align: left;
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
-var DropdownButtonIcon = (0, import_styled_components16.default)(Icon_default)`
+var DropdownButtonIcon = (0, import_styled_components17.default)(Icon_default)`
   ${theme((o) => [o.font.text2])}
 `;
-var AssertiveText = import_styled_components16.default.div`
+var AssertiveText = import_styled_components17.default.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
@@ -1890,19 +1923,19 @@ var AssertiveText = import_styled_components16.default.div`
 `;
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_styled_components18 = __toESM(require("styled-components"));
+var import_styled_components19 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/ListItem/index.tsx
-var import_styled_components17 = __toESM(require("styled-components"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_styled_components18 = __toESM(require("styled-components"));
+var import_jsx_runtime20 = 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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemDiv, { ...rest, children: props.children }) });
 }
-var StyledLi = import_styled_components17.default.li`
+var StyledLi = import_styled_components18.default.li`
   list-style: none;
 `;
-var ItemDiv = import_styled_components17.default.div`
+var ItemDiv = import_styled_components18.default.div`
   display: flex;
   align-items: center;
   min-height: 40px;
@@ -1923,7 +1956,7 @@ var ItemDiv = import_styled_components17.default.div`
 `;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1956,12 +1989,12 @@ function scrollIfNeeded(element) {
 
 // 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)(() => {
+  const { setValue, root, values } = (0, import_react19.useContext)(MenuListContext);
+  const setContextValue = (0, import_react19.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react18.useCallback)(
+  const handleKeyDown = (0, import_react19.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         setContextValue();
@@ -1988,11 +2021,11 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ListItem,
     {
       ...rest,
@@ -2008,85 +2041,85 @@ function MenuItem(props) {
 }
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_react19 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
-  const { value: ctxValue } = (0, import_react19.useContext)(MenuListContext);
+  const { value: ctxValue } = (0, import_react20.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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MenuItem, { ...rest, children: [
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text2ColorIcon, { name: "16/Check" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledSpan, { isSelected, children: props.children })
   ] });
 }
-var StyledSpan = import_styled_components18.default.span`
+var StyledSpan = import_styled_components19.default.span`
   ${theme((o) => [o.typography(14), o.font.text2])};
   display: flex;
   align-items: center;
   width: 100%;
   margin-left: ${({ isSelected }) => isSelected === true ? 0 : 20}px;
 `;
-var Text2ColorIcon = (0, import_styled_components18.default)(Icon_default)`
+var Text2ColorIcon = (0, import_styled_components19.default)(Icon_default)`
   ${theme((o) => [o.font.text2])}
   padding-right: 4px;
 `;
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-var import_styled_components19 = __toESM(require("styled-components"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_styled_components20 = __toESM(require("styled-components"));
+var import_jsx_runtime23 = 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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(StyledLi2, { role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TextSpan, { children: props.text }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledUl2, { role: "group", children: props.children })
   ] });
 }
-var TextSpan = import_styled_components19.default.span`
+var TextSpan = import_styled_components20.default.span`
   display: block;
-  color: ${({ theme: theme4 }) => theme4.color.text3};
+  color: ${({ theme: theme3 }) => theme3.color.text3};
   font-size: 12px;
   font-weight: bold;
   padding: 12px 0 8px 16px;
 `;
-var StyledUl2 = import_styled_components19.default.ul`
+var StyledUl2 = import_styled_components20.default.ul`
   padding-left: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   overflow: hidden;
 `;
-var StyledLi2 = import_styled_components19.default.li`
+var StyledLi2 = import_styled_components20.default.li`
   display: block;
 `;
 
 // src/components/SegmentedControl/index.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_stately2 = require("react-stately");
 var import_radio = require("@react-aria/radio");
-var import_styled_components20 = __toESM(require("styled-components"));
-var import_utils7 = require("@charcoal-ui/utils");
+var import_styled_components21 = __toESM(require("styled-components"));
+var import_utils9 = require("@charcoal-ui/utils");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react20 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var RadioContext = (0, import_react20.createContext)(null);
+var import_react21 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var RadioContext = (0, import_react21.createContext)(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react20.useContext)(RadioContext);
+  const state = (0, import_react21.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react21.forwardRef)(
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var SegmentedControl = (0, import_react22.forwardRef)(
   function SegmentedControlInner(props, ref) {
-    const ariaRadioGroupProps = (0, import_react21.useMemo)(
+    const ariaRadioGroupProps = (0, import_react22.useMemo)(
       () => ({
         ...props,
         isDisabled: props.disabled,
@@ -2098,27 +2131,35 @@ var SegmentedControl = (0, import_react21.forwardRef)(
     );
     const state = (0, import_react_stately2.useRadioGroupState)(ariaRadioGroupProps);
     const { radioGroupProps } = (0, import_radio.useRadioGroup)(ariaRadioGroupProps, state);
-    const segmentedControlItems = (0, import_react21.useMemo)(() => {
+    const segmentedControlItems = (0, import_react22.useMemo)(() => {
       return props.data.map(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
     }, [props.data]);
-    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,
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      SegmentedControlRoot,
       {
-        value: item.value,
-        disabled: item.disabled,
-        children: item.label
-      },
-      item.value
-    )) }) });
+        ref,
+        ...radioGroupProps,
+        className: props.className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          Segmented,
+          {
+            value: item.value,
+            disabled: item.disabled,
+            children: item.label
+          },
+          item.value
+        )) })
+      }
+    );
   }
 );
-var SegmentedControl_default = (0, import_react21.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react22.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react21.useRef)(null);
-  const ariaRadioProps = (0, import_react21.useMemo)(
+  const ref = (0, import_react22.useRef)(null);
+  const ariaRadioProps = (0, import_react22.useMemo)(
     () => ({
       value: props.value,
       isDisabled: props.disabled,
@@ -2131,32 +2172,32 @@ var Segmented = (props) => {
     state,
     ref
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     SegmentedRoot,
     {
       "aria-disabled": isDisabled || state.isReadOnly,
       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 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SegmentedInput, { ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioLabel2, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SegmentedLabelInner, { children: props.children }) })
       ]
     }
   );
 };
-var SegmentedControlRoot = import_styled_components20.default.div`
+var SegmentedControlRoot = import_styled_components21.default.div`
   display: inline-flex;
   align-items: center;
 
   ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
 `;
-var SegmentedRoot = import_styled_components20.default.label`
+var SegmentedRoot = import_styled_components21.default.label`
   position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
   height: 32px;
 
-  ${import_utils7.disabledSelector} {
+  ${import_utils9.disabledSelector} {
     cursor: default;
   }
 
@@ -2168,7 +2209,7 @@ var SegmentedRoot = import_styled_components20.default.label`
   checked === true ? o.font.text5 : o.font.text2
 ])}
 `;
-var SegmentedInput = import_styled_components20.default.input`
+var SegmentedInput = import_styled_components21.default.input`
   position: absolute;
 
   height: 0px;
@@ -2182,27 +2223,27 @@ var SegmentedInput = import_styled_components20.default.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = import_styled_components20.default.div`
+var RadioLabel2 = import_styled_components21.default.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = import_styled_components20.default.div`
+var SegmentedLabelInner = import_styled_components21.default.div`
   ${theme((o) => [o.typography(14)])}
 `;
 
 // src/components/Checkbox/index.tsx
-var import_react22 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"));
+var import_react23 = require("react");
+var import_styled_components22 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
-var import_utils8 = require("@react-aria/utils");
+var import_utils10 = 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)(
+var import_utils11 = require("@charcoal-ui/utils");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Checkbox = (0, import_react23.forwardRef)(
   function CheckboxInner(props, ref) {
-    const ariaCheckboxProps = (0, import_react22.useMemo)(
+    const ariaCheckboxProps = (0, import_react23.useMemo)(
       () => ({
         ...props,
         isSelected: props.checked,
@@ -2213,38 +2254,38 @@ var Checkbox = (0, import_react22.forwardRef)(
       [props]
     );
     const state = (0, import_react_stately3.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils8.useObjectRef)(ref);
+    const objectRef = (0, import_utils10.useObjectRef)(ref);
     const { inputProps } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-    return /* @__PURE__ */ (0, import_jsx_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 }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(CheckboxRoot, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxInput, { type: "checkbox", ...inputProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
       ] }),
-      "children" in props && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputLabel, { children: props.children })
+      "children" in props && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InputLabel, { children: props.children })
     ] });
   }
 );
-var Checkbox_default = (0, import_react22.memo)(Checkbox);
-var hiddenCss = import_styled_components21.css`
+var Checkbox_default = (0, import_react23.memo)(Checkbox);
+var hiddenCss = import_styled_components22.css`
   visibility: hidden;
 `;
-var InputRoot = import_styled_components21.default.label`
+var InputRoot = import_styled_components22.default.label`
   position: relative;
   display: flex;
 
   cursor: pointer;
-  ${import_utils9.disabledSelector} {
+  ${import_utils11.disabledSelector} {
     cursor: default;
   }
 
-  gap: ${({ theme: theme4 }) => (0, import_utils9.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme3 }) => (0, import_utils11.px)(theme3.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
-var CheckboxRoot = import_styled_components21.default.div`
+var CheckboxRoot = import_styled_components22.default.div`
   position: relative;
 `;
-var CheckboxInput = import_styled_components21.default.input`
+var CheckboxInput = import_styled_components22.default.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -2259,7 +2300,7 @@ var CheckboxInput = import_styled_components21.default.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)])}
 
@@ -2267,7 +2308,7 @@ var CheckboxInput = import_styled_components21.default.input`
     transition: all 0.2s !important;
   }
 `;
-var CheckboxInputOverlay = import_styled_components21.default.div`
+var CheckboxInputOverlay = import_styled_components22.default.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -2280,7 +2321,7 @@ var CheckboxInputOverlay = import_styled_components21.default.div`
 
   ${({ checked }) => checked !== true && hiddenCss};
 `;
-var InputLabel = import_styled_components21.default.div`
+var InputLabel = import_styled_components22.default.div`
   ${theme((o) => [o.font.text2])}
 
   font-size: 14px;
@@ -2289,17 +2330,17 @@ var InputLabel = import_styled_components21.default.div`
 `;
 
 // src/components/TagItem/index.tsx
-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_react24 = require("react");
+var import_utils12 = require("@react-aria/utils");
+var import_styled_components23 = __toESM(require("styled-components"));
+var import_utils13 = require("@charcoal-ui/utils");
 var import_button = require("@react-aria/button");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react23.forwardRef)(
+var TagItem = (0, import_react24.forwardRef)(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2311,8 +2352,8 @@ var TagItem = (0, import_react23.forwardRef)(
     className,
     ...props
   }, _ref) {
-    const ref = (0, import_utils10.useObjectRef)(_ref);
-    const ariaButtonProps = (0, import_react23.useMemo)(
+    const ref = (0, import_utils12.useObjectRef)(_ref);
+    const ariaButtonProps = (0, import_react24.useMemo)(
       () => ({
         elementType: "a",
         isDisabled: disabled,
@@ -2322,7 +2363,7 @@ var TagItem = (0, import_react23.forwardRef)(
     );
     const { buttonProps } = (0, import_button.useButton)(ariaButtonProps, ref);
     const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       TagItemRoot,
       {
         ref,
@@ -2331,21 +2372,21 @@ var TagItem = (0, import_react23.forwardRef)(
         ...buttonProps,
         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 })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Background, { bgColor, bgImage, status }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Inner, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
+              hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslatedLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Label3, { children: translatedLabel }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Label3, { children: label })
             ] }),
-            status === "active" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: "16/Remove" })
+            status === "active" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "16/Remove" })
           ] })
         ]
       }
     );
   }
 );
-var TagItem_default = (0, import_react23.memo)(TagItem);
-var TagItemRoot = import_styled_components22.default.a`
+var TagItem_default = (0, import_react24.memo)(TagItem);
+var TagItemRoot = import_styled_components23.default.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2365,12 +2406,12 @@ var TagItemRoot = import_styled_components22.default.a`
   ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
 ])}
 
-  ${import_utils11.disabledSelector} {
+  ${import_utils13.disabledSelector} {
     ${theme((o) => [o.disabled])}
     cursor: default;
   }
 `;
-var Background = import_styled_components22.default.div`
+var Background = import_styled_components23.default.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2381,7 +2422,7 @@ var Background = import_styled_components22.default.div`
   background-color: ${({ bgColor }) => bgColor};
   ${({ status }) => status === "inactive" && theme((o) => o.bg.surface3)}
 
-  ${({ bgImage }) => bgImage !== void 0 && import_styled_components22.css`
+  ${({ bgImage }) => bgImage !== void 0 && import_styled_components23.css`
       ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
@@ -2397,25 +2438,25 @@ var Background = import_styled_components22.default.div`
       }
     `}
 `;
-var Inner = import_styled_components22.default.div`
+var Inner = import_styled_components23.default.div`
   display: inline-flex;
-  gap: ${({ theme: theme4 }) => (0, import_utils11.px)(theme4.spacing[8])};
+  gap: ${({ theme: theme3 }) => (0, import_utils13.px)(theme3.spacing[8])};
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = import_styled_components22.css`
+var labelCSS = import_styled_components23.css`
   ${theme((o) => [o.typography(14).bold])}
 `;
-var translateLabelCSS = import_styled_components22.css`
+var translateLabelCSS = import_styled_components23.css`
   display: flex;
   align-items: center;
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = import_styled_components22.default.div`
+var LabelWrapper = import_styled_components23.default.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = import_styled_components22.default.span`
+var Label3 = import_styled_components23.default.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2424,7 +2465,7 @@ var Label3 = import_styled_components22.default.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = import_styled_components22.default.div`
+var TranslatedLabel = import_styled_components23.default.div`
   ${theme((o) => [o.typography(12).bold])}
 `;
 // Annotate the CommonJS export names for ESM import in node:
@@ -2455,6 +2496,7 @@ var TranslatedLabel = import_styled_components22.default.div`
   SegmentedControl,
   Switch,
   TagItem,
+  TextArea,
   TextField,
   useComponentAbstraction
 });