@charcoal-ui/react 4.0.0-beta.5 → 4.0.0-beta.6

package/dist/index.cjs.js

@@ -42,11 +42,12 @@ __export(src_exports, {
   ModalAlign: () => ModalAlign,
   ModalBody: () => ModalBody,
   ModalButtons: () => ModalButtons,
+  ModalCloseButton: () => ModalCloseButton,
   ModalHeader: () => ModalHeader,
   OverlayProvider: () => import_overlays.OverlayProvider,
   Radio: () => Radio_default,
   RadioGroup: () => RadioGroup,
-  SSRProvider: () => import_ssr.SSRProvider,
+  SSRProvider: () => SSRProvider,
   SegmentedControl: () => SegmentedControl_default,
   Switch: () => Switch_default,
   TagItem: () => TagItem_default,
@@ -86,6 +87,12 @@ function useComponentAbstraction() {
 
 // src/core/SSRProvider.tsx
 var import_ssr = require("@react-aria/ssr");
+var import_react2 = require("react");
+function isReactVersionOver(minVersion) {
+  const reactMajorVersion = parseInt(import_react2.version.split(".")[0], 10);
+  return Number.isFinite(reactMajorVersion) ? reactMajorVersion >= minVersion : false;
+}
+var SSRProvider = isReactVersionOver(18) ? import_react2.Fragment : import_ssr.SSRProvider;
 
 // src/core/OverlayProvider.tsx
 var import_overlays = require("@react-aria/overlays");
@@ -102,24 +109,24 @@ function CharcoalProvider({
   children,
   background
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ssr.SSRProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_styled_components.ThemeProvider, { theme: defaultTheme, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SSRProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_styled_components.ThemeProvider, { theme: defaultTheme, children: [
     injectTokens && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_styled.TokenInjector, { theme: themeMap, background }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentAbstraction, { components, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_overlays.OverlayProvider, { children }) })
   ] }) });
 }
 
 // src/components/Button/index.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/_lib/useClassNames.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 function useClassNames(...classNames) {
-  return (0, import_react2.useMemo)(() => classNames.filter((v) => v).join(" "), [classNames]);
+  return (0, import_react3.useMemo)(() => classNames.filter((v) => v).join(" "), [classNames]);
 }
 
 // src/components/Button/index.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Button = (0, import_react3.forwardRef)(function Button2({
