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

package/dist/index.esm.js

@@ -352,31 +352,144 @@ var RadioGroup = forwardRef6(function RadioGroupInner({
   return /* @__PURE__ */ jsx8(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx8("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/MultiSelect/index.tsx
+import { useCallback as useCallback3, useContext as useContext2, forwardRef as forwardRef8, memo as memo3 } from "react";
+import warning2 from "warning";
+
+// src/components/MultiSelect/context.ts
+import { createContext as createContext2 } from "react";
+var MultiSelectGroupContext = createContext2({
+  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
+import * as React5 from "react";
+import "@charcoal-ui/icons";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Icon = React5.forwardRef(function IconInner({
+  name,
+  scale,
+  unsafeNonGuidelineScale,
+  className,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx9("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+});
+var Icon_default = Icon;
+
+// src/components/MultiSelect/index.tsx
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var MultiSelect = forwardRef8(function MultiSelectInner({
+  value,
+  disabled = false,
+  onChange,
+  variant = "default",
+  className,
+  children
+}, ref) {
+  const {
+    name,
+    selected,
+    disabled: parentDisabled,
+    readonly,
+    invalid,
+    onChange: parentOnChange
+  } = useContext2(MultiSelectGroupContext);
+  warning2(
+    // 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 = useCallback3((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__ */ jsxs2("label", { "aria-disabled": isDisabled, className: classNames, children: [
+    /* @__PURE__ */ jsx10("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__ */ jsx10("div", { className: "charcoal-multi-select-overlay", "data-overlay": variant === "overlay", "aria-invalid": invalid, "aria-hidden": true, children: /* @__PURE__ */ jsx10(Icon_default, { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
+    Boolean(children) && /* @__PURE__ */ jsx10("div", { className: "charcoal-multi-select-label", children })
+  ] });
+});
+var MultiSelect_default = memo3(MultiSelect);
+function MultiSelectGroup({
+  className,
+  style,
+  name,
+  label,
+  selected,
+  onChange,
+  disabled = false,
+  readonly = false,
+  invalid = false,
+  children
+}) {
+  const handleChange = useCallback3((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__ */ jsx10(MultiSelectGroupContext.Provider, { value: {
+    name,
+    selected: Array.from(new Set(selected)),
+    disabled,
+    readonly,
+    invalid,
+    onChange: handleChange
+  }, children: /* @__PURE__ */ jsx10("div", { className, style, "aria-label": label, "data-testid": "SelectGroup", children }) });
+}
+
 // src/components/Switch/index.tsx
-import { memo as memo4, forwardRef as forwardRef8 } from "react";
+import { memo as memo5, forwardRef as forwardRef10 } from "react";
 import { useId } from "@react-aria/utils";
 
 // src/components/Switch/SwitchInput/index.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback3 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var SwitchInput = forwardRef7(function SwitchInput2({
+import { forwardRef as forwardRef9, useCallback as useCallback4 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var SwitchInput = forwardRef9(function SwitchInput2({
   onChange,
   className,
   ...props
 }, ref) {
-  const handleChange = useCallback3((e) => {
+  const handleChange = useCallback4((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-switch-input", className);
-  return /* @__PURE__ */ jsx9("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
+  return /* @__PURE__ */ jsx11("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
 });
 var SwitchInput_default = SwitchInput;
 
 // src/components/Switch/SwitchWithLabel.tsx
-import * as React5 from "react";
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
-var SwitchWithLabel = React5.memo(function SwitchWithLabel2({
+import * as React6 from "react";
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+var SwitchWithLabel = React6.memo(function SwitchWithLabel2({
   children,
   className,
   disabled,
@@ -384,15 +497,15 @@ var SwitchWithLabel = React5.memo(function SwitchWithLabel2({
   input
 }) {
   const classNames = useClassNames("charcoal-switch__label", className);
-  return /* @__PURE__ */ jsxs2("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
+  return /* @__PURE__ */ jsxs3("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
     input,
-    /* @__PURE__ */ jsx10("div", { className: "charcoal-switch__label_div", children })
+    /* @__PURE__ */ jsx12("div", { className: "charcoal-switch__label_div", children })
   ] });
 });
 
 // src/components/Switch/index.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Switch = forwardRef8(function Switch2({
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Switch = forwardRef10(function Switch2({
   children,
   onChange,
   disabled,
@@ -402,23 +515,23 @@ var Switch = forwardRef8(function Switch2({
 }, ref) {
   const htmlId = useId(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ jsx11(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
+  const input = /* @__PURE__ */ jsx13(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ jsx11(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ jsx13(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Switch_default = memo4(Switch);
+var Switch_default = memo5(Switch);
 
 // src/components/TextField/index.tsx
 import { useVisuallyHidden } from "@react-aria/visually-hidden";
-import { useCallback as useCallback4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
-import * as React7 from "react";
+import { useCallback as useCallback5, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import * as React8 from "react";
 
 // src/components/FieldLabel/index.tsx
-import * as React6 from "react";
-import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
-var FieldLabel = React6.forwardRef(function FieldLabel2({
+import * as React7 from "react";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+var FieldLabel = React7.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -428,10 +541,10 @@ var FieldLabel = React6.forwardRef(function FieldLabel2({
   ...labelProps
 }, ref) {
   const classNames = useClassNames("charcoal-field-label-root", className);
-  return /* @__PURE__ */ jsxs3("div", { style, className: classNames, children: [
-    /* @__PURE__ */ jsx12("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
-    required && /* @__PURE__ */ jsx12("div", { className: "charcoal-field-label-required-text", children: requiredText }),
-    /* @__PURE__ */ jsx12("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ jsx12("span", { children: subLabel }) })
+  return /* @__PURE__ */ jsxs4("div", { style, className: classNames, children: [
+    /* @__PURE__ */ jsx14("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
+    required && /* @__PURE__ */ jsx14("div", { className: "charcoal-field-label-required-text", children: requiredText }),
+    /* @__PURE__ */ jsx14("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ jsx14("span", { children: subLabel }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
@@ -476,15 +589,15 @@ function useFocusWithClick(containerRef, inputRef) {
 import { mergeRefs as mergeRefs2, useId as useId2 } from "@react-aria/utils";
 
 // src/_lib/createDivComponent.tsx
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function createDivComponent(mainClassName) {
-  return forwardRef10(function DivComponent({
+  return forwardRef12(function DivComponent({
     className,
     ...props
   }, ref) {
     const classNames = useClassNames(mainClassName, className);
-    return /* @__PURE__ */ jsx13("div", { className: classNames, ref, ...props });
+    return /* @__PURE__ */ jsx15("div", { className: classNames, ref, ...props });
   });
 }
 
@@ -492,8 +605,8 @@ function createDivComponent(mainClassName) {
 var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
 
 // src/components/TextField/index.tsx
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
-var TextField = React7.forwardRef(function SingleLineTextFieldInner({
+import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
+var TextField = React8.forwardRef(function SingleLineTextFieldInner({
   assistiveText,
   className,
   disabled = false,
@@ -512,13 +625,13 @@ var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   value,
   getCount = countCodePointsInString,
   ...props
-}, forwardRef23) {
+}, forwardRef24) {
   const inputRef = useRef(null);
   const {
     visuallyHiddenProps
   } = useVisuallyHidden();
   const [count, setCount] = useState2(getCount(value ?? ""));
-  const handleChange = useCallback4((e) => {
+  const handleChange = useCallback5((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -537,27 +650,27 @@ var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   const labelledbyId = useId2();
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
   const classNames = useClassNames("charcoal-text-field-root", className);
-  return /* @__PURE__ */ jsxs4("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsx14(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ jsxs4("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
-      prefix && /* @__PURE__ */ jsx14("div", { className: "charcoal-text-field-prefix", children: prefix }),
-      /* @__PURE__ */ jsx14("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: mergeRefs2(forwardRef23, inputRef), type, value, ...props }),
-      (suffix || showCount) && /* @__PURE__ */ jsxs4("div", { className: "charcoal-text-field-suffix", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ jsx16(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsxs5("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
+      prefix && /* @__PURE__ */ jsx16("div", { className: "charcoal-text-field-prefix", children: prefix }),
+      /* @__PURE__ */ jsx16("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: mergeRefs2(forwardRef24, inputRef), type, value, ...props }),
+      (suffix || showCount) && /* @__PURE__ */ jsxs5("div", { className: "charcoal-text-field-suffix", children: [
         suffix,
-        showCount && /* @__PURE__ */ jsx14("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ jsx16("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    showAssistiveText && /* @__PURE__ */ jsx14(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ jsx16(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
 
 // src/components/TextArea/index.tsx
 import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
-import { forwardRef as forwardRef12, useCallback as useCallback5, useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
+import { forwardRef as forwardRef14, useCallback as useCallback6, useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
 import { useId as useId3 } from "@react-aria/utils";
-import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
-var TextArea = forwardRef12(function TextAreaInner({
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+var TextArea = forwardRef14(function TextAreaInner({
   onChange,
   className,
   value,
@@ -575,20 +688,20 @@ var TextArea = forwardRef12(function TextAreaInner({
   invalid,
   getCount = countCodePointsInString,
   ...props
-}, forwardRef23) {
+}, forwardRef24) {
   const {
     visuallyHiddenProps
   } = useVisuallyHidden2();
   const textareaRef = useRef2(null);
   const [count, setCount] = useState3(getCount(value ?? ""));
   const [rows, setRows] = useState3(initialRows);
-  const syncHeight = useCallback5((textarea) => {
+  const syncHeight = useCallback6((textarea) => {
     const rows2 = (`${textarea.value}
 `.match(/\n/gu)?.length ?? 0) || 1;
     setRows(initialRows <= rows2 ? rows2 : initialRows);
   }, [initialRows]);
   const nonControlled = value === void 0;
-  const handleChange = useCallback5((e) => {
+  const handleChange = useCallback6((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -617,43 +730,28 @@ var TextArea = forwardRef12(function TextAreaInner({
   const labelledbyId = useId3();
   const classNames = useClassNames("charcoal-text-area-root", className);
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
-  return /* @__PURE__ */ jsxs5("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsx15(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ jsxs5("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
+  return /* @__PURE__ */ jsxs6("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ jsx17(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsxs6("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__ */ jsx15("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__ */ jsx15("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+      /* @__PURE__ */ jsx17("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__ */ jsx17("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    showAssistiveText && /* @__PURE__ */ jsx15(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ jsx17(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
 
-// src/components/Icon/index.tsx
-import * as React8 from "react";
-import "@charcoal-ui/icons";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var Icon = React8.forwardRef(function IconInner({
-  name,
-  scale,
-  unsafeNonGuidelineScale,
-  className,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx16("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
-});
-var Icon_default = Icon;
-
 // src/components/Modal/index.tsx
-import { useContext as useContext2, forwardRef as forwardRef15, memo as memo5 } from "react";
+import { useContext as useContext3, forwardRef as forwardRef16, memo as memo6 } from "react";
 import * as React12 from "react";
 import { Overlay } from "@react-aria/overlays";
 import { animated, useTransition, easings } from "react-spring";
 import { useObjectRef } from "@react-aria/utils";
 
 // src/components/Modal/Dialog/index.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import { useDialog } from "@react-aria/dialog";
 
 // src/_lib/useForwardedRef.tsx
@@ -673,21 +771,21 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Dialog = forwardRef14(function Dialog2({
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Dialog = forwardRef15(function Dialog2({
   size,
   bottomSheet,
   className,
   ...props
-}, forwardRef23) {
-  const ref = useForwardedRef(forwardRef23);
+}, forwardRef24) {
+  const ref = useForwardedRef(forwardRef24);
   const {
     dialogProps
   } = useDialog({
     role: "dialog"
   }, ref);
   const classNames = useClassNames("charcoal-modal-dialog", className);
-  return /* @__PURE__ */ jsx17("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__ */ jsx18("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
@@ -756,9 +854,9 @@ function useWindowWidth() {
 }
 
 // src/components/Modal/index.tsx
-import { jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_Z_INDEX = 10;
-var Modal = forwardRef15(function ModalInner({
+var Modal = forwardRef16(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -823,15 +921,15 @@ var Modal = forwardRef15(function ModalInner({
     backgroundColor,
     overflow,
     transform
-  }, item) => item && /* @__PURE__ */ jsx18(Overlay, { portalContainer, children: /* @__PURE__ */ jsx18(animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
+  }, item) => item && /* @__PURE__ */ jsx19(Overlay, { portalContainer, children: /* @__PURE__ */ jsx19(animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
     backgroundColor,
     overflow,
     zIndex
   } : {
     zIndex
-  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ jsx18(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx18(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
+  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ jsx19(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx19(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
     transform
-  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ jsxs6(ModalContext.Provider, { value: {
+  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ jsxs7(ModalContext.Provider, { value: {
     titleProps: {},
     title,
     close: onClose,
@@ -839,11 +937,11 @@ var Modal = forwardRef15(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ jsx18(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ jsx19(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var AnimatedDialog = animated(Dialog);
-var Modal_default = memo5(Modal);
+var Modal_default = memo6(Modal);
 var ModalContext = React12.createContext({
   titleProps: {},
   title: "",
@@ -852,37 +950,37 @@ var ModalContext = React12.createContext({
   bottomSheet: false
 });
 function ModalCloseButton(props) {
-  return /* @__PURE__ */ jsx18(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
+  return /* @__PURE__ */ jsx19(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
 }
 
 // src/components/Modal/ModalPlumbing.tsx
-import { useContext as useContext3 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { useContext as useContext4 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function ModalHeader() {
-  const modalCtx = useContext3(ModalContext);
-  return /* @__PURE__ */ jsx19("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ jsx19("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
+  const modalCtx = useContext4(ModalContext);
+  return /* @__PURE__ */ jsx20("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ jsx20("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
-import { forwardRef as forwardRef16, useImperativeHandle, useRef as useRef5, memo as memo6 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var LoadingSpinner = forwardRef16(function LoadingSpinnerInner({
+import { forwardRef as forwardRef17, useImperativeHandle, useRef as useRef5, memo as memo7 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var LoadingSpinner = forwardRef17(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
   ...props
 }, ref) {
   const classNames = useClassNames("charcoal-loading-spinner", props.className);
-  return /* @__PURE__ */ jsx20("div", { role: "progressbar", style: {
+  return /* @__PURE__ */ jsx21("div", { role: "progressbar", style: {
     "--charcoal-loading-spinner-size": `${size}px`,
     "--charcoal-loading-spinner-padding": `${padding}px`
-  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ jsx20(LoadingSpinnerIcon, {}) });
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ jsx21(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = memo6(LoadingSpinner);
-var LoadingSpinnerIcon = forwardRef16(function LoadingSpinnerIcon2({
+var LoadingSpinner_default = memo7(LoadingSpinner);
+var LoadingSpinnerIcon = forwardRef17(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
   const iconRef = useRef5(null);
@@ -896,19 +994,19 @@ var LoadingSpinnerIcon = forwardRef16(function LoadingSpinnerIcon2({
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ jsx20("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
+  return /* @__PURE__ */ jsx21("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
 });
 
 // src/components/DropdownSelector/index.tsx
-import { useState as useState5, useRef as useRef9, useMemo as useMemo8, useCallback as useCallback7 } from "react";
+import { useState as useState5, useRef as useRef9, useMemo as useMemo8, useCallback as useCallback8 } from "react";
 
 // src/components/DropdownSelector/DropdownPopover.tsx
 import { useEffect as useEffect8, useRef as useRef7 } from "react";
 
 // src/components/DropdownSelector/Popover/index.tsx
-import { useContext as useContext4, useRef as useRef6 } from "react";
+import { useContext as useContext5, useRef as useRef6 } from "react";
 import { DismissButton, Overlay as Overlay2, usePopover } from "@react-aria/overlays";
-import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 var _empty = () => null;
 function Popover(props) {
   const defaultPopoverRef = useRef6(null);
@@ -928,28 +1026,28 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = useContext4(ModalBackgroundContext);
+  const modalBackground = useContext5(ModalBackgroundContext);
   usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
-  return /* @__PURE__ */ jsxs7(Overlay2, { portalContainer: document.body, children: [
-    /* @__PURE__ */ jsx21("div", { ...underlayProps, style: {
+  return /* @__PURE__ */ jsxs8(Overlay2, { portalContainer: document.body, children: [
+    /* @__PURE__ */ jsx22("div", { ...underlayProps, style: {
       position: "fixed",
       zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
       inset: 0
     } }),
-    /* @__PURE__ */ jsxs7("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
-      /* @__PURE__ */ jsx21(DismissButton, { onDismiss: () => props.onClose() }),
-      /* @__PURE__ */ jsx21("div", { tabIndex: 0, onFocus: props.onClose }),
+    /* @__PURE__ */ jsxs8("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
+      /* @__PURE__ */ jsx22(DismissButton, { onDismiss: () => props.onClose() }),
+      /* @__PURE__ */ jsx22("div", { tabIndex: 0, onFocus: props.onClose }),
       props.children,
-      /* @__PURE__ */ jsx21("div", { tabIndex: 0, onFocus: props.onClose }),
-      /* @__PURE__ */ jsx21(DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ jsx22("div", { tabIndex: 0, onFocus: props.onClose }),
+      /* @__PURE__ */ jsx22(DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function DropdownPopover({
   children,
   ...props
@@ -976,7 +1074,7 @@ function DropdownPopover({
       }
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ jsx22(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
+  return /* @__PURE__ */ jsx23(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
@@ -1007,8 +1105,8 @@ function findPreviewRecursive(children, value) {
 import { useMemo as useMemo7, useRef as useRef8 } from "react";
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-import { createContext as createContext4 } from "react";
-var MenuListContext = createContext4({
+import { createContext as createContext5 } from "react";
+var MenuListContext = createContext5({
   root: void 0,
   value: "",
   propsArray: [],
@@ -1040,11 +1138,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function MenuList(props) {
   const root = useRef8(null);
   const propsArray = useMemo7(() => getValuesRecursive(props.children), [props.children]);
-  return /* @__PURE__ */ jsx23("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ jsx23(MenuListContext.Provider, { value: {
+  return /* @__PURE__ */ jsx24("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ jsx24(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -1057,7 +1155,7 @@ function MenuList(props) {
 // src/components/DropdownSelector/index.tsx
 import { useVisuallyHidden as useVisuallyHidden3 } from "@react-aria/visually-hidden";
 import { useId as useId4 } from "@react-aria/utils";
-import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
 function DropdownSelector({
   onChange,
   showLabel = false,
@@ -1071,52 +1169,52 @@ function DropdownSelector({
   const {
     visuallyHiddenProps
   } = useVisuallyHidden3();
-  const handleChange = useCallback7((e) => {
+  const handleChange = useCallback8((e) => {
     onChange(e.target.value);
   }, [onChange]);
   const labelId = useId4();
   const describedbyId = useId4();
   const classNames = useClassNames("charcoal-dropdown-selector-root", props.className);
-  return /* @__PURE__ */ jsxs8("div", { className: classNames, "aria-disabled": props.disabled, children: [
-    /* @__PURE__ */ jsx24(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ jsx24("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx24("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ jsx24("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+  return /* @__PURE__ */ jsxs9("div", { className: classNames, "aria-disabled": props.disabled, children: [
+    /* @__PURE__ */ jsx25(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsx25("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx25("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ jsx25("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
-    /* @__PURE__ */ jsxs8("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__ */ jsxs9("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__ */ jsx24("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
-      /* @__PURE__ */ jsx24(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
+      /* @__PURE__ */ jsx25("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
+      /* @__PURE__ */ jsx25(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
     ] }),
-    isOpen && /* @__PURE__ */ jsx24(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx24(MenuList, { value: props.value, onChange: (v) => {
+    isOpen && /* @__PURE__ */ jsx25(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx25(MenuList, { value: props.value, onChange: (v) => {
       onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
-    props.assistiveText !== void 0 && /* @__PURE__ */ jsx24(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ jsx25(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
   ] });
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 
 // src/components/DropdownSelector/ListItem/index.tsx
-import { forwardRef as forwardRef17, useMemo as useMemo9 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var ListItem = forwardRef17(function ListItem2({
+import { forwardRef as forwardRef18, useMemo as useMemo9 } from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ListItem = forwardRef18(function ListItem2({
   as,
   className,
   ...props
 }, ref) {
   const Component = useMemo9(() => as ?? "li", [as]);
   const classNames = useClassNames("charcoal-list-item", className);
-  return /* @__PURE__ */ jsx25(Component, { className: classNames, ref, ...props });
+  return /* @__PURE__ */ jsx26(Component, { className: classNames, ref, ...props });
 });
 var ListItem_default = ListItem;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-import { useCallback as useCallback8, useContext as useContext5 } from "react";
+import { useCallback as useCallback9, useContext as useContext6 } from "react";
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1153,12 +1251,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = useContext5(MenuListContext);
-  const setContextValue = useCallback8(() => {
+  } = useContext6(MenuListContext);
+  const setContextValue = useCallback9(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = useCallback8((e) => {
+  const handleKeyDown = useCallback9((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1199,70 +1297,70 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-var MenuItem = forwardRef18(function MenuItem2({
+import { jsx as jsx27 } from "react/jsx-runtime";
+var MenuItem = forwardRef19(function MenuItem2({
   className,
   value,
   disabled,
   ...props
 }, ref) {
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
-  return /* @__PURE__ */ jsx26(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__ */ jsx27(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
-import { useContext as useContext6 } from "react";
-import { jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useContext as useContext7 } from "react";
+import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = useContext6(MenuListContext);
+  } = useContext7(MenuListContext);
   const isSelected = props.value === ctxValue;
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxs9(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
-    isSelected && /* @__PURE__ */ jsx27(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
-    /* @__PURE__ */ jsx27("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
+  return /* @__PURE__ */ jsxs10(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
+    isSelected && /* @__PURE__ */ jsx28(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
+    /* @__PURE__ */ jsx28("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
   ] });
 }
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
 function MenuItemGroup(props) {
-  return /* @__PURE__ */ jsxs10("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
-    /* @__PURE__ */ jsx28("span", { children: props.text }),
-    /* @__PURE__ */ jsx28("ul", { role: "group", children: props.children })
+  return /* @__PURE__ */ jsxs11("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
+    /* @__PURE__ */ jsx29("span", { children: props.text }),
+    /* @__PURE__ */ jsx29("ul", { role: "group", children: props.children })
   ] });
 }
 
 // src/components/SegmentedControl/index.tsx
-import { forwardRef as forwardRef19, memo as memo7, useMemo as useMemo10, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef20, memo as memo8, useMemo as useMemo10, useRef as useRef10 } from "react";
 import { useRadioGroupState } from "@react-stately/radio";
 import { useRadio, useRadioGroup } from "@react-aria/radio";
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-import { createContext as createContext5, useContext as useContext7 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var RadioContext = createContext5(null);
+import { createContext as createContext6, useContext as useContext8 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var RadioContext = createContext6(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx29(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx30(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = useContext7(RadioContext);
+  const state = useContext8(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
-var SegmentedControl = forwardRef19(function SegmentedControlInner(props, ref) {
+import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+var SegmentedControl = forwardRef20(function SegmentedControlInner(props, ref) {
   const className = useClassNames("charcoal-segmented-control", props.className);
   const ariaRadioGroupProps = useMemo10(() => ({
     ...props,
@@ -1281,9 +1379,9 @@ var SegmentedControl = forwardRef19(function SegmentedControlInner(props, ref) {
       label: d
     } : d);
   }, [props.data]);
-  return /* @__PURE__ */ jsx30("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ jsx30(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx30(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
+  return /* @__PURE__ */ jsx31("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ jsx31(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx31(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = memo7(SegmentedControl);
+var SegmentedControl_default = memo8(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
   const ref = useRef10(null);
@@ -1297,20 +1395,20 @@ var Segmented = (props) => {
     isDisabled,
     isSelected
   } = useRadio(ariaRadioProps, state, ref);
-  return /* @__PURE__ */ jsxs11("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
-    /* @__PURE__ */ jsx30("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
+  return /* @__PURE__ */ jsxs12("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
+    /* @__PURE__ */ jsx31("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
     props.children
   ] });
 };
 
 // src/components/Checkbox/index.tsx
-import { forwardRef as forwardRef21, memo as memo9 } from "react";
+import { forwardRef as forwardRef22, memo as memo10 } from "react";
 import { useId as useId5 } from "@react-aria/utils";
 
 // src/components/Checkbox/CheckboxInput/index.tsx
-import { forwardRef as forwardRef20, memo as memo8, useCallback as useCallback9 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var CheckboxInput = forwardRef20(function CheckboxInput2({
+import { forwardRef as forwardRef21, memo as memo9, useCallback as useCallback10 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var CheckboxInput = forwardRef21(function CheckboxInput2({
   onChange,
   checked,
   invalid,
@@ -1318,18 +1416,18 @@ var CheckboxInput = forwardRef20(function CheckboxInput2({
   rounded,
   ...props
 }, ref) {
-  const handleChange = useCallback9((e) => {
+  const handleChange = useCallback10((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-checkbox-input", className);
-  return /* @__PURE__ */ jsx31("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
+  return /* @__PURE__ */ jsx32("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
 });
-var CheckboxInput_default = memo8(CheckboxInput);
+var CheckboxInput_default = memo9(CheckboxInput);
 
 // src/components/Checkbox/CheckboxWithLabel.tsx
 import React16 from "react";
-import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
 var CheckboxWithLabel = React16.memo(function CheckboxWithLabel2({
   className,
   children,
@@ -1338,15 +1436,15 @@ var CheckboxWithLabel = React16.memo(function CheckboxWithLabel2({
   disabled
 }) {
   const classNames = useClassNames("charcoal-checkbox__label", className);
-  return /* @__PURE__ */ jsxs12("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
+  return /* @__PURE__ */ jsxs13("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
     input,
-    /* @__PURE__ */ jsx32("div", { className: "charcoal-checkbox__label_div", children })
+    /* @__PURE__ */ jsx33("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
 
 // src/components/Checkbox/index.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Checkbox = forwardRef21(function Checkbox2({
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Checkbox = forwardRef22(function Checkbox2({
   disabled,
   className,
   id,
@@ -1355,19 +1453,19 @@ var Checkbox = forwardRef21(function Checkbox2({
 }, ref) {
   const htmlId = useId5(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ jsx33(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  const input = /* @__PURE__ */ jsx34(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ jsx33(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ jsx34(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Checkbox_default = memo9(Checkbox);
+var Checkbox_default = memo10(Checkbox);
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef22, memo as memo10, useMemo as useMemo11 } from "react";
+import { forwardRef as forwardRef23, memo as memo11, useMemo as useMemo11 } from "react";
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
-import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
-var TagItem = forwardRef22(function TagItemInner({
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+var TagItem = forwardRef23(function TagItemInner({
   component,
   label,
   translatedLabel,
@@ -1383,17 +1481,17 @@ var TagItem = forwardRef22(function TagItemInner({
   const bgVariant = bgImage !== void 0 && bgImage.length > 0 ? "image" : "color";
   const bg = bgVariant === "color" ? bgColor : `url(${bgImage ?? ""})`;
   const Component = useMemo11(() => component ?? "button", [component]);
-  return /* @__PURE__ */ jsxs13(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
+  return /* @__PURE__ */ jsxs14(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
     "--charcoal-tag-item-bg": bg
   }, children: [
-    /* @__PURE__ */ jsxs13("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
-      hasTranslatedLabel && /* @__PURE__ */ jsx34("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
-      /* @__PURE__ */ jsx34("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+    /* @__PURE__ */ jsxs14("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
+      hasTranslatedLabel && /* @__PURE__ */ jsx35("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
+      /* @__PURE__ */ jsx35("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
     ] }),
-    status === "active" && /* @__PURE__ */ jsx34(Icon_default, { name: "16/Remove" })
+    status === "active" && /* @__PURE__ */ jsx35(Icon_default, { name: "16/Remove" })
   ] });
 });
-var TagItem_default = memo10(TagItem);
+var TagItem_default = memo11(TagItem);
 export {
   Button_default as Button,
   CharcoalProvider,
@@ -1412,6 +1510,8 @@ export {
   ModalButtons,
   ModalCloseButton,
   ModalHeader,
+  MultiSelect_default as MultiSelect,
+  MultiSelectGroup,
   OverlayProvider,
   Radio_default as Radio,
   RadioGroup,