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

package/dist/index.cjs.js

@@ -327,9 +327,8 @@ var Switch_default = (0, import_react9.memo)(Switch);
 
 // src/components/TextField/index.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var React8 = __toESM(require("react"));
-var import_styled_components2 = __toESM(require("styled-components"));
 
 // src/components/FieldLabel/index.tsx
 var React7 = __toESM(require("react"));
@@ -390,7 +389,25 @@ function useFocusWithClick(containerRef, inputRef) {
 
 // src/components/TextField/index.tsx
 var import_utils2 = require("@react-aria/utils");
+
+// src/_lib/createDivComponent.tsx
+var import_react11 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+function createDivComponent(mainClassName) {
+  return (0, import_react11.forwardRef)(function DivComponent({
+    className,
+    ...props
+  }, ref) {
+    const classNames = useClassNames(mainClassName, className);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: classNames, ref, ...props });
+  });
+}
+
+// src/components/TextField/AssistiveText/index.tsx
+var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
+
+// src/components/TextField/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var TextField = React8.forwardRef(function SingleLineTextFieldInner({
   assistiveText,
   className,
@@ -406,16 +423,17 @@ var TextField = React8.forwardRef(function SingleLineTextFieldInner({
   subLabel,
   suffix = null,
   type = "text",
+  invalid,
   value,
   getCount = countCodePointsInString,
   ...props
 }, forwardRef20) {
-  const inputRef = (0, import_react11.useRef)(null);
+  const inputRef = (0, import_react12.useRef)(null);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden.useVisuallyHidden)();
-  const [count, setCount] = (0, import_react11.useState)(getCount(value ?? ""));
-  const handleChange = (0, import_react11.useCallback)((e) => {
+  const [count, setCount] = (0, import_react12.useState)(getCount(value ?? ""));
+  const handleChange = (0, import_react12.useCallback)((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -424,60 +442,37 @@ var TextField = React8.forwardRef(function SingleLineTextFieldInner({
     setCount(count2);
     onChange?.(value2);
   }, [getCount, maxLength, onChange]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  const containerRef = (0, import_react11.useRef)(null);
+  const containerRef = (0, import_react12.useRef)(null);
   useFocusWithClick(containerRef, inputRef);
   const inputId = (0, import_utils2.useId)(props.id);
   const describedbyId = (0, import_utils2.useId)();
   const labelledbyId = (0, import_utils2.useId)();
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(StyledInputContainer, { "aria-disabled": disabled === true ? true : void 0, hasPrefix: prefix != null, hasSuffix: suffix != null || showCount, invalid: props.invalid === true, ref: containerRef, children: [
-      prefix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PrefixContainer, { children: prefix }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledInput, { "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": props.invalid, "aria-labelledby": labelledbyId, id: inputId, invalid: props.invalid === true, maxLength, onChange: handleChange, prefix: props.rdfaPredix, ref: (0, import_utils2.mergeRefs)(forwardRef20, inputRef), type, value, ...props }),
-      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SuffixContainer, { children: [
+  const classNames = useClassNames("charcoal-text-field-root");
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "charcoal-text-field-prefix", children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: (0, import_utils2.mergeRefs)(forwardRef20, inputRef), type, value, ...props }),
+      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "charcoal-text-field-suffix", children: [
         suffix,
-        showCount && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AssistiveText, { invalid: props.invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
-var TextFieldRoot = import_styled_components2.default.div.withConfig({
-  componentId: "ccl__sc-3dd0tt-0"
-})(["display:grid;grid-template-columns:1fr;grid-gap:4px;", ""], (p) => p.isDisabled && {
-  opacity: p.theme.elementEffect.disabled.opacity
-});
-var StyledInputContainer = import_styled_components2.default.div.withConfig({
-  componentId: "ccl__sc-3dd0tt-1"
-})(["display:grid;grid-template-columns:", ";height:40px;transition:0.2s background-color,0.2s box-shadow;color:var(--charcoal-text2);background-color:var(--charcoal-surface3);border-radius:4px;gap:4px;padding:0 8px;line-height:22px;font-size:14px;:not(:disabled):not([aria-disabled]):hover,[aria-disabled='false']:hover{background-color:var(--charcoal-surface3-hover);}:focus-within{outline:none;box-shadow:0 0 0 4px ", ";}", ""], (p) => [p.hasPrefix && "auto", "1fr", p.hasSuffix && "auto"].filter(Boolean).join(" "), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && (0, import_styled_components2.css)(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
-var PrefixContainer = import_styled_components2.default.div.withConfig({
-  componentId: "ccl__sc-3dd0tt-2"
-})(["display:flex;align-items:center;"]);
-var SuffixContainer = import_styled_components2.default.span.withConfig({
-  componentId: "ccl__sc-3dd0tt-3"
-})(["display:flex;align-items:center;gap:8px;"]);
-var StyledInput = import_styled_components2.default.input.withConfig({
-  componentId: "ccl__sc-3dd0tt-4"
-})(["border:none;box-sizing:border-box;outline:none;font-family:inherit;transform-origin:top left;transform:scale(0.875);width:calc(100% / 0.875);height:calc(100% / 0.875);font-size:calc(14px / 0.875);line-height:calc(22px / 0.875);padding-left:0;padding-right:0;border-radius:calc(4px / 0.875);appearance:none;background:transparent;color:var(--charcoal-text2);&::placeholder{color:var(--charcoal-text3);}"]);
-var SingleLineCounter = import_styled_components2.default.span.withConfig({
-  componentId: "ccl__sc-3dd0tt-5"
-})(["line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
-var AssistiveText = import_styled_components2.default.p.withConfig({
-  componentId: "ccl__sc-3dd0tt-6"
-})(["font-size:14px;line-height:22px;margin:0;color:", ";"], (p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`);
 
 // src/components/TextArea/index.tsx
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
-var import_react12 = require("react");
-var import_styled_components3 = __toESM(require("styled-components"));
+var import_react13 = require("react");
 var import_utils3 = require("@react-aria/utils");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var TextArea = (0, import_react12.forwardRef)(function TextAreaInner({
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var TextArea = (0, import_react13.forwardRef)(function TextAreaInner({
   onChange,
   className,
   value,
@@ -492,23 +487,23 @@ var TextArea = (0, import_react12.forwardRef)(function TextAreaInner({
   maxLength,
   autoHeight = false,
   rows: initialRows = 4,
+  invalid,
   getCount = countCodePointsInString,
   ...props
 }, forwardRef20) {
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden2.useVisuallyHidden)();
-  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 textareaRef = (0, import_react13.useRef)(null);
+  const [count, setCount] = (0, import_react13.useState)(getCount(value ?? ""));
+  const [rows, setRows] = (0, import_react13.useState)(initialRows);
+  const syncHeight = (0, import_react13.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_react12.useCallback)((e) => {
+  const handleChange = (0, import_react13.useCallback)((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -522,54 +517,38 @@ var TextArea = (0, import_react12.forwardRef)(function TextAreaInner({
     }
     onChange?.(value2);
   }, [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
   }, [autoHeight, syncHeight]);
-  const containerRef = (0, import_react12.useRef)(null);
-  useFocusWithClick(containerRef, textAreaRef);
+  const containerRef = (0, import_react13.useRef)(null);
+  useFocusWithClick(containerRef, textareaRef);
   const textAreaId = (0, import_utils3.useId)(props.id);
   const describedbyId = (0, import_utils3.useId)();
   const labelledbyId = (0, import_utils3.useId)();
+  const classNames = useClassNames("charcoal-text-area-root", className);
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(TextFieldRoot2, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(StyledTextareaContainer, { "aria-disabled": disabled === true ? "true" : void 0, invalid: props.invalid === true, ref: containerRef, rows: showCount ? rows + 1 : rows, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledTextarea, { "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": props.invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, noBottomPadding: showCount, onChange: handleChange, ref: mergeRefs(forwardRef20, textAreaRef), rows, value, ...props }),
-      showCount && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
+      "--charcoal-text-area-rows": `${showCount ? rows + 1 : rows}`
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef20, textareaRef), rows, value, disabled, ...props }),
+      showCount && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssistiveText, { invalid: props.invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
-var TextFieldRoot2 = import_styled_components3.default.div.withConfig({
-  componentId: "ccl__sc-58waht-0"
-})(["display:grid;grid-template-columns:1fr;grid-gap:4px;", ""], (p) => p.isDisabled && {
-  opacity: p.theme.elementEffect.disabled.opacity
-});
-var StyledTextareaContainer = import_styled_components3.default.div.withConfig({
-  componentId: "ccl__sc-58waht-1"
-})(["position:relative;overflow:hidden;color:var(--charcoal-text2);background-color:var(--charcoal-surface3);border-radius:4px;transition:0.2s background-color,0.2s box-shadow;", ";:not([aria-disabled]):hover,[aria-disabled='false']:hover{background-color:var(--charcoal-surface3-hover);}:focus-within{outline:none;box-shadow:0 0 0 4px ", ";}", ""], ({
-  rows
-}) => (0, import_styled_components3.css)(["height:calc(22px * ", " + 18px);"], rows), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && (0, import_styled_components3.css)(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
-var StyledTextarea = import_styled_components3.default.textarea.withConfig({
-  componentId: "ccl__sc-58waht-2"
-})(["border:none;outline:none;resize:none;font-family:inherit;color:inherit;box-sizing:border-box;transform-origin:top left;transform:scale(0.875);width:calc(100% / 0.875);font-size:calc(14px / 0.875);line-height:calc(22px / 0.875);padding:calc(9px / 0.875) calc(8px / 0.875) ", ";", ";appearance:none;background:none;&::placeholder{color:var(--charcoal-text3);}"], (p) => p.noBottomPadding ? 0 : "", ({
-  rows = 1,
-  noBottomPadding
-}) => (0, import_styled_components3.css)(["height:calc(22px / 0.875 * ", " + ", "px);"], rows, noBottomPadding ? 9 : 20));
-var MultiLineCounter = import_styled_components3.default.span.withConfig({
-  componentId: "ccl__sc-58waht-3"
-})(["position:absolute;bottom:9px;right:8px;line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
 
 // src/components/Icon/index.tsx
 var React9 = __toESM(require("react"));
 var import_icons = require("@charcoal-ui/icons");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Icon = React9.forwardRef(function IconInner({
   name,
   scale,
@@ -577,22 +556,22 @@ var Icon = React9.forwardRef(function IconInner({
   className,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
 });
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var React13 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
-var import_styled_components4 = require("styled-components");
+var import_styled_components2 = require("styled-components");
 var import_utils4 = require("@charcoal-ui/utils");
 var import_styled2 = require("@charcoal-ui/styled");
 var import_react_spring = require("react-spring");
 var import_utils5 = require("@react-aria/utils");
 
 // src/components/Modal/Dialog/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_dialog = require("@react-aria/dialog");
 
 // src/_lib/useForwardedRef.tsx
@@ -612,11 +591,11 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Dialog = (0, import_react13.forwardRef)(function Dialog2({
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Dialog = (0, import_react14.forwardRef)(function Dialog2({
   size,
   bottomSheet,
-  css: css4,
+  css: css2,
   className,
   ...props
 }, forwardRef20) {
@@ -627,7 +606,7 @@ var Dialog = (0, import_react13.forwardRef)(function Dialog2({
     role: "dialog"
   }, ref);
   const classNames = useClassNames("charcoal-modal-dialog", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, ref, ...props });
 });
 
 // src/components/Modal/ModalBackgroundContext.tsx
@@ -639,9 +618,9 @@ var React12 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 function usePreventScroll(element, isOpen) {
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -680,9 +659,9 @@ function useCharcoalModalOverlay(props, state, ref) {
 }
 
 // src/components/Modal/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react15.forwardRef)(function ModalInner({
+var Modal = (0, import_react16.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -709,7 +688,7 @@ var Modal = (0, import_react15.forwardRef)(function ModalInner({
     onClose,
     isOpen
   }, ref);
-  const theme = (0, import_styled_components4.useTheme)();
+  const theme = (0, import_styled_components2.useTheme)();
   const isMobile = (0, import_styled2.useMedia)((0, import_utils4.maxWidth)(theme.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const showDismiss = !isMobile || bottomSheet !== true;
@@ -748,15 +727,15 @@ var Modal = (0, import_react15.forwardRef)(function ModalInner({
     backgroundColor,
     overflow,
     transform
-  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_spring.animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
+  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_spring.animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
     backgroundColor,
     overflow,
     zIndex
   } : {
     zIndex
-  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
+  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
     transform
-  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ModalContext.Provider, { value: {
+  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ModalContext.Provider, { value: {
     titleProps: {},
     title,
     close: onClose,
@@ -764,11 +743,11 @@ var Modal = (0, import_react15.forwardRef)(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var AnimatedDialog = (0, import_react_spring.animated)(Dialog);
-var Modal_default = (0, import_react15.memo)(Modal);
+var Modal_default = (0, import_react16.memo)(Modal);
 var ModalContext = React13.createContext({
   titleProps: {},
   title: "",
@@ -777,50 +756,41 @@ var ModalContext = React13.createContext({
   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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
 }
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_react16 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function ModalHeader() {
-  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 }) });
+  const modalCtx = (0, import_react17.useContext)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime17.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_react16.forwardRef)(function DivComponent({
-    className,
-    ...props
-  }, ref) {
-    const classNames = useClassNames(mainClassName, className);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: classNames, ref, ...props });
-  });
-}
 
 // src/components/LoadingSpinner/index.tsx
-var import_react17 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react17.forwardRef)(function LoadingSpinnerInner({
+var import_react18 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var LoadingSpinner = (0, import_react18.forwardRef)(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
   ...props
 }, ref) {
   const classNames = useClassNames("charcoal-loading-spinner", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "progressbar", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { role: "progressbar", style: {
     "--charcoal-loading-spinner-size": `${size}px`,
     "--charcoal-loading-spinner-padding": `${padding}px`
-  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingSpinnerIcon, {}) });
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = (0, import_react17.memo)(LoadingSpinner);
-var LoadingSpinnerIcon = (0, import_react17.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinner_default = (0, import_react18.memo)(LoadingSpinner);
+var LoadingSpinnerIcon = (0, import_react18.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react17.useRef)(null);
-  (0, import_react17.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -830,25 +800,25 @@ var LoadingSpinnerIcon = (0, import_react17.forwardRef)(function LoadingSpinnerI
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
 });
 
 // src/components/DropdownSelector/index.tsx
-var import_react22 = require("react");
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_react23 = require("react");
+var import_styled_components5 = __toESM(require("styled-components"));
 var import_utils6 = require("@charcoal-ui/utils");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react18 = require("react");
+var import_react19 = 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 import_styled_components3 = __toESM(require("styled-components"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = (0, import_react18.useRef)(null);
+  const defaultPopoverRef = (0, import_react19.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const {
     popoverProps,
@@ -864,40 +834,40 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = (0, import_react18.useContext)(ModalBackgroundContext);
+  const modalBackground = (0, import_react19.useContext)(ModalBackgroundContext);
   usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ...underlayProps, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ...underlayProps, style: {
       position: "fixed",
       zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
       inset: 0
     } }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
       props.children,
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
-var DropdownPopoverDiv = import_styled_components5.default.div.withConfig({
+var DropdownPopoverDiv = import_styled_components3.default.div.withConfig({
   componentId: "ccl__sc-jwnoy6-0"
 })(["margin:4px 0;list-style:none;overflow:auto;max-height:inherit;background-color:var(--charcoal-background1);border:solid 1px var(--charcoal-border-default);border-radius:8px;padding-top:8px;padding-bottom:8px;"]);
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function DropdownPopover({
   children,
   ...props
 }) {
-  const ref = (0, import_react19.useRef)(null);
-  (0, import_react19.useEffect)(() => {
+  const ref = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (props.isOpen && props.value !== void 0) {
       const windowScrollY = window.scrollY;
       const windowScrollX = window.scrollX;
@@ -906,7 +876,7 @@ function DropdownPopover({
       window.scrollTo(windowScrollX, windowScrollY);
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
@@ -934,12 +904,12 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react21 = require("react");
-var import_styled_components6 = __toESM(require("styled-components"));
+var import_react22 = require("react");
+var import_styled_components4 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react20 = require("react");
-var MenuListContext = (0, import_react20.createContext)({
+var import_react21 = require("react");
+var MenuListContext = (0, import_react21.createContext)({
   root: void 0,
   value: "",
   propsArray: [],
@@ -971,11 +941,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function MenuList(props) {
-  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: {
+  const root = (0, import_react22.useRef)(null);
+  const propsArray = (0, import_react22.useMemo)(() => getValuesRecursive(props.children), [props.children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -984,89 +954,89 @@ function MenuList(props) {
     }
   }, children: props.children }) });
 }
-var StyledUl = import_styled_components6.default.ul.withConfig({
+var StyledUl = import_styled_components4.default.ul.withConfig({
   componentId: "ccl__sc-1y72v02-0"
 })(["padding:0;margin:0;"]);
 
 // src/components/DropdownSelector/index.tsx
 var import_styled3 = require("@charcoal-ui/styled");
 var import_visually_hidden3 = require("@react-aria/visually-hidden");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector({
   onChange,
   ...props
 }) {
-  const triggerRef = (0, import_react22.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
+  const triggerRef = (0, import_react23.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react23.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = (0, import_react22.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const isPlaceholder = (0, import_react23.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_react22.useCallback)((e) => {
+  const handleChange = (0, import_react23.useCallback)((e) => {
     onChange(e.target.value);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
-    props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldLabel_default, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
+    props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldLabel_default, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
       if (props.disabled === true)
         return;
       setIsOpen(true);
     }, ref: triggerRef, type: "button", $active: isOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownButtonIcon, { name: "16/Menu" })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownButtonIcon, { name: "16/Menu" })
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuList, { value: props.value, onChange: (v) => {
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MenuList, { value: props.value, onChange: (v) => {
       onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
-    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AssistiveText, { invalid: props.invalid === true, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AssistiveText, { "data-invalid": props.invalid === true, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = import_styled_components7.default.div.withConfig({
+var DropdownSelectorRoot = import_styled_components5.default.div.withConfig({
   componentId: "ccl__sc-1vnxmc8-0"
 })(["display:grid;grid-template-columns:1fr;grid-gap:4px;width:100%;", "{cursor:default;opacity:0.32;}"], import_utils6.disabledSelector);
-var DropdownButton = import_styled_components7.default.button.withConfig({
+var DropdownButton = import_styled_components5.default.button.withConfig({
   componentId: "ccl__sc-1vnxmc8-1"
 })(["display:grid;grid-template-columns:1fr auto;justify-content:space-between;align-items:center;height:40px;width:100%;box-sizing:border-box;border:none;cursor:pointer;gap:4px;", "{cursor:default;}padding-right:8px;padding-left:8px;background-color:var(--charcoal-surface3);border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " ", "}", ""], import_utils6.disabledSelector, import_styled3.focusVisibleFocusRingCss, ({
   $active
-}) => $active === true ? (0, import_styled_components7.css)(["background-color:var(--charcoal-surface3-press);"]) : (0, import_styled_components7.css)(["&:hover{background-color:var(--charcoal-surface3-hover);}&:active{background-color:var(--charcoal-surface3-press);}"]), ({
+}) => $active === true ? (0, import_styled_components5.css)(["background-color:var(--charcoal-surface3-press);"]) : (0, import_styled_components5.css)(["&:hover{background-color:var(--charcoal-surface3-hover);}&:active{background-color:var(--charcoal-surface3-press);}"]), ({
   invalid
-}) => invalid === true && (0, import_styled_components7.css)(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
-var DropdownButtonText = import_styled_components7.default.span.withConfig({
+}) => invalid === true && (0, import_styled_components5.css)(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
+var DropdownButtonText = import_styled_components5.default.span.withConfig({
   componentId: "ccl__sc-1vnxmc8-2"
 })(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-", ");overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], (p) => p.$isText3 ? "text3" : "text2");
-var DropdownButtonIcon = (0, import_styled_components7.default)(Icon_default).withConfig({
+var DropdownButtonIcon = (0, import_styled_components5.default)(Icon_default).withConfig({
   componentId: "ccl__sc-1vnxmc8-3"
 })(["color:var(--charcoal-text2);"]);
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_styled_components9 = __toESM(require("styled-components"));
+var import_styled_components7 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/ListItem/index.tsx
-var import_styled_components8 = __toESM(require("styled-components"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_styled_components6 = __toESM(require("styled-components"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ListItem(props) {
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ItemDiv, { ...rest, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ItemDiv, { ...rest, children: props.children }) });
 }
-var StyledLi = import_styled_components8.default.li.withConfig({
+var StyledLi = import_styled_components6.default.li.withConfig({
   componentId: "ccl__sc-p1vs75-0"
 })(["list-style:none;"]);
-var ItemDiv = import_styled_components8.default.div.withConfig({
+var ItemDiv = import_styled_components6.default.div.withConfig({
   componentId: "ccl__sc-p1vs75-1"
 })(["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_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1103,12 +1073,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = (0, import_react23.useContext)(MenuListContext);
-  const setContextValue = (0, import_react23.useCallback)(() => {
+  } = (0, import_react24.useContext)(MenuListContext);
+  const setContextValue = (0, import_react24.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react23.useCallback)((e) => {
+  const handleKeyDown = (0, import_react24.useCallback)((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1143,7 +1113,7 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function MenuItem(props) {
   const {
     children,
@@ -1151,81 +1121,81 @@ function MenuItem(props) {
     ...rest
   } = props;
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ListItem, { ...rest, as, "data-key": props.value, onKeyDown: handleKeyDown, onClick: props.disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": props.disabled, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ListItem, { ...rest, as, "data-key": props.value, onKeyDown: handleKeyDown, onClick: props.disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": props.disabled, children: props.children });
 }
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_react24 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = (0, import_react24.useContext)(MenuListContext);
+  } = (0, import_react25.useContext)(MenuListContext);
   const isSelected = props.value === ctxValue;
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(MenuItem, { ...rest, children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2ColorIcon, { name: "16/Check" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledSpan, { isSelected, children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MenuItem, { ...rest, children: [
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2ColorIcon, { name: "16/Check" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledSpan, { isSelected, children: props.children })
   ] });
 }
-var StyledSpan = import_styled_components9.default.span.withConfig({
+var StyledSpan = import_styled_components7.default.span.withConfig({
   componentId: "ccl__sc-108wg2j-0"
 })(["font-size:14px;line-height:22px;color:var(--charcoal-text2);padding:9px 0;display:flex;align-items:center;width:100%;margin-left:", "px;"], ({
   isSelected
 }) => isSelected === true ? 0 : 20);
-var Text2ColorIcon = (0, import_styled_components9.default)(Icon_default).withConfig({
+var Text2ColorIcon = (0, import_styled_components7.default)(Icon_default).withConfig({
   componentId: "ccl__sc-108wg2j-1"
 })(["color:var(--charcoal-text2);padding-right:4px;"]);
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-var import_styled_components10 = __toESM(require("styled-components"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_styled_components8 = __toESM(require("styled-components"));
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function MenuItemGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(StyledLi2, { role: "presentation", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TextSpan, { children: props.text }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledUl2, { role: "group", children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledLi2, { role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TextSpan, { children: props.text }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledUl2, { role: "group", children: props.children })
   ] });
 }
-var TextSpan = import_styled_components10.default.span.withConfig({
+var TextSpan = import_styled_components8.default.span.withConfig({
   componentId: "ccl__sc-1ubjfz7-0"
 })(["display:block;color:var(--charcoal-text3);font-size:12px;font-weight:bold;padding:12px 0 8px 16px;"]);
-var StyledUl2 = import_styled_components10.default.ul.withConfig({
+var StyledUl2 = import_styled_components8.default.ul.withConfig({
   componentId: "ccl__sc-1ubjfz7-1"
 })(["padding-left:0;margin:0;box-sizing:border-box;list-style:none;overflow:hidden;"]);
-var StyledLi2 = import_styled_components10.default.li.withConfig({
+var StyledLi2 = import_styled_components8.default.li.withConfig({
   componentId: "ccl__sc-1ubjfz7-2"
 })(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_radio = require("@react-stately/radio");
 var import_radio2 = require("@react-aria/radio");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react25 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var RadioContext = (0, import_react25.createContext)(null);
+var import_react26 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var RadioContext = (0, import_react26.createContext)(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react25.useContext)(RadioContext);
+  const state = (0, import_react26.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react26.forwardRef)(function SegmentedControlInner(props, ref) {
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var SegmentedControl = (0, import_react27.forwardRef)(function SegmentedControlInner(props, ref) {
   const className = useClassNames("charcoal-segmented-control", props.className);
-  const ariaRadioGroupProps = (0, import_react26.useMemo)(() => ({
+  const ariaRadioGroupProps = (0, import_react27.useMemo)(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1236,19 +1206,19 @@ var SegmentedControl = (0, import_react26.forwardRef)(function SegmentedControlI
   const {
     radioGroupProps
   } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react26.useMemo)(() => {
+  const segmentedControlItems = (0, import_react27.useMemo)(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
     } : d);
   }, [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)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = (0, import_react26.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react27.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react26.useRef)(null);
-  const ariaRadioProps = (0, import_react26.useMemo)(() => ({
+  const ref = (0, import_react27.useRef)(null);
+  const ariaRadioProps = (0, import_react27.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1258,20 +1228,20 @@ var Segmented = (props) => {
     isDisabled,
     isSelected
   } = (0, import_radio2.useRadio)(ariaRadioProps, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
     props.children
   ] });
 };
 
 // src/components/Checkbox/index.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_utils7 = require("@react-aria/utils");
 
 // src/components/Checkbox/CheckboxInput/index.tsx
-var import_react27 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var CheckboxInput = (0, import_react27.forwardRef)(function CheckboxInput2({
+var import_react28 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var CheckboxInput = (0, import_react28.forwardRef)(function CheckboxInput2({
   onChange,
   checked,
   invalid,
@@ -1279,19 +1249,19 @@ var CheckboxInput = (0, import_react27.forwardRef)(function CheckboxInput2({
   rounded,
   ...props
 }, ref) {
-  const handleChange = (0, import_react27.useCallback)((e) => {
+  const handleChange = (0, import_react28.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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
 });
-var CheckboxInput_default = (0, import_react27.memo)(CheckboxInput);
+var CheckboxInput_default = (0, import_react28.memo)(CheckboxInput);
 
 // src/components/Checkbox/CheckboxWithLabel.tsx
-var import_react28 = __toESM(require("react"));
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var CheckboxWithLabel = import_react28.default.memo(function CheckboxWithLabel2({
+var import_react29 = __toESM(require("react"));
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var CheckboxWithLabel = import_react29.default.memo(function CheckboxWithLabel2({
   className,
   children,
   input,
@@ -1299,15 +1269,15 @@ var CheckboxWithLabel = import_react28.default.memo(function CheckboxWithLabel2(
   disabled
 }) {
   const classNames = useClassNames("charcoal-checkbox__label", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
     input,
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "charcoal-checkbox__label_div", children })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
 
 // src/components/Checkbox/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Checkbox = (0, import_react29.forwardRef)(function Checkbox2({
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Checkbox = (0, import_react30.forwardRef)(function Checkbox2({
   disabled,
   className,
   id,
@@ -1316,19 +1286,19 @@ var Checkbox = (0, import_react29.forwardRef)(function Checkbox2({
 }, ref) {
   const htmlId = (0, import_utils7.useId)(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  const input = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Checkbox_default = (0, import_react29.memo)(Checkbox);
+var Checkbox_default = (0, import_react30.memo)(Checkbox);
 
 // src/components/TagItem/index.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_utils8 = require("@react-aria/utils");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var TagItem = (0, import_react30.forwardRef)(function TagItemInner({
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var TagItem = (0, import_react31.forwardRef)(function TagItemInner({
   as,
   label,
   translatedLabel,
@@ -1343,18 +1313,18 @@ var TagItem = (0, import_react30.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_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: {
+  const Component = (0, import_react31.useMemo)(() => as ?? "button", [as]);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
     "--charcoal-tag-item-bg": bg
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
-      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
+      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
     ] }),
-    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: "16/Remove" })
+    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: "16/Remove" })
   ] });
 });
-var TagItem_default = (0, import_react30.memo)(TagItem);
+var TagItem_default = (0, import_react31.memo)(TagItem);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,