@charcoal-ui/react 3.12.0 → 3.13.0

package/dist/index.cjs.js

@@ -42,13 +42,14 @@ __export(src_exports, {
   ModalAlign: () => ModalAlign,
   ModalBody: () => ModalBody,
   ModalButtons: () => ModalButtons,
+  ModalCloseButton: () => ModalCloseButton,
   ModalHeader: () => ModalHeader,
   MultiSelect: () => MultiSelect_default,
   MultiSelectGroup: () => MultiSelectGroup,
   OverlayProvider: () => import_overlays.OverlayProvider,
   Radio: () => Radio_default,
   RadioGroup: () => RadioGroup,
-  SSRProvider: () => import_ssr.SSRProvider,
+  SSRProvider: () => SSRProvider,
   SegmentedControl: () => SegmentedControl_default,
   Switch: () => Switch_default,
   TagItem: () => TagItem_default,
@@ -88,6 +89,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");
@@ -104,14 +111,14 @@ 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_react2 = require("react");
+var import_react3 = require("react");
 
 // src/_lib/index.ts
 function unreachable(value) {
@@ -213,7 +220,7 @@ var StyledButton = (0, import_styled_components3.default)(Clickable_default).wit
 
 // src/components/Button/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Button = (0, import_react2.forwardRef)(function Button2({
+var Button = (0, import_react3.forwardRef)(function Button2({
   children,
   variant = "Default",
   size = "M",
@@ -227,11 +234,11 @@ var Button = (0, import_react2.forwardRef)(function Button2({
 var Button_default = Button;
 
 // src/components/IconButton/index.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
 var import_styled3 = require("@charcoal-ui/styled");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var IconButton = (0, import_react3.forwardRef)(function IconButtonInner({
+var IconButton = (0, import_react4.forwardRef)(function IconButtonInner({
   variant = "Default",
   size = "M",
   icon,
@@ -239,7 +246,7 @@ var IconButton = (0, import_react3.forwardRef)(function IconButtonInner({
   ...rest
 }, ref) {
   validateIconSize(size, icon);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, $isActive: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, $isActive: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { "aria-hidden": "true", name: icon }) });
 });
 var IconButton_default = IconButton;
 var StyledIconButton = (0, import_styled_components4.default)(Clickable_default).attrs(styledProps).withConfig({
@@ -317,13 +324,13 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var React3 = __toESM(require("react"));
 var import_styled_components5 = __toESM(require("styled-components"));
 var import_warning = __toESM(require("warning"));
 var import_styled4 = require("@charcoal-ui/styled");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Radio = (0, import_react4.forwardRef)(function RadioInner({
+var Radio = (0, import_react5.forwardRef)(function RadioInner({
   value,
   disabled = false,
   children,
@@ -336,7 +343,7 @@ var Radio = (0, import_react4.forwardRef)(function RadioInner({
     readonly,
     invalid,
     onChange
-  } = (0, import_react4.useContext)(RadioGroupContext);
+  } = (0, import_react5.useContext)(RadioGroupContext);
   (0, import_warning.default)(
     name !== void 0,
     `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`
@@ -344,7 +351,7 @@ var Radio = (0, import_react4.forwardRef)(function RadioInner({
   const isSelected = value === selected;
   const isDisabled = disabled || isParentDisabled;
   const isReadonly = readonly && !isSelected;
-  const handleChange = (0, import_react4.useCallback)((e) => {
+  const handleChange = (0, import_react5.useCallback)((e) => {
     onChange(e.currentTarget.value);
   }, [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(RadioRoot, { "aria-disabled": isDisabled || isReadonly, className, children: [
@@ -352,7 +359,7 @@ var Radio = (0, import_react4.forwardRef)(function RadioInner({
     children != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioLabel, { children })
   ] });
 });
-var Radio_default = (0, import_react4.memo)(Radio);
+var Radio_default = (0, import_react5.memo)(Radio);
 var RadioRoot = import_styled_components5.default.label.withConfig({
   componentId: "ccl__sc-1hitkzn-0"
 })(["display:grid;grid-template-columns:auto 1fr;grid-gap:4px;align-items:center;cursor:pointer;&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}"]);
@@ -388,7 +395,7 @@ function RadioGroup({
   invalid,
   children
 }) {
-  const handleChange = (0, import_react4.useCallback)((next) => {
+  const handleChange = (0, import_react5.useCallback)((next) => {
     onChange(next);
   }, [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioGroupContext.Provider, { value: {
@@ -402,14 +409,14 @@ function RadioGroup({
 }
 
 // src/components/MultiSelect/index.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_warning2 = __toESM(require("warning"));
 var import_utils2 = require("@charcoal-ui/utils");
 
 // src/components/MultiSelect/context.ts
-var import_react5 = require("react");
-var MultiSelectGroupContext = (0, import_react5.createContext)({
+var import_react6 = require("react");
+var MultiSelectGroupContext = (0, import_react6.createContext)({
   name: void 0,
   selected: [],
   disabled: false,
@@ -440,7 +447,7 @@ var Icon_default = Icon;
 
 // src/components/MultiSelect/index.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react6.forwardRef)(function MultiSelectInner({
+var MultiSelect = (0, import_react7.forwardRef)(function MultiSelectInner({
   value,
   disabled = false,
   onChange,
@@ -455,14 +462,14 @@ var MultiSelect = (0, import_react6.forwardRef)(function MultiSelectInner({
     readonly,
     invalid,
     onChange: parentOnChange
-  } = (0, import_react6.useContext)(MultiSelectGroupContext);
+  } = (0, import_react7.useContext)(MultiSelectGroupContext);
   (0, import_warning2.default)(
     name !== void 0,
     `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
   );
   const isSelected = selected.includes(value);
   const isDisabled = disabled || parentDisabled || readonly;
-  const handleChange = (0, import_react6.useCallback)((event) => {
+  const handleChange = (0, import_react7.useCallback)((event) => {
     if (!(event.currentTarget instanceof HTMLInputElement)) {
       return;
     }
@@ -486,7 +493,7 @@ var MultiSelect = (0, import_react6.forwardRef)(function MultiSelectInner({
     Boolean(children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MultiSelectLabel, { children })
   ] });
 });
-var MultiSelect_default = (0, import_react6.memo)(MultiSelect);
+var MultiSelect_default = (0, import_react7.memo)(MultiSelect);
 var MultiSelectRoot = import_styled_components6.default.label.withConfig({
   componentId: "ccl__sc-wpr5y9-0"
 })(["display:grid;grid-template-columns:auto 1fr;align-items:center;position:relative;cursor:pointer;gap:", ";&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}"], ({
@@ -524,7 +531,7 @@ function MultiSelectGroup({
   invalid = false,
   children
 }) {
-  const handleChange = (0, import_react6.useCallback)((payload) => {
+  const handleChange = (0, import_react7.useCallback)((payload) => {
     const index = selected.indexOf(payload.value);
     if (payload.selected) {
       if (index < 0) {
@@ -548,18 +555,18 @@ function MultiSelectGroup({
 
 // src/components/Switch/index.tsx
 var import_switch = require("@react-aria/switch");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_stately = require("react-stately");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_utils3 = require("@react-aria/utils");
 var import_styled6 = require("@charcoal-ui/styled");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var SwitchCheckbox = (0, import_react7.forwardRef)(function SwitchCheckboxInner(props, external) {
+var SwitchCheckbox = (0, import_react8.forwardRef)(function SwitchCheckboxInner(props, external) {
   const {
     disabled,
     className
   } = props;
-  const ariaSwitchProps = (0, import_react7.useMemo)(() => ({
+  const ariaSwitchProps = (0, import_react8.useMemo)(() => ({
     ...props,
     "aria-label": "children" in props ? void 0 : props.label,
     isDisabled: props.disabled,
@@ -579,7 +586,7 @@ var SwitchCheckbox = (0, import_react7.forwardRef)(function SwitchCheckboxInner(
     "children" in props ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LabelInner, { children: props.children }) : void 0
   ] });
 });
-var Switch_default = (0, import_react7.memo)(SwitchCheckbox);
+var Switch_default = (0, import_react8.memo)(SwitchCheckbox);
 var Label = import_styled_components7.default.label.withConfig({
   componentId: "ccl__sc-1wy6z5h-0"
 })(["display:inline-grid;grid-template-columns:auto 1fr;align-items:center;cursor:pointer;outline:0;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}"]);
@@ -595,7 +602,7 @@ var SwitchInput = import_styled_components7.default.input.attrs({
 // src/components/TextField/index.tsx
 var import_textfield = require("@react-aria/textfield");
 var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var React6 = __toESM(require("react"));
 var import_styled_components9 = __toESM(require("styled-components"));
 
@@ -633,9 +640,9 @@ var FieldLabelWrapper = import_styled_components8.default.div.withConfig({
 })(["display:inline-flex;align-items:center;> ", "{margin-left:4px;}> ", "{margin-left:auto;}"], RequiredText, SubLabelClickable);
 
 // src/components/TextField/useFocusWithClick.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useFocusWithClick(containerRef, inputRef) {
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const el = containerRef.current;
     if (el) {
       const handleDown = (e) => {
@@ -678,10 +685,10 @@ var TextField = React6.forwardRef(function SingleLineTextFieldInner({
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden.useVisuallyHidden)();
-  const ariaRef = (0, import_react9.useRef)(null);
-  const [count, setCount] = (0, import_react9.useState)(countCodePointsInString(props.value ?? ""));
+  const ariaRef = (0, import_react10.useRef)(null);
+  const [count, setCount] = (0, import_react10.useState)(countCodePointsInString(props.value ?? ""));
   const nonControlled = props.value === void 0;
-  const handleChange = (0, import_react9.useCallback)((value) => {
+  const handleChange = (0, import_react10.useCallback)((value) => {
     const count2 = countCodePointsInString(value);
     if (maxLength !== void 0 && count2 > maxLength) {
       return;
@@ -691,7 +698,7 @@ var TextField = React6.forwardRef(function SingleLineTextFieldInner({
     }
     onChange?.(value);
   }, [maxLength, nonControlled, onChange]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setCount(countCodePointsInString(props.value ?? ""));
   }, [props.value]);
   const {
@@ -710,7 +717,7 @@ var TextField = React6.forwardRef(function SingleLineTextFieldInner({
     onChange: handleChange,
     ...props
   }, ariaRef);
-  const containerRef = (0, import_react9.useRef)(null);
+  const containerRef = (0, import_react10.useRef)(null);
   useFocusWithClick(containerRef, ariaRef);
   const inputProps = (0, import_utils4.mergeProps)(restProps, ariaInputProps);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
@@ -757,11 +764,11 @@ var AssistiveText = import_styled_components9.default.p.withConfig({
 // src/components/TextArea/index.tsx
 var import_textfield2 = require("@react-aria/textfield");
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_utils5 = require("@react-aria/utils");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var TextArea = (0, import_react10.forwardRef)(function TextAreaInner({
+var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
   onChange,
   ...props
 }, forwardRef18) {
@@ -785,17 +792,17 @@ var TextArea = (0, import_react10.forwardRef)(function TextAreaInner({
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden2.useVisuallyHidden)();
-  const textareaRef = (0, import_react10.useRef)(null);
-  const ariaRef = (0, import_react10.useRef)(null);
-  const [count, setCount] = (0, import_react10.useState)(countCodePointsInString(props.value ?? ""));
-  const [rows, setRows] = (0, import_react10.useState)(initialRows);
-  const syncHeight = (0, import_react10.useCallback)((textarea) => {
+  const textareaRef = (0, import_react11.useRef)(null);
+  const ariaRef = (0, import_react11.useRef)(null);
+  const [count, setCount] = (0, import_react11.useState)(countCodePointsInString(props.value ?? ""));
+  const [rows, setRows] = (0, import_react11.useState)(initialRows);
+  const syncHeight = (0, import_react11.useCallback)((textarea) => {
     const rows2 = (`${textarea.value}
 `.match(/\n/gu)?.length ?? 0) || 1;
     setRows(initialRows <= rows2 ? rows2 : initialRows);
   }, [initialRows]);
   const nonControlled = props.value === void 0;
-  const handleChange = (0, import_react10.useCallback)((value) => {
+  const handleChange = (0, import_react11.useCallback)((value) => {
     const count2 = countCodePointsInString(value);
     if (maxLength !== void 0 && count2 > maxLength) {
       return;
@@ -808,7 +815,7 @@ var TextArea = (0, import_react10.forwardRef)(function TextAreaInner({
     }
     onChange?.(value);
   }, [autoHeight, maxLength, nonControlled, onChange, syncHeight]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setCount(countCodePointsInString(props.value ?? ""));
   }, [props.value]);
   const {
@@ -827,12 +834,12 @@ var TextArea = (0, import_react10.forwardRef)(function TextAreaInner({
     onChange: handleChange,
     ...props
   }, ariaRef);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
   }, [autoHeight, syncHeight]);
-  const containerRef = (0, import_react10.useRef)(null);
+  const containerRef = (0, import_react11.useRef)(null);
   useFocusWithClick(containerRef, ariaRef);
   const inputProps = (0, import_utils5.mergeProps)(restProps, ariaInputProps);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(TextFieldRoot2, { className, isDisabled: disabled, children: [
@@ -866,7 +873,7 @@ var MultiLineCounter = import_styled_components10.default.span.withConfig({
 })(["position:absolute;bottom:9px;right:8px;line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
 
 // src/components/Modal/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var React10 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
 var import_styled_components12 = __toESM(require("styled-components"));
@@ -876,7 +883,7 @@ var import_react_spring2 = require("react-spring");
 var import_utils8 = require("@react-aria/utils");
 
 // src/components/Modal/Dialog/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_dialog = require("@react-aria/dialog");
 var import_foundation = require("@charcoal-ui/foundation");
@@ -901,7 +908,7 @@ function useForwardedRef(ref) {
 
 // src/components/Modal/Dialog/index.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Dialog = (0, import_react11.forwardRef)(function Dialog2(props, forwardRef18) {
+var Dialog = (0, import_react12.forwardRef)(function Dialog2(props, forwardRef18) {
   const ref = useForwardedRef(forwardRef18);
   const {
     dialogProps
@@ -940,9 +947,9 @@ var React9 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 function usePreventScroll(element, isOpen) {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -983,7 +990,7 @@ function useCharcoalModalOverlay(props, state, ref) {
 // src/components/Modal/index.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react13.forwardRef)(function ModalInner({
+var Modal = (0, import_react14.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -996,7 +1003,8 @@ var Modal = (0, import_react13.forwardRef)(function ModalInner({
     isDismissable,
     onClose,
     className,
-    isOpen = false
+    isOpen = false,
+    closeButtonAriaLabel = "Close"
   } = props;
   const ref = (0, import_utils8.useObjectRef)(external);
   const {
@@ -1061,10 +1069,10 @@ var Modal = (0, import_react13.forwardRef)(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalCrossButton, { size: "S", icon: "24/Close", onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalCloseButton, { size: "S", icon: "24/Close", type: "button", "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
-var Modal_default = (0, import_react13.memo)(Modal);
+var Modal_default = (0, import_react14.memo)(Modal);
 var ModalContext = React10.createContext({
   titleProps: {},
   title: "",
@@ -1079,14 +1087,14 @@ var ModalBackground = (0, import_react_spring2.animated)(import_styled_component
 }) => zIndex, ({
   theme
 }) => (0, import_utils7.maxWidth)(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && (0, import_styled_components12.css)(["padding:0;"])));
-var ModalCrossButton = (0, import_styled_components12.default)(IconButton_default).withConfig({
+var ModalCloseButton = (0, import_styled_components12.default)(IconButton_default).withConfig({
   componentId: "ccl__sc-h2bc55-1"
 })(["position:absolute;top:8px;right:8px;color:var(--charcoal-text3);transition:0.2s color;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{color:var(--charcoal-text3-hover);}&:active{color:var(--charcoal-text3-press);}}"]);
 function ModalTitle(props) {
   const {
     titleProps,
     title
-  } = (0, import_react13.useContext)(ModalContext);
+  } = (0, import_react14.useContext)(ModalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
 }
 var ModalHeading = import_styled_components12.default.h3.withConfig({
@@ -1095,11 +1103,11 @@ var ModalHeading = import_styled_components12.default.h3.withConfig({
 
 // src/components/Modal/ModalPlumbing.tsx
 var import_styled_components13 = __toESM(require("styled-components"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_utils9 = require("@charcoal-ui/utils");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react14.useContext)(ModalContext);
+  const modalCtx = (0, import_react15.useContext)(ModalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalHeaderRoot, { $bottomSheet: modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledModalTitle, {}) });
 }
 var ModalHeaderRoot = import_styled_components13.default.div.withConfig({
@@ -1121,10 +1129,10 @@ var ModalButtons = import_styled_components13.default.div.withConfig({
 })(["display:grid;grid-auto-flow:row;grid-row-gap:8px;padding-top:16px;padding-left:16px;padding-right:16px;"]);
 
 // src/components/LoadingSpinner/index.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_styled_components14 = __toESM(require("styled-components"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react15.forwardRef)(function LoadingSpinnerInner({
+var LoadingSpinner = (0, import_react16.forwardRef)(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
@@ -1132,7 +1140,7 @@ var LoadingSpinner = (0, import_react15.forwardRef)(function LoadingSpinnerInner
 }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoadingSpinnerRoot, { size, padding, transparent, className, ref, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = (0, import_react15.memo)(LoadingSpinner);
+var LoadingSpinner_default = (0, import_react16.memo)(LoadingSpinner);
 var LoadingSpinnerRoot = import_styled_components14.default.div.attrs({
   role: "progressbar"
 }).withConfig({
@@ -1146,11 +1154,11 @@ var Icon2 = import_styled_components14.default.div.attrs({
 }).withConfig({
   componentId: "ccl__sc-1id6yz4-1"
 })(["width:1em;height:1em;border-radius:1em;background-color:currentColor;animation:", " 1s both ease-out;animation-iteration-count:", ";&[data-reset-animation]{animation:none;}"], scaleOut, (p) => p.once ? 1 : "infinite");
-var LoadingSpinnerIcon = (0, import_react15.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinnerIcon = (0, import_react16.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -1164,21 +1172,21 @@ var LoadingSpinnerIcon = (0, import_react15.forwardRef)(function LoadingSpinnerI
 });
 
 // src/components/DropdownSelector/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_styled_components17 = __toESM(require("styled-components"));
 var import_utils10 = require("@charcoal-ui/utils");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_overlays4 = require("@react-aria/overlays");
 var import_styled_components15 = __toESM(require("styled-components"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = (0, import_react16.useRef)(null);
+  const defaultPopoverRef = (0, import_react17.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const {
     popoverProps,
@@ -1194,7 +1202,7 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = (0, import_react16.useContext)(ModalBackgroundContext);
+  const modalBackground = (0, import_react17.useContext)(ModalBackgroundContext);
   usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
@@ -1221,13 +1229,13 @@ function DropdownPopover({
   children,
   ...props
 }) {
-  const ref = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
+  const ref = (0, import_react18.useRef)(null);
+  (0, import_react18.useEffect)(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (props.isOpen && props.value !== void 0) {
       const windowScrollY = window.scrollY;
       const windowScrollX = window.scrollX;
@@ -1264,12 +1272,12 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react18 = require("react");
-var MenuListContext = (0, import_react18.createContext)({
+var import_react19 = require("react");
+var MenuListContext = (0, import_react19.createContext)({
   root: void 0,
   value: "",
   propsArray: [],
@@ -1303,8 +1311,8 @@ function getValuesRecursive(children) {
 // src/components/DropdownSelector/MenuList/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function MenuList(props) {
-  const root = (0, import_react19.useRef)(null);
-  const propsArray = (0, import_react19.useMemo)(() => getValuesRecursive(props.children), [props.children]);
+  const root = (0, import_react20.useRef)(null);
+  const propsArray = (0, import_react20.useMemo)(() => getValuesRecursive(props.children), [props.children]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
@@ -1327,15 +1335,15 @@ function DropdownSelector({
   onChange,
   ...props
 }) {
-  const triggerRef = (0, import_react20.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const triggerRef = (0, import_react21.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = (0, import_react20.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const isPlaceholder = (0, import_react21.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_react20.useCallback)((e) => {
+  const handleChange = (0, import_react21.useCallback)((e) => {
     onChange(e.target.value);
   }, [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
@@ -1404,7 +1412,7 @@ var ItemDiv = import_styled_components18.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_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1441,12 +1449,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = (0, import_react21.useContext)(MenuListContext);
-  const setContextValue = (0, import_react21.useCallback)(() => {
+  } = (0, import_react22.useContext)(MenuListContext);
+  const setContextValue = (0, import_react22.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react21.useCallback)((e) => {
+  const handleKeyDown = (0, import_react22.useCallback)((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1493,12 +1501,12 @@ function MenuItem(props) {
 }
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = (0, import_react22.useContext)(MenuListContext);
+  } = (0, import_react23.useContext)(MenuListContext);
   const isSelected = props.value === ctxValue;
   const {
     children,
@@ -1538,15 +1546,15 @@ var StyledLi2 = import_styled_components20.default.li.withConfig({
 })(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_radio = require("@react-stately/radio");
 var import_radio2 = require("@react-aria/radio");
 var import_styled_components21 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioContext = (0, import_react23.createContext)(null);
+var RadioContext = (0, import_react24.createContext)(null);
 var RadioProvider = ({
   value,
   children
@@ -1554,7 +1562,7 @@ var RadioProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react23.useContext)(RadioContext);
+  const state = (0, import_react24.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
@@ -1562,8 +1570,8 @@ var useRadioContext = () => {
 
 // src/components/SegmentedControl/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react24.forwardRef)(function SegmentedControlInner(props, ref) {
-  const ariaRadioGroupProps = (0, import_react24.useMemo)(() => ({
+var SegmentedControl = (0, import_react25.forwardRef)(function SegmentedControlInner(props, ref) {
+  const ariaRadioGroupProps = (0, import_react25.useMemo)(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1574,7 +1582,7 @@ var SegmentedControl = (0, import_react24.forwardRef)(function SegmentedControlI
   const {
     radioGroupProps
   } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react24.useMemo)(() => {
+  const segmentedControlItems = (0, import_react25.useMemo)(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
@@ -1582,11 +1590,11 @@ var SegmentedControl = (0, import_react24.forwardRef)(function SegmentedControlI
   }, [props.data]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SegmentedControlRoot, { ref, ...radioGroupProps, className: props.className, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = (0, import_react24.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react25.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react24.useRef)(null);
-  const ariaRadioProps = (0, import_react24.useMemo)(() => ({
+  const ref = (0, import_react25.useRef)(null);
+  const ariaRadioProps = (0, import_react25.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1620,18 +1628,18 @@ var SegmentedLabelInner = import_styled_components21.default.div.withConfig({
 })(["font-size:14px;line-height:22px;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
 
 // src/components/Checkbox/index.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
 var import_utils11 = require("@react-aria/utils");
 var import_react_stately2 = require("react-stately");
 var import_styled9 = require("@charcoal-ui/styled");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Checkbox = (0, import_react25.forwardRef)(function CheckboxInner({
+var Checkbox = (0, import_react26.forwardRef)(function CheckboxInner({
   invalid = false,
   ...props
 }, ref) {
-  const ariaCheckboxProps = (0, import_react25.useMemo)(() => ({
+  const ariaCheckboxProps = (0, import_react26.useMemo)(() => ({
     ...props,
     isInValid: invalid,
     isSelected: props.checked,
@@ -1655,7 +1663,7 @@ var Checkbox = (0, import_react25.forwardRef)(function CheckboxInner({
     "children" in props && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InputLabel, { children: props.children })
   ] });
 });
-var Checkbox_default = (0, import_react25.memo)(Checkbox);
+var Checkbox_default = (0, import_react26.memo)(Checkbox);
 var hiddenCss = (0, import_styled_components22.css)(["visibility:hidden;"]);
 var InputRoot = import_styled_components22.default.label.withConfig({
   componentId: "ccl__sc-wrdmwj-0"
@@ -1676,7 +1684,7 @@ var InputLabel = import_styled_components22.default.div.withConfig({
 })(["color:var(--charcoal-text2);font-size:14px;line-height:20px;"]);
 
 // src/components/TagItem/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_utils12 = require("@react-aria/utils");
 var import_styled_components23 = __toESM(require("styled-components"));
 var import_utils13 = require("@charcoal-ui/utils");
@@ -1687,7 +1695,7 @@ var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react26.forwardRef)(function TagItemInner({
+var TagItem = (0, import_react27.forwardRef)(function TagItemInner({
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
@@ -1699,7 +1707,7 @@ var TagItem = (0, import_react26.forwardRef)(function TagItemInner({
   ...props
 }, _ref) {
   const ref = (0, import_utils12.useObjectRef)(_ref);
-  const ariaButtonProps = (0, import_react26.useMemo)(() => ({
+  const ariaButtonProps = (0, import_react27.useMemo)(() => ({
     elementType: "a",
     isDisabled: disabled,
     ...props
@@ -1719,7 +1727,7 @@ var TagItem = (0, import_react26.forwardRef)(function TagItemInner({
     ] })
   ] });
 });
-var TagItem_default = (0, import_react26.memo)(TagItem);
+var TagItem_default = (0, import_react27.memo)(TagItem);
 var horizontalPadding = ({
   left,
   right
@@ -1797,6 +1805,7 @@ var TranslatedLabel = import_styled_components23.default.div.withConfig({
   ModalAlign,
   ModalBody,
   ModalButtons,
+  ModalCloseButton,
   ModalHeader,
   MultiSelect,
   MultiSelectGroup,