+var Button = (0, import_react4.forwardRef)(function Button2({
   variant,
   fullWidth,
   size,
@@ -129,30 +136,30 @@ var Button = (0, import_react3.forwardRef)(function Button2({
   componentAs,
   ...props
 }, ref) {
-  const Component = (0, import_react3.useMemo)(() => as ?? "button", [as]);
+  const Component = (0, import_react4.useMemo)(() => as ?? "button", [as]);
   const classNames = useClassNames("charcoal-button", className);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, as: componentAs, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
 });
 var Button_default = Button;
 
 // src/components/Clickable/index.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Clickable = (0, import_react4.forwardRef)(function Clickable2({
+var Clickable = (0, import_react5.forwardRef)(function Clickable2({
   componentAs,
   as,
   ...props
 }, ref) {
   const className = useClassNames("charcoal-clickable", props.className);
-  const Component = (0, import_react4.useMemo)(() => as ?? "button", [as]);
+  const Component = (0, import_react5.useMemo)(() => as ?? "button", [as]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...props, ref, className, as: componentAs });
 });
 var Clickable_default = Clickable;
 
 // src/components/IconButton/index.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var IconButton = (0, import_react5.forwardRef)(function IconButtonInner({
+var IconButton = (0, import_react6.forwardRef)(function IconButtonInner({
   variant = "Default",
   size = "M",
   icon,
@@ -162,7 +169,7 @@ var IconButton = (0, import_react5.forwardRef)(function IconButtonInner({
   ...rest
 }, ref) {
   validateIconSize(size, icon);
-  const Component = (0, import_react5.useMemo)(() => as ?? "button", [as]);
+  const Component = (0, import_react6.useMemo)(() => as ?? "button", [as]);
   const classNames = useClassNames("charcoal-icon-button", rest.className);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { ...rest, as: componentAs, ref, className: classNames, "data-size": size, "data-active": isActive, "data-variant": variant, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon }) });
 });
@@ -189,11 +196,11 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var React5 = __toESM(require("react"));
 var import_warning = __toESM(require("warning"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Radio = (0, import_react6.forwardRef)(function RadioInner({
+var Radio = (0, import_react7.forwardRef)(function RadioInner({
   value,
   disabled = false,
   children,
@@ -206,7 +213,7 @@ var Radio = (0, import_react6.forwardRef)(function RadioInner({
     readonly,
     invalid,
     onChange
-  } = (0, import_react6.useContext)(RadioGroupContext);
+  } = (0, import_react7.useContext)(RadioGroupContext);
   const classNames = useClassNames("charcoal-radio__label", props.className);
   (0, import_warning.default)(
     name !== void 0,
@@ -215,7 +222,7 @@ var Radio = (0, import_react6.forwardRef)(function RadioInner({
   const isSelected = value === selected;
   const isDisabled = disabled || isParentDisabled;
   const isReadonly = readonly && !isSelected;
-  const handleChange = (0, import_react6.useCallback)((e) => {
+  const handleChange = (0, import_react7.useCallback)((e) => {
     onChange(e.currentTarget.value);
   }, [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
@@ -223,7 +230,7 @@ var Radio = (0, import_react6.forwardRef)(function RadioInner({
     children != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "charcoal-radio__label_div", children })
   ] });
 });
-var Radio_default = (0, import_react6.memo)(Radio);
+var Radio_default = (0, import_react7.memo)(Radio);
 var RadioGroupContext = React5.createContext({
   name: void 0,
   selected: void 0,
@@ -234,7 +241,7 @@ var RadioGroupContext = React5.createContext({
     throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?");
   }
 });
-var RadioGroup = (0, import_react6.forwardRef)(function RadioGroupInner({
+var RadioGroup = (0, import_react7.forwardRef)(function RadioGroupInner({
   value,
   name,
   onChange,
@@ -245,10 +252,10 @@ var RadioGroup = (0, import_react6.forwardRef)(function RadioGroupInner({
   ...props
 }, ref) {
   const classNames = useClassNames("charcoal-radio-group", props.className);
-  const handleChange = (0, import_react6.useCallback)((next) => {
+  const handleChange = (0, import_react7.useCallback)((next) => {
     onChange(next);
   }, [onChange]);
-  const contextValue = (0, import_react6.useMemo)(() => ({
+  const contextValue = (0, import_react7.useMemo)(() => ({
     name,
     selected: value,
     disabled: disabled ?? false,
@@ -260,18 +267,18 @@ var RadioGroup = (0, import_react6.forwardRef)(function RadioGroupInner({
 });
 
 // src/components/Switch/index.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_utils = require("@react-aria/utils");
 
 // src/components/Switch/SwitchInput/index.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var SwitchInput = (0, import_react7.forwardRef)(function SwitchInput2({
+var SwitchInput = (0, import_react8.forwardRef)(function SwitchInput2({
   onChange,
   className,
   ...props
 }, ref) {
-  const handleChange = (0, import_react7.useCallback)((e) => {
+  const handleChange = (0, import_react8.useCallback)((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
@@ -300,7 +307,7 @@ var SwitchWithLabel = React6.memo(function SwitchWithLabel2({
 
 // src/components/Switch/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Switch = (0, import_react8.forwardRef)(function Switch2({
+var Switch = (0, import_react9.forwardRef)(function Switch2({
   children,
   onChange,
   disabled,
@@ -316,11 +323,11 @@ var Switch = (0, import_react8.forwardRef)(function Switch2({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Switch_default = (0, import_react8.memo)(Switch);
+var Switch_default = (0, import_react9.memo)(Switch);
 
 // src/components/TextField/index.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var React8 = __toESM(require("react"));
 var import_styled_components2 = __toESM(require("styled-components"));
 
@@ -363,9 +370,9 @@ function countCodePointsInString(string) {
 }
 
 // src/components/TextField/useFocusWithClick.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useFocusWithClick(containerRef, inputRef) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const el = containerRef.current;
     if (el) {
       const handleDown = (e) => {
@@ -403,12 +410,12 @@ var TextField = React8.forwardRef(function SingleLineTextFieldInner({
   getCount = countCodePointsInString,
   ...props
 }, forwardRef20) {
-  const inputRef = (0, import_react10.useRef)(null);
+  const inputRef = (0, import_react11.useRef)(null);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden.useVisuallyHidden)();
-  const [count, setCount] = (0, import_react10.useState)(getCount(value ?? ""));
-  const handleChange = (0, import_react10.useCallback)((e) => {
+  const [count, setCount] = (0, import_react11.useState)(getCount(value ?? ""));
+  const handleChange = (0, import_react11.useCallback)((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -417,10 +424,10 @@ var TextField = React8.forwardRef(function SingleLineTextFieldInner({
     setCount(count2);
     onChange?.(value2);
   }, [getCount, maxLength, onChange]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  const containerRef = (0, import_react10.useRef)(null);
+  const containerRef = (0, import_react11.useRef)(null);
   useFocusWithClick(containerRef, inputRef);
   const inputId = (0, import_utils2.useId)(props.id);
   const describedbyId = (0, import_utils2.useId)();
@@ -466,11 +473,11 @@ var AssistiveText = import_styled_components2.default.p.withConfig({
 
 // src/components/TextArea/index.tsx
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_utils3 = require("@react-aria/utils");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
+var TextArea = (0, import_react12.forwardRef)(function TextAreaInner({
   onChange,
   className,
   value,
@@ -491,17 +498,17 @@ var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden2.useVisuallyHidden)();
-  const textareaRef = (0, import_react11.useRef)(null);
-  const textAreaRef = (0, import_react11.useRef)(null);
-  const [count, setCount] = (0, import_react11.useState)(getCount(value ?? ""));
-  const [rows, setRows] = (0, import_react11.useState)(initialRows);
-  const syncHeight = (0, import_react11.useCallback)((textarea) => {
+  const textareaRef = (0, import_react12.useRef)(null);
+  const textAreaRef = (0, import_react12.useRef)(null);
+  const [count, setCount] = (0, import_react12.useState)(getCount(value ?? ""));
+  const [rows, setRows] = (0, import_react12.useState)(initialRows);
+  const syncHeight = (0, import_react12.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_react11.useCallback)((e) => {
+  const handleChange = (0, import_react12.useCallback)((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -515,15 +522,15 @@ var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
     }
     onChange?.(value2);
   }, [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
   }, [autoHeight, syncHeight]);
-  const containerRef = (0, import_react11.useRef)(null);
+  const containerRef = (0, import_react12.useRef)(null);
   useFocusWithClick(containerRef, textAreaRef);
   const textAreaId = (0, import_utils3.useId)(props.id);
   const describedbyId = (0, import_utils3.useId)();
@@ -575,7 +582,7 @@ var Icon = React9.forwardRef(function IconInner({
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var React13 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
 var import_styled_components4 = require("styled-components");
@@ -585,7 +592,7 @@ var import_react_spring = require("react-spring");
 var import_utils5 = require("@react-aria/utils");
 
 // src/components/Modal/Dialog/index.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_dialog = require("@react-aria/dialog");
 
 // src/_lib/useForwardedRef.tsx
@@ -606,7 +613,7 @@ function useForwardedRef(ref) {
 
 // src/components/Modal/Dialog/index.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Dialog = (0, import_react12.forwardRef)(function Dialog2({
+var Dialog = (0, import_react13.forwardRef)(function Dialog2({
   size,
   bottomSheet,
   css: css4,
@@ -632,9 +639,9 @@ var React12 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 function usePreventScroll(element, isOpen) {
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -675,7 +682,7 @@ function useCharcoalModalOverlay(props, state, ref) {
 // src/components/Modal/index.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react14.forwardRef)(function ModalInner({
+var Modal = (0, import_react15.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -688,7 +695,8 @@ var Modal = (0, import_react14.forwardRef)(function ModalInner({
     isDismissable,
     onClose,
     className,
-    isOpen = false
+    isOpen = false,
+    closeButtonAriaLabel = "Close"
   } = props;
   const ref = (0, import_utils5.useObjectRef)(external);
   const {
@@ -756,11 +764,11 @@ var Modal = (0, import_react14.forwardRef)(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var AnimatedDialog = (0, import_react_spring.animated)(Dialog);
-var Modal_default = (0, import_react14.memo)(Modal);
+var Modal_default = (0, import_react15.memo)(Modal);
 var ModalContext = React13.createContext({
   titleProps: {},
   title: "",
@@ -768,19 +776,22 @@ var ModalContext = React13.createContext({
   showDismiss: true,
   bottomSheet: false
 });
+function ModalCloseButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
+}
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react15.useContext)(ModalContext);
+  const modalCtx = (0, import_react16.useContext)(ModalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime16.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");
 function createDivComponent(mainClassName) {
-  return (0, import_react15.forwardRef)(function DivComponent({
+  return (0, import_react16.forwardRef)(function DivComponent({
     className,
     ...props
   }, ref) {
@@ -790,9 +801,9 @@ function createDivComponent(mainClassName) {
 }
 
 // src/components/LoadingSpinner/index.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react16.forwardRef)(function LoadingSpinnerInner({
+var LoadingSpinner = (0, import_react17.forwardRef)(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
@@ -804,12 +815,12 @@ var LoadingSpinner = (0, import_react16.forwardRef)(function LoadingSpinnerInner
     "--charcoal-loading-spinner-padding": `${padding}px`
   }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = (0, import_react16.memo)(LoadingSpinner);
-var LoadingSpinnerIcon = (0, import_react16.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinner_default = (0, import_react17.memo)(LoadingSpinner);
+var LoadingSpinnerIcon = (0, import_react17.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react16.useRef)(null);
-  (0, import_react16.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -823,21 +834,21 @@ var LoadingSpinnerIcon = (0, import_react16.forwardRef)(function LoadingSpinnerI
 });
 
 // src/components/DropdownSelector/index.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_utils6 = require("@charcoal-ui/utils");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_overlays4 = require("@react-aria/overlays");
 var import_styled_components5 = __toESM(require("styled-components"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = (0, import_react17.useRef)(null);
+  const defaultPopoverRef = (0, import_react18.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const {
     popoverProps,
@@ -853,7 +864,7 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = (0, import_react17.useContext)(ModalBackgroundContext);
+  const modalBackground = (0, import_react18.useContext)(ModalBackgroundContext);
   usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
@@ -880,13 +891,13 @@ function DropdownPopover({
   children,
   ...props
 }) {
-  const ref = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const ref = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (props.isOpen && props.value !== void 0) {
       const windowScrollY = window.scrollY;
       const windowScrollX = window.scrollX;
@@ -923,12 +934,12 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_styled_components6 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react19 = require("react");
-var MenuListContext = (0, import_react19.createContext)({
+var import_react20 = require("react");
+var MenuListContext = (0, import_react20.createContext)({
   root: void 0,
   value: "",
   propsArray: [],
@@ -962,8 +973,8 @@ function getValuesRecursive(children) {
 // src/components/DropdownSelector/MenuList/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function MenuList(props) {
-  const root = (0, import_react20.useRef)(null);
-  const propsArray = (0, import_react20.useMemo)(() => getValuesRecursive(props.children), [props.children]);
+  const root = (0, import_react21.useRef)(null);
+  const propsArray = (0, import_react21.useMemo)(() => getValuesRecursive(props.children), [props.children]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
@@ -986,15 +997,15 @@ function DropdownSelector({
   onChange,
   ...props
 }) {
-  const triggerRef = (0, import_react21.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const triggerRef = (0, import_react22.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = (0, import_react21.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const isPlaceholder = (0, import_react22.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_react21.useCallback)((e) => {
+  const handleChange = (0, import_react22.useCallback)((e) => {
     onChange(e.target.value);
   }, [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
@@ -1055,7 +1066,7 @@ var ItemDiv = import_styled_components8.default.div.withConfig({
 })(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;transition:background-color 0.2s;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{&:not(disabled):not([aria-disabled='true']){background-color:var(--charcoal-surface3);}}"]);
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1092,12 +1103,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = (0, import_react22.useContext)(MenuListContext);
-  const setContextValue = (0, import_react22.useCallback)(() => {
+  } = (0, import_react23.useContext)(MenuListContext);
+  const setContextValue = (0, import_react23.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react22.useCallback)((e) => {
+  const handleKeyDown = (0, import_react23.useCallback)((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1144,12 +1155,12 @@ function MenuItem(props) {
 }
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = (0, import_react23.useContext)(MenuListContext);
+  } = (0, import_react24.useContext)(MenuListContext);
   const isSelected = props.value === ctxValue;
   const {
     children,
@@ -1189,14 +1200,14 @@ var StyledLi2 = import_styled_components10.default.li.withConfig({
 })(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_radio = require("@react-stately/radio");
 var import_radio2 = require("@react-aria/radio");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var RadioContext = (0, import_react24.createContext)(null);
+var RadioContext = (0, import_react25.createContext)(null);
 var RadioProvider = ({
   value,
   children
@@ -1204,7 +1215,7 @@ var RadioProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react24.useContext)(RadioContext);
+  const state = (0, import_react25.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
@@ -1212,9 +1223,9 @@ var useRadioContext = () => {
 
 // src/components/SegmentedControl/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react25.forwardRef)(function SegmentedControlInner(props, ref) {
+var SegmentedControl = (0, import_react26.forwardRef)(function SegmentedControlInner(props, ref) {
   const className = useClassNames("charcoal-segmented-control", props.className);
-  const ariaRadioGroupProps = (0, import_react25.useMemo)(() => ({
+  const ariaRadioGroupProps = (0, import_react26.useMemo)(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1225,7 +1236,7 @@ var SegmentedControl = (0, import_react25.forwardRef)(function SegmentedControlI
   const {
     radioGroupProps
   } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react25.useMemo)(() => {
+  const segmentedControlItems = (0, import_react26.useMemo)(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
@@ -1233,11 +1244,11 @@ var SegmentedControl = (0, import_react25.forwardRef)(function SegmentedControlI
   }, [props.data]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = (0, import_react25.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react26.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react25.useRef)(null);
-  const ariaRadioProps = (0, import_react25.useMemo)(() => ({
+  const ref = (0, import_react26.useRef)(null);
+  const ariaRadioProps = (0, import_react26.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1254,13 +1265,13 @@ var Segmented = (props) => {
 };
 
 // src/components/Checkbox/index.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_utils7 = require("@react-aria/utils");
 
 // src/components/Checkbox/CheckboxInput/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var CheckboxInput = (0, import_react26.forwardRef)(function CheckboxInput2({
+var CheckboxInput = (0, import_react27.forwardRef)(function CheckboxInput2({
   onChange,
   checked,
   invalid,
@@ -1268,19 +1279,19 @@ var CheckboxInput = (0, import_react26.forwardRef)(function CheckboxInput2({
   rounded,
   ...props
 }, ref) {
-  const handleChange = (0, import_react26.useCallback)((e) => {
+  const handleChange = (0, import_react27.useCallback)((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-checkbox-input", className);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
 });
-var CheckboxInput_default = (0, import_react26.memo)(CheckboxInput);
+var CheckboxInput_default = (0, import_react27.memo)(CheckboxInput);
 
 // src/components/Checkbox/CheckboxWithLabel.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var CheckboxWithLabel = import_react27.default.memo(function CheckboxWithLabel2({
+var CheckboxWithLabel = import_react28.default.memo(function CheckboxWithLabel2({
   className,
   children,
   input,
@@ -1296,7 +1307,7 @@ var CheckboxWithLabel = import_react27.default.memo(function CheckboxWithLabel2(
 
 // src/components/Checkbox/index.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var Checkbox = (0, import_react28.forwardRef)(function Checkbox2({
+var Checkbox = (0, import_react29.forwardRef)(function Checkbox2({
   disabled,
   className,
   id,
@@ -1311,13 +1322,13 @@ var Checkbox = (0, import_react28.forwardRef)(function Checkbox2({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Checkbox_default = (0, import_react28.memo)(Checkbox);
+var Checkbox_default = (0, import_react29.memo)(Checkbox);
 
 // src/components/TagItem/index.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_utils8 = require("@react-aria/utils");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var TagItem = (0, import_react29.forwardRef)(function TagItemInner({
+var TagItem = (0, import_react30.forwardRef)(function TagItemInner({
   as,
   label,
   translatedLabel,
@@ -1332,7 +1343,7 @@ var TagItem = (0, import_react29.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_react29.useMemo)(() => as ?? "button", [as]);
+  const Component = (0, import_react30.useMemo)(() => as ?? "button", [as]);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
     "--charcoal-tag-item-bg": bg
   }, children: [
@@ -1343,7 +1354,7 @@ var TagItem = (0, import_react29.forwardRef)(function TagItemInner({
     status === "active" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: "16/Remove" })
   ] });
 });
-var TagItem_default = (0, import_react29.memo)(TagItem);
+var TagItem_default = (0, import_react30.memo)(TagItem);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
@@ -1362,6 +1373,7 @@ var TagItem_default = (0, import_react29.memo)(TagItem);
   ModalAlign,
   ModalBody,
   ModalButtons,
+  ModalCloseButton,
   ModalHeader,
   OverlayProvider,
   Radio,