@charcoal-ui/react 4.3.0-beta.5 → 4.4.0

package/dist/index.cjs.js

@@ -48,6 +48,8 @@ __export(src_exports, {
   ModalButtons: () => ModalButtons,
   ModalCloseButton: () => ModalCloseButton,
   ModalHeader: () => ModalHeader,
+  MultiSelect: () => MultiSelect_default,
+  MultiSelectGroup: () => MultiSelectGroup,
   OverlayProvider: () => import_overlays.OverlayProvider,
   Radio: () => Radio_default,
   RadioGroup: () => RadioGroup,
@@ -422,31 +424,144 @@ var RadioGroup = (0, import_react9.forwardRef)(function RadioGroupInner({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "radiogroup", "aria-disabled": disabled, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": props["aria-labelledby"], "aria-orientation": ariaOrientation, className: classNames, ref, children }) });
 });
 
-// src/components/Switch/index.tsx
+// src/components/MultiSelect/index.tsx
 var import_react11 = require("react");
-var import_utils = require("@react-aria/utils");
+var import_warning2 = __toESM(require("warning"));
 
-// src/components/Switch/SwitchInput/index.tsx
+// src/components/MultiSelect/context.ts
 var import_react10 = require("react");
+var MultiSelectGroupContext = (0, import_react10.createContext)({
+  name: void 0,
+  selected: [],
+  disabled: false,
+  readonly: false,
+  invalid: false,
+  onChange() {
+    throw new Error("Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?");
+  }
+});
+
+// src/components/Icon/index.tsx
+var React5 = __toESM(require("react"));
+var import_icons = require("@charcoal-ui/icons");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var SwitchInput = (0, import_react10.forwardRef)(function SwitchInput2({
+var Icon = React5.forwardRef(function IconInner({
+  name,
+  scale,
+  unsafeNonGuidelineScale,
+  className,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+});
+var Icon_default = Icon;
+
+// src/components/MultiSelect/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var MultiSelect = (0, import_react11.forwardRef)(function MultiSelectInner({
+  value,
+  disabled = false,
+  onChange,
+  variant = "default",
+  className,
+  children
+}, ref) {
+  const {
+    name,
+    selected,
+    disabled: parentDisabled,
+    readonly,
+    invalid,
+    onChange: parentOnChange
+  } = (0, import_react11.useContext)(MultiSelectGroupContext);
+  (0, import_warning2.default)(
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    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_react11.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]);
+  const classNames = useClassNames("charcoal-multi-select", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { "aria-disabled": isDisabled, className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { className: "charcoal-multi-select-input", name, value, type: "checkbox", checked: isSelected, disabled: isDisabled, onChange: handleChange, "data-overlay": variant === "overlay", "aria-invalid": invalid, ref }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-multi-select-overlay", "data-overlay": variant === "overlay", "aria-invalid": invalid, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon_default, { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
+    Boolean(children) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-multi-select-label", children })
+  ] });
+});
+var MultiSelect_default = (0, import_react11.memo)(MultiSelect);
+function MultiSelectGroup({
+  className,
+  style,
+  name,
+  label,
+  selected,
+  onChange,
+  disabled = false,
+  readonly = false,
+  invalid = false,
+  children
+}) {
+  const handleChange = (0, import_react11.useCallback)((payload) => {
+    const index = selected.indexOf(payload.value);
+    if (payload.selected) {
+      if (index < 0) {
+        onChange([...selected, payload.value]);
+      }
+    } else {
+      if (index >= 0) {
+        onChange([...selected.slice(0, index), ...selected.slice(index + 1)]);
+      }
+    }
+  }, [onChange, selected]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MultiSelectGroupContext.Provider, { value: {
+    name,
+    selected: Array.from(new Set(selected)),
+    disabled,
+    readonly,
+    invalid,
+    onChange: handleChange
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, style, "aria-label": label, "data-testid": "SelectGroup", children }) });
+}
+
+// src/components/Switch/index.tsx
+var import_react13 = require("react");
+var import_utils = require("@react-aria/utils");
+
+// src/components/Switch/SwitchInput/index.tsx
+var import_react12 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SwitchInput = (0, import_react12.forwardRef)(function SwitchInput2({
   onChange,
   className,
   ...props
 }, ref) {
-  const handleChange = (0, import_react10.useCallback)((e) => {
+  const handleChange = (0, import_react12.useCallback)((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-switch-input", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
 });
 var SwitchInput_default = SwitchInput;
 
 // src/components/Switch/SwitchWithLabel.tsx
-var React5 = __toESM(require("react"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var SwitchWithLabel = React5.memo(function SwitchWithLabel2({
+var React6 = __toESM(require("react"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SwitchWithLabel = React6.memo(function SwitchWithLabel2({
   children,
   className,
   disabled,
@@ -454,15 +569,15 @@ var SwitchWithLabel = React5.memo(function SwitchWithLabel2({
   input
 }) {
   const classNames = useClassNames("charcoal-switch__label", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
     input,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-switch__label_div", children })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "charcoal-switch__label_div", children })
   ] });
 });
 
 // src/components/Switch/index.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Switch = (0, import_react11.forwardRef)(function Switch2({
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Switch = (0, import_react13.forwardRef)(function Switch2({
   children,
   onChange,
   disabled,
@@ -472,23 +587,23 @@ var Switch = (0, import_react11.forwardRef)(function Switch2({
 }, ref) {
   const htmlId = (0, import_utils.useId)(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
+  const input = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Switch_default = (0, import_react11.memo)(Switch);
+var Switch_default = (0, import_react13.memo)(Switch);
 
 // src/components/TextField/index.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react14 = require("react");
-var React7 = __toESM(require("react"));
+var import_react16 = require("react");
+var React8 = __toESM(require("react"));
 
 // src/components/FieldLabel/index.tsx
-var React6 = __toESM(require("react"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FieldLabel = React6.forwardRef(function FieldLabel2({
+var React7 = __toESM(require("react"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var FieldLabel = React7.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -498,10 +613,10 @@ var FieldLabel = React6.forwardRef(function FieldLabel2({
   ...labelProps
 }, ref) {
   const classNames = useClassNames("charcoal-field-label-root", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style, className: classNames, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
-    required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "charcoal-field-label-required-text", children: requiredText }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: subLabel }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style, className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
+    required && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "charcoal-field-label-required-text", children: requiredText }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: subLabel }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
@@ -524,9 +639,9 @@ function countCodePointsInString(string) {
 }
 
 // src/components/TextField/useFocusWithClick.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 function useFocusWithClick(containerRef, inputRef) {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const el = containerRef.current;
     if (el) {
       const handleDown = (e) => {
@@ -546,15 +661,15 @@ function useFocusWithClick(containerRef, inputRef) {
 var import_utils2 = require("@react-aria/utils");
 
 // src/_lib/createDivComponent.tsx
-var import_react13 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function createDivComponent(mainClassName) {
-  return (0, import_react13.forwardRef)(function DivComponent({
+  return (0, import_react15.forwardRef)(function DivComponent({
     className,
     ...props
   }, ref) {
     const classNames = useClassNames(mainClassName, className);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: classNames, ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classNames, ref, ...props });
   });
 }
 
@@ -562,8 +677,8 @@ function createDivComponent(mainClassName) {
 var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
 
 // src/components/TextField/index.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var TextField = React7.forwardRef(function SingleLineTextFieldInner({
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var TextField = React8.forwardRef(function SingleLineTextFieldInner({
   assistiveText,
   className,
   disabled = false,
@@ -582,13 +697,13 @@ var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   value,
   getCount = countCodePointsInString,
   ...props
-}, forwardRef23) {
-  const inputRef = (0, import_react14.useRef)(null);
+}, forwardRef24) {
+  const inputRef = (0, import_react16.useRef)(null);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden.useVisuallyHidden)();
-  const [count, setCount] = (0, import_react14.useState)(getCount(value ?? ""));
-  const handleChange = (0, import_react14.useCallback)((e) => {
+  const [count, setCount] = (0, import_react16.useState)(getCount(value ?? ""));
+  const handleChange = (0, import_react16.useCallback)((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -597,37 +712,37 @@ var TextField = React7.forwardRef(function SingleLineTextFieldInner({
     setCount(count2);
     onChange?.(value2);
   }, [getCount, maxLength, onChange]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  const containerRef = (0, import_react14.useRef)(null);
+  const containerRef = (0, import_react16.useRef)(null);
   useFocusWithClick(containerRef, inputRef);
   const inputId = (0, import_utils2.useId)(props.id);
   const describedbyId = (0, import_utils2.useId)();
   const labelledbyId = (0, import_utils2.useId)();
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
   const classNames = useClassNames("charcoal-text-field-root", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
-      prefix && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "charcoal-text-field-prefix", children: prefix }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: (0, import_utils2.mergeRefs)(forwardRef23, inputRef), type, value, ...props }),
-      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "charcoal-text-field-suffix", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "charcoal-text-field-prefix", children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: (0, import_utils2.mergeRefs)(forwardRef24, inputRef), type, value, ...props }),
+      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "charcoal-text-field-suffix", children: [
         suffix,
-        showCount && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
 
 // src/components/TextArea/index.tsx
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_utils3 = require("@react-aria/utils");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var TextArea = (0, import_react15.forwardRef)(function TextAreaInner({
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var TextArea = (0, import_react17.forwardRef)(function TextAreaInner({
   onChange,
   className,
   value,
@@ -645,20 +760,20 @@ var TextArea = (0, import_react15.forwardRef)(function TextAreaInner({
   invalid,
   getCount = countCodePointsInString,
   ...props
-}, forwardRef23) {
+}, forwardRef24) {
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden2.useVisuallyHidden)();
-  const textareaRef = (0, import_react15.useRef)(null);
-  const [count, setCount] = (0, import_react15.useState)(getCount(value ?? ""));
-  const [rows, setRows] = (0, import_react15.useState)(initialRows);
-  const syncHeight = (0, import_react15.useCallback)((textarea) => {
+  const textareaRef = (0, import_react17.useRef)(null);
+  const [count, setCount] = (0, import_react17.useState)(getCount(value ?? ""));
+  const [rows, setRows] = (0, import_react17.useState)(initialRows);
+  const syncHeight = (0, import_react17.useCallback)((textarea) => {
     const rows2 = (`${textarea.value}
 `.match(/\n/gu)?.length ?? 0) || 1;
     setRows(initialRows <= rows2 ? rows2 : initialRows);
   }, [initialRows]);
   const nonControlled = value === void 0;
-  const handleChange = (0, import_react15.useCallback)((e) => {
+  const handleChange = (0, import_react17.useCallback)((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -672,58 +787,43 @@ var TextArea = (0, import_react15.forwardRef)(function TextAreaInner({
     }
     onChange?.(value2);
   }, [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
   }, [autoHeight, syncHeight]);
-  const containerRef = (0, import_react15.useRef)(null);
+  const containerRef = (0, import_react17.useRef)(null);
   useFocusWithClick(containerRef, textareaRef);
   const textAreaId = (0, import_utils3.useId)(props.id);
   const describedbyId = (0, import_utils3.useId)();
   const labelledbyId = (0, import_utils3.useId)();
   const classNames = useClassNames("charcoal-text-area-root", className);
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
       "--charcoal-text-area-rows": `${showCount ? rows + 1 : rows}`
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef23, textareaRef), rows, value, disabled, ...props }),
-      showCount && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef24, textareaRef), rows, value, disabled, ...props }),
+      showCount && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
 
-// src/components/Icon/index.tsx
-var React8 = __toESM(require("react"));
-var import_icons = require("@charcoal-ui/icons");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Icon = React8.forwardRef(function IconInner({
-  name,
-  scale,
-  unsafeNonGuidelineScale,
-  className,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
-});
-var Icon_default = Icon;
-
 // src/components/Modal/index.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var React12 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
 var import_react_spring = require("react-spring");
 var import_utils4 = require("@react-aria/utils");
 
 // src/components/Modal/Dialog/index.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_dialog = require("@react-aria/dialog");
 
 // src/_lib/useForwardedRef.tsx
@@ -743,21 +843,21 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Dialog = (0, import_react16.forwardRef)(function Dialog2({
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Dialog = (0, import_react18.forwardRef)(function Dialog2({
   size,
   bottomSheet,
   className,
   ...props
-}, forwardRef23) {
-  const ref = useForwardedRef(forwardRef23);
+}, forwardRef24) {
+  const ref = useForwardedRef(forwardRef24);
   const {
     dialogProps
   } = (0, import_dialog.useDialog)({
     role: "dialog"
   }, ref);
   const classNames = useClassNames("charcoal-modal-dialog", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, "data-size": size, ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, "data-size": size, ref, ...props });
 });
 
 // src/components/Modal/ModalBackgroundContext.tsx
@@ -769,9 +869,9 @@ var React11 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 function usePreventScroll(element, isOpen) {
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -826,9 +926,9 @@ function useWindowWidth() {
 }
 
 // src/components/Modal/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react18.forwardRef)(function ModalInner({
+var Modal = (0, import_react20.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -893,15 +993,15 @@ var Modal = (0, import_react18.forwardRef)(function ModalInner({
     backgroundColor,
     overflow,
     transform
-  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_spring.animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
+  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_spring.animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
     backgroundColor,
     overflow,
     zIndex
   } : {
     zIndex
-  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
+  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
     transform
-  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ModalContext.Provider, { value: {
+  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ModalContext.Provider, { value: {
     titleProps: {},
     title,
     close: onClose,
@@ -909,11 +1009,11 @@ var Modal = (0, import_react18.forwardRef)(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var AnimatedDialog = (0, import_react_spring.animated)(Dialog);
-var Modal_default = (0, import_react18.memo)(Modal);
+var Modal_default = (0, import_react20.memo)(Modal);
 var ModalContext = React12.createContext({
   titleProps: {},
   title: "",
@@ -922,41 +1022,41 @@ var ModalContext = React12.createContext({
   bottomSheet: false
 });
 function ModalCloseButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
 }
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_react19 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react19.useContext)(ModalContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
+  const modalCtx = (0, import_react21.useContext)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
 }
 var ModalAlign = createDivComponent("charcoal-modal-align");
 var ModalBody = createDivComponent("charcoal-modal-body");
 var ModalButtons = createDivComponent("charcoal-modal-buttons");
 
 // src/components/LoadingSpinner/index.tsx
-var import_react20 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react20.forwardRef)(function LoadingSpinnerInner({
+var import_react22 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var LoadingSpinner = (0, import_react22.forwardRef)(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
   ...props
 }, ref) {
   const classNames = useClassNames("charcoal-loading-spinner", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "progressbar", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { role: "progressbar", style: {
     "--charcoal-loading-spinner-size": `${size}px`,
     "--charcoal-loading-spinner-padding": `${padding}px`
-  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LoadingSpinnerIcon, {}) });
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = (0, import_react20.memo)(LoadingSpinner);
-var LoadingSpinnerIcon = (0, import_react20.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinner_default = (0, import_react22.memo)(LoadingSpinner);
+var LoadingSpinnerIcon = (0, import_react22.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react20.useRef)(null);
-  (0, import_react20.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -966,22 +1066,22 @@ var LoadingSpinnerIcon = (0, import_react20.forwardRef)(function LoadingSpinnerI
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
 });
 
 // src/components/DropdownSelector/index.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_overlays4 = require("@react-aria/overlays");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = (0, import_react21.useRef)(null);
+  const defaultPopoverRef = (0, import_react23.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const {
     popoverProps,
@@ -998,39 +1098,39 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = (0, import_react21.useContext)(ModalBackgroundContext);
+  const modalBackground = (0, import_react23.useContext)(ModalBackgroundContext);
   usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...underlayProps, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...underlayProps, style: {
       position: "fixed",
       zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
       inset: 0
     } }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
       props.children,
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function DropdownPopover({
   children,
   ...props
 }) {
-  const ref = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  const ref = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (props.isOpen) {
       if (props.value !== void 0 && props.value !== "") {
         const windowScrollY = window.scrollY;
@@ -1046,7 +1146,7 @@ function DropdownPopover({
       }
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
@@ -1074,11 +1174,11 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react23 = require("react");
-var MenuListContext = (0, import_react23.createContext)({
+var import_react25 = require("react");
+var MenuListContext = (0, import_react25.createContext)({
   root: void 0,
   value: "",
   propsArray: [],
@@ -1110,11 +1210,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function MenuList(props) {
-  const root = (0, import_react24.useRef)(null);
-  const propsArray = (0, import_react24.useMemo)(() => getValuesRecursive(props.children), [props.children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MenuListContext.Provider, { value: {
+  const root = (0, import_react26.useRef)(null);
+  const propsArray = (0, import_react26.useMemo)(() => getValuesRecursive(props.children), [props.children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -1127,66 +1227,66 @@ function MenuList(props) {
 // src/components/DropdownSelector/index.tsx
 var import_visually_hidden3 = require("@react-aria/visually-hidden");
 var import_utils5 = require("@react-aria/utils");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function DropdownSelector({
   onChange,
   showLabel = false,
   ...props
 }) {
-  const triggerRef = (0, import_react25.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const triggerRef = (0, import_react27.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = (0, import_react25.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const isPlaceholder = (0, import_react27.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
   const propsArray = getValuesRecursive(props.children);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden3.useVisuallyHidden)();
-  const handleChange = (0, import_react25.useCallback)((e) => {
+  const handleChange = (0, import_react27.useCallback)((e) => {
     onChange(e.target.value);
   }, [onChange]);
   const labelId = (0, import_utils5.useId)();
   const describedbyId = (0, import_utils5.useId)();
   const classNames = useClassNames("charcoal-dropdown-selector-root", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: classNames, "aria-disabled": props.disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: classNames, "aria-disabled": props.disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { className: "charcoal-dropdown-selector-button", "aria-labelledby": labelId, "aria-invalid": props.invalid, "aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0, disabled: props.disabled, onClick: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("button", { className: "charcoal-dropdown-selector-button", "aria-labelledby": labelId, "aria-invalid": props.invalid, "aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0, disabled: props.disabled, onClick: () => {
       if (props.disabled === true)
         return;
       setIsOpen(true);
     }, ref: triggerRef, type: "button", "data-active": isOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuList, { value: props.value, onChange: (v) => {
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MenuList, { value: props.value, onChange: (v) => {
       onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
-    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
   ] });
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 
 // src/components/DropdownSelector/ListItem/index.tsx
-var import_react26 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var ListItem = (0, import_react26.forwardRef)(function ListItem2({
+var import_react28 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ListItem = (0, import_react28.forwardRef)(function ListItem2({
   as,
   className,
   ...props
 }, ref) {
-  const Component = (0, import_react26.useMemo)(() => as ?? "li", [as]);
+  const Component = (0, import_react28.useMemo)(() => as ?? "li", [as]);
   const classNames = useClassNames("charcoal-list-item", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Component, { className: classNames, ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Component, { className: classNames, ref, ...props });
 });
 var ListItem_default = ListItem;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1223,12 +1323,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = (0, import_react27.useContext)(MenuListContext);
-  const setContextValue = (0, import_react27.useCallback)(() => {
+  } = (0, import_react29.useContext)(MenuListContext);
+  const setContextValue = (0, import_react29.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react27.useCallback)((e) => {
+  const handleKeyDown = (0, import_react29.useCallback)((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1269,72 +1369,72 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var MenuItem = (0, import_react28.forwardRef)(function MenuItem2({
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var MenuItem = (0, import_react30.forwardRef)(function MenuItem2({
   className,
   value,
   disabled,
   ...props
 }, ref) {
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ListItem_default, { ...props, ref, "data-key": value, onKeyDown: handleKeyDown, onClick: disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": disabled, role: "option", children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ListItem_default, { ...props, ref, "data-key": value, onKeyDown: handleKeyDown, onClick: disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": disabled, role: "option", children: props.children });
 });
 var MenuItem_default = MenuItem;
 
 // src/components/DropdownSelector/DropdownMenuItem/index.tsx
-var import_react29 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react31 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = (0, import_react29.useContext)(MenuListContext);
+  } = (0, import_react31.useContext)(MenuListContext);
   const isSelected = props.value === ctxValue;
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
   ] });
 }
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function MenuItemGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: props.text }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { role: "group", children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: props.text }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { role: "group", children: props.children })
   ] });
 }
 
 // src/components/SegmentedControl/index.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_radio = require("@react-stately/radio");
 var import_radio2 = require("@react-aria/radio");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react30 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var RadioContext = (0, import_react30.createContext)(null);
+var import_react32 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var RadioContext = (0, import_react32.createContext)(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react30.useContext)(RadioContext);
+  const state = (0, import_react32.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react31.forwardRef)(function SegmentedControlInner(props, ref) {
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var SegmentedControl = (0, import_react33.forwardRef)(function SegmentedControlInner(props, ref) {
   const className = useClassNames("charcoal-segmented-control", props.className);
-  const ariaRadioGroupProps = (0, import_react31.useMemo)(() => ({
+  const ariaRadioGroupProps = (0, import_react33.useMemo)(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1345,19 +1445,19 @@ var SegmentedControl = (0, import_react31.forwardRef)(function SegmentedControlI
   const {
     radioGroupProps
   } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react31.useMemo)(() => {
+  const segmentedControlItems = (0, import_react33.useMemo)(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
     } : d);
   }, [props.data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = (0, import_react31.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react33.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react31.useRef)(null);
-  const ariaRadioProps = (0, import_react31.useMemo)(() => ({
+  const ref = (0, import_react33.useRef)(null);
+  const ariaRadioProps = (0, import_react33.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1367,20 +1467,20 @@ var Segmented = (props) => {
     isDisabled,
     isSelected
   } = (0, import_radio2.useRadio)(ariaRadioProps, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
     props.children
   ] });
 };
 
 // src/components/Checkbox/index.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_utils6 = require("@react-aria/utils");
 
 // src/components/Checkbox/CheckboxInput/index.tsx
-var import_react32 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var CheckboxInput = (0, import_react32.forwardRef)(function CheckboxInput2({
+var import_react34 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var CheckboxInput = (0, import_react34.forwardRef)(function CheckboxInput2({
   onChange,
   checked,
   invalid,
@@ -1388,19 +1488,19 @@ var CheckboxInput = (0, import_react32.forwardRef)(function CheckboxInput2({
   rounded,
   ...props
 }, ref) {
-  const handleChange = (0, import_react32.useCallback)((e) => {
+  const handleChange = (0, import_react34.useCallback)((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-checkbox-input", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
 });
-var CheckboxInput_default = (0, import_react32.memo)(CheckboxInput);
+var CheckboxInput_default = (0, import_react34.memo)(CheckboxInput);
 
 // src/components/Checkbox/CheckboxWithLabel.tsx
-var import_react33 = __toESM(require("react"));
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var CheckboxWithLabel = import_react33.default.memo(function CheckboxWithLabel2({
+var import_react35 = __toESM(require("react"));
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var CheckboxWithLabel = import_react35.default.memo(function CheckboxWithLabel2({
   className,
   children,
   input,
@@ -1408,15 +1508,15 @@ var CheckboxWithLabel = import_react33.default.memo(function CheckboxWithLabel2(
   disabled
 }) {
   const classNames = useClassNames("charcoal-checkbox__label", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
     input,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "charcoal-checkbox__label_div", children })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
 
 // src/components/Checkbox/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var Checkbox = (0, import_react34.forwardRef)(function Checkbox2({
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Checkbox = (0, import_react36.forwardRef)(function Checkbox2({
   disabled,
   className,
   id,
@@ -1425,19 +1525,19 @@ var Checkbox = (0, import_react34.forwardRef)(function Checkbox2({
 }, ref) {
   const htmlId = (0, import_utils6.useId)(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  const input = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Checkbox_default = (0, import_react34.memo)(Checkbox);
+var Checkbox_default = (0, import_react36.memo)(Checkbox);
 
 // src/components/TagItem/index.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_utils7 = require("@react-aria/utils");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var TagItem = (0, import_react35.forwardRef)(function TagItemInner({
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var TagItem = (0, import_react37.forwardRef)(function TagItemInner({
   component,
   label,
   translatedLabel,
@@ -1452,18 +1552,18 @@ var TagItem = (0, import_react35.forwardRef)(function TagItemInner({
   const className = useClassNames("charcoal-tag-item", "charcoal-tag-item__bg", props.className);
   const bgVariant = bgImage !== void 0 && bgImage.length > 0 ? "image" : "color";
   const bg = bgVariant === "color" ? bgColor : `url(${bgImage ?? ""})`;
-  const Component = (0, import_react35.useMemo)(() => component ?? "button", [component]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
+  const Component = (0, import_react37.useMemo)(() => component ?? "button", [component]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
     "--charcoal-tag-item-bg": bg
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
-      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
+      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
     ] }),
-    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon_default, { name: "16/Remove" })
+    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon_default, { name: "16/Remove" })
   ] });
 });
-var TagItem_default = (0, import_react35.memo)(TagItem);
+var TagItem_default = (0, import_react37.memo)(TagItem);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
@@ -1483,6 +1583,8 @@ var TagItem_default = (0, import_react35.memo)(TagItem);
   ModalButtons,
   ModalCloseButton,
   ModalHeader,
+  MultiSelect,
+  MultiSelectGroup,
   OverlayProvider,
   Radio,
   RadioGroup,