@charcoal-ui/react 3.10.1-beta.1 → 4.0.0-beta.1

package/dist/index.cjs.js

@@ -111,73 +111,37 @@ function CharcoalProvider({
 }
 
 // src/components/Button/index.tsx
-var import_react2 = require("react");
-
-// src/_lib/index.ts
-function unreachable(value) {
-  throw new Error(arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`);
-}
-function mergeRefs(...refs) {
-  return (value) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref !== null) {
-        ;
-        ref.current = value;
-      }
-    }
-  };
-}
-function countCodePointsInString(string) {
-  return Array.from(string).length;
-}
-
-// src/components/Button/lib/variantToFont.tsx
-function variantToFont(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "text5";
-    case "Default":
-      return "text2";
-    case "Primary":
-      return "text5";
-    case "Navigation":
-      return "text5";
-    case "Danger":
-      return "text5";
-    default:
-      return unreachable(variant);
-  }
-}
+var import_react3 = require("react");
 
-// src/components/Button/lib/variantToBackground.tsx
-function variantToBackground(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "surface4";
-    case "Default":
-      return "surface3";
-    case "Primary":
-      return "brand";
-    case "Navigation":
-      return "surface6";
-    case "Danger":
-      return "assertive";
-    default:
-      return unreachable(variant);
-  }
+// src/_lib/useClassNames.ts
+var import_react2 = require("react");
+function useClassNames(defaultClassName, propsClassName) {
+  return (0, import_react2.useMemo)(() => [defaultClassName, propsClassName].filter((v) => v).join(" "), [defaultClassName, propsClassName]);
 }
 
-// src/components/Button/StyledButton.tsx
-var import_styled_components3 = __toESM(require("styled-components"));
+// src/components/Button/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Button = (0, import_react3.forwardRef)(function Button2({
+  variant,
+  fullWidth,
+  size,
+  className,
+  as,
+  isActive,
+  ...props
+}, ref) {
+  const Component = (0, import_react3.useMemo)(() => as ?? "button", [as]);
+  const classNames = useClassNames("charcoal-button", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
+});
+var Button_default = Button;
 
 // src/components/Clickable/index.tsx
-var React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_utils = require("@charcoal-ui/utils");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Clickable = React2.forwardRef(function Clickable2(props, ref) {
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Clickable = React3.forwardRef(function Clickable2(props, ref) {
   const {
     Link
   } = useComponentAbstraction();
@@ -192,46 +156,19 @@ var Clickable = React2.forwardRef(function Clickable2(props, ref) {
     } = props;
     rest = _rest;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledClickableDiv, { ...rest, ref, as, "aria-disabled": ariaDisabled });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledClickableDiv, { ...rest, ref, as, "aria-disabled": ariaDisabled });
 });
 var Clickable_default = Clickable;
 var StyledClickableDiv = import_styled_components2.default.div.withConfig({
   componentId: "ccl__sc-1lxyknw-0"
 })(["cursor:pointer;", "{cursor:default;}appearance:none;background:transparent;padding:0;border-style:none;outline:none;color:inherit;text-rendering:inherit;letter-spacing:inherit;word-spacing:inherit;text-decoration:none;&:focus{outline:none;}font:inherit;margin:0;overflow:visible;text-transform:none;&::-moz-focus-inner{border-style:none;padding:0;}"], import_utils.disabledSelector);
 
-// src/components/Button/StyledButton.tsx
-var import_styled2 = require("@charcoal-ui/styled");
-var horizontalPaddingSmall = (0, import_styled_components3.css)(["padding-right:16px;padding-left:16px;"]);
-var horizontalPaddingMedium = (0, import_styled_components3.css)(["padding-right:24px;padding-left:24px;"]);
-var StyledButton = (0, import_styled_components3.default)(Clickable_default).withConfig({
-  componentId: "ccl__sc-19qkngs-0"
-})(["width:", ";display:inline-grid;align-items:center;justify-content:center;cursor:pointer;user-select:none;white-space:nowrap;border-radius:999999px;font-size:14px;line-height:22px;font-weight:bold;", " color:var(--charcoal-", ");background-color:var(--charcoal-", ");transition:0.2s color,0.2s background-color,0.2s box-shadow;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " ", "}&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;}height:", "px;"], (p) => p.$fullWidth ? "stretch" : "min-content", (p) => p.$size === "M" ? horizontalPaddingMedium : horizontalPaddingSmall, (p) => p.$color, (p) => p.$background, import_styled2.focusVisibleFocusRingCss, ({
-  $isActive: $active,
-  $color,
-  $background
-}) => $active ? (0, import_styled_components3.css)(["color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);"], $color, $background) : (0, import_styled_components3.css)(["&:hover{color:var(--charcoal-", "-hover);background-color:var(--charcoal-", "-hover);}&:active{color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);}"], $color, $background, $color, $background), (p) => p.$size === "M" ? 40 : 32);
-
-// src/components/Button/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Button = (0, import_react2.forwardRef)(function Button2({
-  children,
-  variant = "Default",
-  size = "M",
-  fullWidth: fixed = false,
-  disabled = false,
-  isActive = false,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledButton, { ...rest, disabled, $background: variantToBackground(variant), $color: variantToFont(variant), $size: size, $fullWidth: fixed, $isActive: isActive, ref, children });
-});
-var Button_default = Button;
-
 // src/components/IconButton/index.tsx
-var import_react3 = require("react");
-var import_styled_components4 = __toESM(require("styled-components"));
-var import_styled3 = require("@charcoal-ui/styled");
+var import_react4 = require("react");
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_styled2 = 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,
@@ -242,7 +179,7 @@ var IconButton = (0, import_react3.forwardRef)(function IconButtonInner({
   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 }) });
 });
 var IconButton_default = IconButton;
-var StyledIconButton = (0, import_styled_components4.default)(Clickable_default).attrs(styledProps).withConfig({
+var StyledIconButton = (0, import_styled_components3.default)(Clickable_default).attrs(styledProps).withConfig({
   componentId: "ccl__sc-zssehl-0"
 })(["user-select:none;width:", "px;height:", "px;display:flex;align-items:center;justify-content:center;color:var(", ");background-color:var(", ");border-radius:999999px;transition:0.2s background-color,0.2s box-shadow;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " ", "}&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;}"], (p) => p.$width, (p) => p.$height, ({
   $font
@@ -252,7 +189,7 @@ var StyledIconButton = (0, import_styled_components4.default)(Clickable_default)
   $isActive,
   $background,
   $font
-}) => $isActive ? (0, import_styled_components4.css)(["color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);"], $font, $background) : (0, import_styled_components4.css)(["&:hover{color:var(--charcoal-", "-hover);background-color:var(--charcoal-", "-hover);}&:active{color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);}"], $font, $background, $font, $background), import_styled3.focusVisibleFocusRingCss);
+}) => $isActive ? (0, import_styled_components3.css)(["color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);"], $font, $background) : (0, import_styled_components3.css)(["&:hover{color:var(--charcoal-", "-hover);background-color:var(--charcoal-", "-hover);}&:active{color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);}"], $font, $background, $font, $background), import_styled2.focusVisibleFocusRingCss);
 function styledProps({
   $size,
   $variant
@@ -317,13 +254,13 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-var import_react4 = require("react");
-var React3 = __toESM(require("react"));
-var import_styled_components5 = __toESM(require("styled-components"));
+var import_react5 = require("react");
+var React4 = __toESM(require("react"));
+var import_styled_components4 = __toESM(require("styled-components"));
 var import_warning = __toESM(require("warning"));
-var import_styled4 = require("@charcoal-ui/styled");
+var import_styled3 = 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 +273,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 +281,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,22 +289,22 @@ 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 RadioRoot = import_styled_components5.default.label.withConfig({
+var Radio_default = (0, import_react5.memo)(Radio);
+var RadioRoot = import_styled_components4.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;}"]);
-var RadioInput = import_styled_components5.default.input.attrs({
+var RadioInput = import_styled_components4.default.input.attrs({
   type: "radio"
 }).withConfig({
   componentId: "ccl__sc-1hitkzn-1"
-})(["&[type='radio']{appearance:none;display:block;box-sizing:border-box;margin:0;padding:6px;width:20px;height:20px;cursor:pointer;border-radius:999999px;background-color:var(--charcoal-surface1);transition:0.2s background-color,0.2s box-shadow;:disabled{cursor:default;}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-surface1-hover);}&:active{background-color:var(--charcoal-surface1-press);}", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);&:focus{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text3);}&:checked{background-color:var(--charcoal-brand);&::after{content:'';display:block;width:8px;height:8px;pointer-events:none;background-color:var(--charcoal-text5);border-radius:999999px;transition:0.2s background-color,0.2s box-shadow;}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);&::after{background-color:var(--charcoal-text5-hover);}}&:active{background-color:var(--charcoal-brand-press);&::after{background-color:var(--charcoal-text5-press);}}}}}"], import_styled4.focusVisibleFocusRingCss);
-var RadioLabel = import_styled_components5.default.div.withConfig({
+})(["&[type='radio']{appearance:none;display:block;box-sizing:border-box;margin:0;padding:6px;width:20px;height:20px;cursor:pointer;border-radius:999999px;background-color:var(--charcoal-surface1);transition:0.2s background-color,0.2s box-shadow;:disabled{cursor:default;}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-surface1-hover);}&:active{background-color:var(--charcoal-surface1-press);}", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);&:focus{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text3);}&:checked{background-color:var(--charcoal-brand);&::after{content:'';display:block;width:8px;height:8px;pointer-events:none;background-color:var(--charcoal-text5);border-radius:999999px;transition:0.2s background-color,0.2s box-shadow;}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);&::after{background-color:var(--charcoal-text5-hover);}}&:active{background-color:var(--charcoal-brand-press);&::after{background-color:var(--charcoal-text5-press);}}}}}"], import_styled3.focusVisibleFocusRingCss);
+var RadioLabel = import_styled_components4.default.div.withConfig({
   componentId: "ccl__sc-1hitkzn-2"
 })(["font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text2);&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var StyledRadioGroup = import_styled_components5.default.div.withConfig({
+var StyledRadioGroup = import_styled_components4.default.div.withConfig({
   componentId: "ccl__sc-1hitkzn-3"
 })(["display:grid;grid-template-columns:1fr;grid-gap:8px;"]);
-var RadioGroupContext = React3.createContext({
+var RadioGroupContext = React4.createContext({
   name: void 0,
   selected: void 0,
   disabled: false,
@@ -388,7 +325,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 +339,14 @@ function RadioGroup({
 }
 
 // src/components/MultiSelect/index.tsx
-var import_react6 = require("react");
-var import_styled_components6 = __toESM(require("styled-components"));
+var import_react7 = require("react");
+var import_styled_components5 = __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,
@@ -421,9 +358,9 @@ var MultiSelectGroupContext = (0, import_react5.createContext)({
 });
 
 // src/components/MultiSelect/index.tsx
-var import_styled5 = require("@charcoal-ui/styled");
+var import_styled4 = require("@charcoal-ui/styled");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react6.forwardRef)(function MultiSelectInner({
+var MultiSelect = (0, import_react7.forwardRef)(function MultiSelectInner({
   value,
   disabled = false,
   onChange,
@@ -438,14 +375,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;
     }
@@ -469,33 +406,33 @@ var MultiSelect = (0, import_react6.forwardRef)(function MultiSelectInner({
     Boolean(children) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSelectLabel, { children })
   ] });
 });
-var MultiSelect_default = (0, import_react6.memo)(MultiSelect);
-var MultiSelectRoot = import_styled_components6.default.label.withConfig({
+var MultiSelect_default = (0, import_react7.memo)(MultiSelect);
+var MultiSelectRoot = import_styled_components5.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;}"], ({
   theme
 }) => (0, import_utils2.px)(theme.spacing[4]));
-var MultiSelectLabel = import_styled_components6.default.div.withConfig({
+var MultiSelectLabel = import_styled_components5.default.div.withConfig({
   componentId: "ccl__sc-wpr5y9-1"
 })(["display:flex;align-items:center;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text2);&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var MultiSelectInput = import_styled_components6.default.input.attrs({
+var MultiSelectInput = import_styled_components5.default.input.attrs({
   type: "checkbox"
 }).withConfig({
   componentId: "ccl__sc-wpr5y9-2"
-})(["&[type='checkbox']{appearance:none;display:block;width:20px;height:20px;margin:0;background-color:var(--charcoal-text3);border-radius:999999px;transition:0.2s background-color,0.2s box-shadow;&:checked{background-color:var(--charcoal-brand);&:hover{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-brand-hover);}}&:active{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-brand-press);}}}&:hover{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-text3-hover);}}&:active{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-text3-press);}}", " ", " ", "}"], import_styled5.focusVisibleFocusRingCss, ({
+})(["&[type='checkbox']{appearance:none;display:block;width:20px;height:20px;margin:0;background-color:var(--charcoal-text3);border-radius:999999px;transition:0.2s background-color,0.2s box-shadow;&:checked{background-color:var(--charcoal-brand);&:hover{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-brand-hover);}}&:active{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-brand-press);}}}&:hover{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-text3-hover);}}&:active{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-text3-press);}}", " ", " ", "}"], import_styled4.focusVisibleFocusRingCss, ({
   invalid,
   overlay
-}) => invalid && !overlay && (0, import_styled_components6.css)(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]), ({
+}) => invalid && !overlay && (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);}"]), ({
   overlay
-}) => overlay && (0, import_styled_components6.css)(["background-color:var(--charcoal-surface4);"]));
-var MultiSelectInputOverlay = import_styled_components6.default.div.withConfig({
+}) => overlay && (0, import_styled_components5.css)(["background-color:var(--charcoal-surface4);"]));
+var MultiSelectInputOverlay = import_styled_components5.default.div.withConfig({
   componentId: "ccl__sc-wpr5y9-3"
 })(["position:absolute;top:-2px;left:-2px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999999px;color:var(--charcoal-text5);transition:0.2s box-shadow;", " ", ""], ({
   invalid,
   overlay
-}) => invalid && overlay && (0, import_styled_components6.css)(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]), ({
+}) => invalid && overlay && (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);}"]), ({
   overlay
-}) => overlay && (0, import_styled_components6.css)(["border-color:var(--charcoal-text5);border-width:2px;border-style:solid;"]));
+}) => overlay && (0, import_styled_components5.css)(["border-color:var(--charcoal-text5);border-width:2px;border-style:solid;"]));
 function MultiSelectGroup({
   className,
   name,
@@ -507,7 +444,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) {
@@ -531,18 +468,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_styled_components6 = __toESM(require("styled-components"));
 var import_utils3 = require("@react-aria/utils");
-var import_styled6 = require("@charcoal-ui/styled");
+var import_styled5 = require("@charcoal-ui/styled");
 var import_jsx_runtime8 = 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,
@@ -562,31 +499,31 @@ var SwitchCheckbox = (0, import_react7.forwardRef)(function SwitchCheckboxInner(
     "children" in props ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LabelInner, { children: props.children }) : void 0
   ] });
 });
-var Switch_default = (0, import_react7.memo)(SwitchCheckbox);
-var Label = import_styled_components7.default.label.withConfig({
+var Switch_default = (0, import_react8.memo)(SwitchCheckbox);
+var Label = import_styled_components6.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;}"]);
-var LabelInner = import_styled_components7.default.div.withConfig({
+var LabelInner = import_styled_components6.default.div.withConfig({
   componentId: "ccl__sc-1wy6z5h-1"
 })(["font-size:14px;line-height:22px;color:var(--charcoal-text2);margin-left:4px;"]);
-var SwitchInput = import_styled_components7.default.input.attrs({
+var SwitchInput = import_styled_components6.default.input.attrs({
   type: "checkbox"
 }).withConfig({
   componentId: "ccl__sc-1wy6z5h-2"
-})(["appearance:none;display:inline-flex;position:relative;box-sizing:border-box;width:28px;border:2px solid transparent;transition-property:background-color,box-shadow;transition-duration:0.2s;cursor:inherit;outline:none;border-radius:16px;height:16px;margin:0;background-color:var(--charcoal-text4);:hover{background-color:var(--charcoal-text4-hover);}:active{background-color:var(--charcoal-text4-press);}", " &::after{content:'';position:absolute;display:block;top:0;left:0;width:12px;height:12px;transform:translateX(0);transition:transform 0.2s;border-radius:1024px;background-color:var(--charcoal-text5);:hover{background-color:var(--charcoal-text5-hover);}:active{background-color:var(--charcoal-text5-press);}}&:checked{background-color:var(--charcoal-brand);:hover{background-color:var(--charcoal-brand-hover);}:active{background-color:var(--charcoal-brand-press);}&::after{transform:translateX(12px);transition:transform 0.2s;}}"], import_styled6.focusVisibleFocusRingCss);
+})(["appearance:none;display:inline-flex;position:relative;box-sizing:border-box;width:28px;border:2px solid transparent;transition-property:background-color,box-shadow;transition-duration:0.2s;cursor:inherit;outline:none;border-radius:16px;height:16px;margin:0;background-color:var(--charcoal-text4);:hover{background-color:var(--charcoal-text4-hover);}:active{background-color:var(--charcoal-text4-press);}", " &::after{content:'';position:absolute;display:block;top:0;left:0;width:12px;height:12px;transform:translateX(0);transition:transform 0.2s;border-radius:1024px;background-color:var(--charcoal-text5);:hover{background-color:var(--charcoal-text5-hover);}:active{background-color:var(--charcoal-text5-press);}}&:checked{background-color:var(--charcoal-brand);:hover{background-color:var(--charcoal-brand-hover);}:active{background-color:var(--charcoal-brand-press);}&::after{transform:translateX(12px);transition:transform 0.2s;}}"], import_styled5.focusVisibleFocusRingCss);
 
 // 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 React5 = __toESM(require("react"));
-var import_styled_components9 = __toESM(require("styled-components"));
+var import_react10 = require("react");
+var React6 = __toESM(require("react"));
+var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/components/FieldLabel/index.tsx
-var React4 = __toESM(require("react"));
-var import_styled_components8 = __toESM(require("styled-components"));
+var React5 = __toESM(require("react"));
+var import_styled_components7 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var FieldLabel = React4.forwardRef(function FieldLabel2({
+var FieldLabel = React5.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -602,23 +539,43 @@ var FieldLabel = React4.forwardRef(function FieldLabel2({
   ] });
 });
 var FieldLabel_default = FieldLabel;
-var Label2 = import_styled_components8.default.label.withConfig({
+var Label2 = import_styled_components7.default.label.withConfig({
   componentId: "ccl__sc-1iotshb-0"
 })(["font-size:14px;line-height:22px;font-weight:bold;display:flow-root;color:var(--charcoal-text1);&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var RequiredText = import_styled_components8.default.span.withConfig({
+var RequiredText = import_styled_components7.default.span.withConfig({
   componentId: "ccl__sc-1iotshb-1"
 })(["font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text2);&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var SubLabelClickable = import_styled_components8.default.div.withConfig({
+var SubLabelClickable = import_styled_components7.default.div.withConfig({
   componentId: "ccl__sc-1iotshb-2"
 })(["font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text3);transition:0.2s color,0.2s box-shadow;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{color:var(--charcoal-text3-hover);}&:active{color:var(--charcoal-text3-press);}&:active,&:focus,&:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,150,250,0.32);}}"]);
-var FieldLabelWrapper = import_styled_components8.default.div.withConfig({
+var FieldLabelWrapper = import_styled_components7.default.div.withConfig({
   componentId: "ccl__sc-1iotshb-3"
 })(["display:inline-flex;align-items:center;> ", "{margin-left:4px;}> ", "{margin-left:auto;}"], RequiredText, SubLabelClickable);
 
+// src/_lib/index.ts
+function unreachable(value) {
+  throw new Error(arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`);
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== null) {
+        ;
+        ref.current = value;
+      }
+    }
+  };
+}
+function countCodePointsInString(string) {
+  return Array.from(string).length;
+}
+
 // 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) => {
@@ -637,7 +594,7 @@ function useFocusWithClick(containerRef, inputRef) {
 // src/components/TextField/index.tsx
 var import_utils4 = require("@react-aria/utils");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var TextField = React5.forwardRef(function SingleLineTextFieldInner({
+var TextField = React6.forwardRef(function SingleLineTextFieldInner({
   onChange,
   ...props
 }, forwardRef18) {
@@ -660,10 +617,10 @@ var TextField = React5.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;
@@ -673,7 +630,7 @@ var TextField = React5.forwardRef(function SingleLineTextFieldInner({
     }
     onChange?.(value);
   }, [maxLength, nonControlled, onChange]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setCount(countCodePointsInString(props.value ?? ""));
   }, [props.value]);
   const {
@@ -691,7 +648,7 @@ var TextField = React5.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_runtime10.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
@@ -708,41 +665,41 @@ var TextField = React5.forwardRef(function SingleLineTextFieldInner({
   ] });
 });
 var TextField_default = TextField;
-var TextFieldRoot = import_styled_components9.default.div.withConfig({
+var TextFieldRoot = import_styled_components8.default.div.withConfig({
   componentId: "ccl__sc-3dd0tt-0"
 })(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
   opacity: p.theme.elementEffect.disabled.opacity
 });
-var TextFieldLabel = (0, import_styled_components9.default)(FieldLabel_default).withConfig({
+var TextFieldLabel = (0, import_styled_components8.default)(FieldLabel_default).withConfig({
   componentId: "ccl__sc-3dd0tt-1"
 })(["margin-bottom:8px;"]);
-var StyledInputContainer = import_styled_components9.default.div.withConfig({
+var StyledInputContainer = import_styled_components8.default.div.withConfig({
   componentId: "ccl__sc-3dd0tt-2"
-})(["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_components9.css)(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
-var PrefixContainer = import_styled_components9.default.div.withConfig({
+})(["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_components8.css)(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
+var PrefixContainer = import_styled_components8.default.div.withConfig({
   componentId: "ccl__sc-3dd0tt-3"
 })(["display:flex;align-items:center;"]);
-var SuffixContainer = import_styled_components9.default.span.withConfig({
+var SuffixContainer = import_styled_components8.default.span.withConfig({
   componentId: "ccl__sc-3dd0tt-4"
 })(["display:flex;align-items:center;gap:8px;"]);
-var StyledInput = import_styled_components9.default.input.withConfig({
+var StyledInput = import_styled_components8.default.input.withConfig({
   componentId: "ccl__sc-3dd0tt-5"
 })(["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_components9.default.span.withConfig({
+var SingleLineCounter = import_styled_components8.default.span.withConfig({
   componentId: "ccl__sc-3dd0tt-6"
 })(["line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
-var AssistiveText = import_styled_components9.default.p.withConfig({
+var AssistiveText = import_styled_components8.default.p.withConfig({
   componentId: "ccl__sc-3dd0tt-7"
 })(["font-size:14px;line-height:22px;margin-top:4px;margin-bottom:-4px;color:", ";"], (p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`);
 
 // 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_styled_components10 = __toESM(require("styled-components"));
+var import_react11 = require("react");
+var import_styled_components9 = __toESM(require("styled-components"));
 var import_utils5 = require("@react-aria/utils");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var TextArea = (0, import_react10.forwardRef)(function TextAreaInner({
+var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
   onChange,
   ...props
 }, forwardRef18) {
@@ -765,17 +722,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;
@@ -788,7 +745,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 {
@@ -806,12 +763,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_runtime11.jsxs)(TextFieldRoot2, { className, isDisabled: disabled, children: [
@@ -824,31 +781,31 @@ var TextArea = (0, import_react10.forwardRef)(function TextAreaInner({
   ] });
 });
 var TextArea_default = TextArea;
-var TextFieldRoot2 = import_styled_components10.default.div.withConfig({
+var TextFieldRoot2 = import_styled_components9.default.div.withConfig({
   componentId: "ccl__sc-58waht-0"
 })(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
   opacity: p.theme.elementEffect.disabled.opacity
 });
-var StyledTextareaContainer = import_styled_components10.default.div.withConfig({
+var StyledTextareaContainer = import_styled_components9.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_components10.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_components10.css)(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
-var StyledTextarea = import_styled_components10.default.textarea.withConfig({
+}) => (0, import_styled_components9.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_components9.css)(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
+var StyledTextarea = import_styled_components9.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_components10.css)(["height:calc(22px / 0.875 * ", " + ", "px);"], rows, noBottomPadding ? 9 : 20));
-var MultiLineCounter = import_styled_components10.default.span.withConfig({
+}) => (0, import_styled_components9.css)(["height:calc(22px / 0.875 * ", " + ", "px);"], rows, noBottomPadding ? 9 : 20));
+var MultiLineCounter = import_styled_components9.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 React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_icons = require("@charcoal-ui/icons");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Icon = React6.forwardRef(function IconInner({
+var Icon = React7.forwardRef(function IconInner({
   name,
   scale,
   unsafeNonGuidelineScale,
@@ -860,18 +817,18 @@ var Icon = React6.forwardRef(function IconInner({
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-var import_react12 = require("react");
-var React10 = __toESM(require("react"));
+var import_react13 = require("react");
+var React11 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_utils7 = require("@charcoal-ui/utils");
-var import_styled7 = require("@charcoal-ui/styled");
+var import_styled6 = require("@charcoal-ui/styled");
 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_styled_components11 = __toESM(require("styled-components"));
+var import_react12 = require("react");
+var import_styled_components10 = __toESM(require("styled-components"));
 var import_dialog = require("@react-aria/dialog");
 
 // ../foundation/src/grid.ts
@@ -886,10 +843,10 @@ var import_utils6 = require("@charcoal-ui/utils");
 var import_react_spring = require("react-spring");
 
 // src/_lib/useForwardedRef.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 function useForwardedRef(ref) {
-  const innerRef = React7.useRef(null);
-  React7.useEffect(() => {
+  const innerRef = React8.useRef(null);
+  React8.useEffect(() => {
     if (!ref)
       return;
     if (typeof ref === "function") {
@@ -903,7 +860,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
@@ -912,7 +869,7 @@ var Dialog = (0, import_react11.forwardRef)(function Dialog2(props, forwardRef18
   }, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AnimatedStyledDialogDiv, { ...props, role: dialogProps.role, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, ref });
 });
-var AnimatedStyledDialogDiv = (0, import_react_spring.animated)(import_styled_components11.default.div.withConfig({
+var AnimatedStyledDialogDiv = (0, import_react_spring.animated)(import_styled_components10.default.div.withConfig({
   componentId: "ccl__sc-1ep4f6v-0"
 })(["margin:auto;position:relative;height:fit-content;width:", "px;background-color:var(--charcoal-surface1);border-radius:24px;@media ", "{max-width:440px;width:calc(100% - 48px);", "}:focus{outline:none;}"], (p) => {
   switch (p.size) {
@@ -931,14 +888,14 @@ var AnimatedStyledDialogDiv = (0, import_react_spring.animated)(import_styled_co
   }
 }, ({
   theme
-}) => (0, import_utils6.maxWidth)(theme.breakpoint.screen1), (p) => p.bottomSheet !== false && (0, import_styled_components11.css)(["max-width:unset;width:100%;border-radius:0;margin:auto 0 0 0;", ""], p.bottomSheet === "full" && (0, import_styled_components11.css)(["min-height:100%;"]))));
+}) => (0, import_utils6.maxWidth)(theme.breakpoint.screen1), (p) => p.bottomSheet !== false && (0, import_styled_components10.css)(["max-width:unset;width:100%;border-radius:0;margin:auto 0 0 0;", ""], p.bottomSheet === "full" && (0, import_styled_components10.css)(["min-height:100%;"]))));
 
 // src/components/Modal/ModalBackgroundContext.tsx
-var React8 = __toESM(require("react"));
-var ModalBackgroundContext = React8.createContext(null);
+var React9 = __toESM(require("react"));
+var ModalBackgroundContext = React9.createContext(null);
 
 // src/components/Modal/useCustomModalOverlay.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 function useCharcoalModalOverlay(props, state, ref) {
   const {
@@ -954,7 +911,7 @@ function useCharcoalModalOverlay(props, state, ref) {
     isDisabled: !state.isOpen
   });
   (0, import_overlays2.useOverlayFocusContain)();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (state.isOpen && ref.current) {
       return (0, import_overlays2.ariaHideOutside)([ref.current]);
     }
@@ -968,7 +925,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_react12.forwardRef)(function ModalInner({
+var Modal = (0, import_react13.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -994,8 +951,8 @@ var Modal = (0, import_react12.forwardRef)(function ModalInner({
     onClose,
     isOpen
   }, ref);
-  const theme = (0, import_styled_components12.useTheme)();
-  const isMobile = (0, import_styled7.useMedia)((0, import_utils7.maxWidth)(theme.breakpoint.screen1)) ?? false;
+  const theme = (0, import_styled_components11.useTheme)();
+  const isMobile = (0, import_styled6.useMedia)((0, import_utils7.maxWidth)(theme.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const showDismiss = !isMobile || bottomSheet !== true;
   const transition = (0, import_react_spring2.useTransition)(isOpen, {
@@ -1023,8 +980,8 @@ var Modal = (0, import_react12.forwardRef)(function ModalInner({
       duration: 0
     }
   });
-  const bgRef = React10.useRef(null);
-  const handleClick = React10.useCallback((e) => {
+  const bgRef = React11.useRef(null);
+  const handleClick = React11.useCallback((e) => {
     if (e.currentTarget === e.target) {
       onClose();
     }
@@ -1049,67 +1006,67 @@ var Modal = (0, import_react12.forwardRef)(function ModalInner({
     isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalCrossButton, { size: "S", icon: "24/Close", onClick: onClose })
   ] }) }) }) }) }));
 });
-var Modal_default = (0, import_react12.memo)(Modal);
-var ModalContext = React10.createContext({
+var Modal_default = (0, import_react13.memo)(Modal);
+var ModalContext = React11.createContext({
   titleProps: {},
   title: "",
   close: void 0,
   showDismiss: true,
   bottomSheet: false
 });
-var ModalBackground = (0, import_react_spring2.animated)(import_styled_components12.default.div.withConfig({
+var ModalBackground = (0, import_react_spring2.animated)(import_styled_components11.default.div.withConfig({
   componentId: "ccl__sc-h2bc55-0"
 })(["z-index:", ";overflow:auto;display:flex;position:fixed;top:0;left:0;width:-webkit-fill-available;width:-moz-available;height:100%;justify-content:center;padding:40px 0;box-sizing:border-box;background-color:var(--charcoal-surface4);@media ", "{", "}"], ({
   zIndex
 }) => 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({
+}) => (0, import_utils7.maxWidth)(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && (0, import_styled_components11.css)(["padding:0;"])));
+var ModalCrossButton = (0, import_styled_components11.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_react12.useContext)(ModalContext);
+  } = (0, import_react13.useContext)(ModalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
 }
-var ModalHeading = import_styled_components12.default.h3.withConfig({
+var ModalHeading = import_styled_components11.default.h3.withConfig({
   componentId: "ccl__sc-h2bc55-2"
 })(["margin:0;font-weight:inherit;font-size:inherit;"]);
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_styled_components13 = __toESM(require("styled-components"));
-var import_react13 = require("react");
+var import_styled_components12 = __toESM(require("styled-components"));
+var import_react14 = require("react");
 var import_utils9 = require("@charcoal-ui/utils");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react13.useContext)(ModalContext);
+  const modalCtx = (0, import_react14.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({
+var ModalHeaderRoot = import_styled_components12.default.div.withConfig({
   componentId: "ccl__sc-1k33wze-0"
 })(["height:64px;display:grid;align-content:center;justify-content:center;@media ", "{", "}"], ({
   theme
-}) => (0, import_utils9.maxWidth)(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && (0, import_styled_components13.css)(["height:48px;"]));
-var StyledModalTitle = (0, import_styled_components13.default)(ModalTitle).withConfig({
+}) => (0, import_utils9.maxWidth)(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && (0, import_styled_components12.css)(["height:48px;"]));
+var StyledModalTitle = (0, import_styled_components12.default)(ModalTitle).withConfig({
   componentId: "ccl__sc-1k33wze-1"
 })(["color:var(--charcoal-text1);font-size:16px;line-height:24px;font-weight:bold;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;}"]);
-var ModalAlign = import_styled_components13.default.div.withConfig({
+var ModalAlign = import_styled_components12.default.div.withConfig({
   componentId: "ccl__sc-1k33wze-2"
 })(["padding-left:16px;padding-right:16px;"]);
-var ModalBody = import_styled_components13.default.div.withConfig({
+var ModalBody = import_styled_components12.default.div.withConfig({
   componentId: "ccl__sc-1k33wze-3"
 })(["padding-bottom:40px;"]);
-var ModalButtons = import_styled_components13.default.div.withConfig({
+var ModalButtons = import_styled_components12.default.div.withConfig({
   componentId: "ccl__sc-1k33wze-4"
 })(["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_react14 = require("react");
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_react15 = require("react");
+var import_styled_components13 = __toESM(require("styled-components"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react14.forwardRef)(function LoadingSpinnerInner({
+var LoadingSpinner = (0, import_react15.forwardRef)(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
@@ -1117,25 +1074,25 @@ var LoadingSpinner = (0, import_react14.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_react14.memo)(LoadingSpinner);
-var LoadingSpinnerRoot = import_styled_components14.default.div.attrs({
+var LoadingSpinner_default = (0, import_react15.memo)(LoadingSpinner);
+var LoadingSpinnerRoot = import_styled_components13.default.div.attrs({
   role: "progressbar"
 }).withConfig({
   componentId: "ccl__sc-1id6yz4-0"
 })(["box-sizing:content-box;margin:auto;padding:", "px;border-radius:8px;font-size:", "px;width:", "px;height:", "px;opacity:0.84;color:var(--charcoal-text4);background-color:", ";"], (props) => props.padding, (props) => props.size, (props) => props.size, (props) => props.size, ({
   transparent
 }) => `var(--charcoal-${transparent ? "transparent" : "background1"})`);
-var scaleOut = (0, import_styled_components14.keyframes)(["from{transform:scale(0);opacity:1;}to{transform:scale(1);opacity:0;}"]);
-var Icon2 = import_styled_components14.default.div.attrs({
+var scaleOut = (0, import_styled_components13.keyframes)(["from{transform:scale(0);opacity:1;}to{transform:scale(1);opacity:0;}"]);
+var Icon2 = import_styled_components13.default.div.attrs({
   role: "presentation"
 }).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_react14.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinnerIcon = (0, import_react15.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -1149,22 +1106,22 @@ var LoadingSpinnerIcon = (0, import_react14.forwardRef)(function LoadingSpinnerI
 });
 
 // src/components/DropdownSelector/index.tsx
-var import_react20 = require("react");
-var import_styled_components17 = __toESM(require("styled-components"));
+var import_react21 = require("react");
+var import_styled_components16 = __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_styled_components14 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 function usePreventScroll2(element, isOpen) {
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -1182,7 +1139,7 @@ function usePreventScroll2(element, isOpen) {
 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,
@@ -1198,7 +1155,7 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = (0, import_react16.useContext)(ModalBackgroundContext);
+  const modalBackground = (0, import_react17.useContext)(ModalBackgroundContext);
   usePreventScroll2(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
@@ -1215,7 +1172,7 @@ function Popover(props) {
     ] })
   ] });
 }
-var DropdownPopoverDiv = import_styled_components15.default.div.withConfig({
+var DropdownPopoverDiv = import_styled_components14.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;"]);
 
@@ -1225,13 +1182,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;
@@ -1244,12 +1201,12 @@ function DropdownPopover({
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 function findPreviewRecursive(children, value) {
-  const childArray = React11.Children.toArray(children);
+  const childArray = React12.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React11.isValidElement(child)) {
+    if (React12.isValidElement(child)) {
       if ("value" in child.props) {
         const childValue = child.props.value;
         if (childValue === value && "children" in child.props) {
@@ -1268,12 +1225,12 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react19 = require("react");
-var import_styled_components16 = __toESM(require("styled-components"));
+var import_react20 = require("react");
+var import_styled_components15 = __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: [],
@@ -1282,13 +1239,13 @@ var MenuListContext = (0, import_react18.createContext)({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 function getValuesRecursive(children) {
-  const childArray = React12.Children.toArray(children);
+  const childArray = React13.Children.toArray(children);
   const propsArray = [];
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React12.isValidElement(child)) {
+    if (React13.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
         propsArray.push({
@@ -1307,8 +1264,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,
@@ -1318,20 +1275,20 @@ function MenuList(props) {
     }
   }, children: props.children }) });
 }
-var StyledUl = import_styled_components16.default.ul.withConfig({
+var StyledUl = import_styled_components15.default.ul.withConfig({
   componentId: "ccl__sc-1y72v02-0"
 })(["padding:0;margin:0;"]);
 
 // src/components/DropdownSelector/index.tsx
-var import_styled8 = require("@charcoal-ui/styled");
+var import_styled7 = require("@charcoal-ui/styled");
 var import_visually_hidden3 = require("@react-aria/visually-hidden");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector(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
@@ -1356,36 +1313,36 @@ function DropdownSelector(props) {
     props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = import_styled_components17.default.div.withConfig({
+var DropdownSelectorRoot = import_styled_components16.default.div.withConfig({
   componentId: "ccl__sc-1vnxmc8-0"
 })(["display:inline-block;width:100%;", "{cursor:default;opacity:0.32;}"], import_utils10.disabledSelector);
-var DropdownFieldLabel = (0, import_styled_components17.default)(FieldLabel_default).withConfig({
+var DropdownFieldLabel = (0, import_styled_components16.default)(FieldLabel_default).withConfig({
   componentId: "ccl__sc-1vnxmc8-1"
 })(["width:100%;margin-bottom:8px;"]);
-var DropdownButton = import_styled_components17.default.button.withConfig({
+var DropdownButton = import_styled_components16.default.button.withConfig({
   componentId: "ccl__sc-1vnxmc8-2"
-})(["display:flex;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_utils10.disabledSelector, import_styled8.focusVisibleFocusRingCss, ({
+})(["display:flex;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_utils10.disabledSelector, import_styled7.focusVisibleFocusRingCss, ({
   $active
-}) => $active === true ? (0, import_styled_components17.css)(["background-color:var(--charcoal-surface3-press);"]) : (0, import_styled_components17.css)(["&:hover{background-color:var(--charcoal-surface3-hover);}&:active{background-color:var(--charcoal-surface3-press);}"]), ({
+}) => $active === true ? (0, import_styled_components16.css)(["background-color:var(--charcoal-surface3-press);"]) : (0, import_styled_components16.css)(["&:hover{background-color:var(--charcoal-surface3-hover);}&:active{background-color:var(--charcoal-surface3-press);}"]), ({
   invalid
-}) => invalid === true && (0, import_styled_components17.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_components17.default.span.withConfig({
+}) => invalid === true && (0, import_styled_components16.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_components16.default.span.withConfig({
   componentId: "ccl__sc-1vnxmc8-3"
 })(["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_components17.default)(Icon_default).withConfig({
+var DropdownButtonIcon = (0, import_styled_components16.default)(Icon_default).withConfig({
   componentId: "ccl__sc-1vnxmc8-4"
 })(["color:var(--charcoal-text2);"]);
-var AssertiveText = import_styled_components17.default.div.withConfig({
+var AssertiveText = import_styled_components16.default.div.withConfig({
   componentId: "ccl__sc-1vnxmc8-5"
 })(["margin-top:8px;font-size:14px;color:var(--charcoal-text2);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;}", ""], ({
   invalid
-}) => invalid === true && (0, import_styled_components17.css)(["color:var(--charcoal-assertive);"]));
+}) => invalid === true && (0, import_styled_components16.css)(["color:var(--charcoal-assertive);"]));
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_styled_components19 = __toESM(require("styled-components"));
+var import_styled_components18 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/ListItem/index.tsx
-var import_styled_components18 = __toESM(require("styled-components"));
+var import_styled_components17 = __toESM(require("styled-components"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function ListItem(props) {
   const {
@@ -1394,15 +1351,15 @@ function ListItem(props) {
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemDiv, { ...rest, children: props.children }) });
 }
-var StyledLi = import_styled_components18.default.li.withConfig({
+var StyledLi = import_styled_components17.default.li.withConfig({
   componentId: "ccl__sc-p1vs75-0"
 })(["list-style:none;"]);
-var ItemDiv = import_styled_components18.default.div.withConfig({
+var ItemDiv = import_styled_components17.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_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1439,12 +1396,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") {
@@ -1491,12 +1448,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,
@@ -1507,17 +1464,17 @@ function DropdownMenuItem(props) {
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledSpan, { isSelected, children: props.children })
   ] });
 }
-var StyledSpan = import_styled_components19.default.span.withConfig({
+var StyledSpan = import_styled_components18.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_components19.default)(Icon_default).withConfig({
+var Text2ColorIcon = (0, import_styled_components18.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_components20 = __toESM(require("styled-components"));
+var import_styled_components19 = __toESM(require("styled-components"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function MenuItemGroup(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(StyledLi2, { role: "presentation", children: [
@@ -1525,21 +1482,21 @@ function MenuItemGroup(props) {
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledUl2, { role: "group", children: props.children })
   ] });
 }
-var TextSpan = import_styled_components20.default.span.withConfig({
+var TextSpan = import_styled_components19.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_components20.default.ul.withConfig({
+var StyledUl2 = import_styled_components19.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_components20.default.li.withConfig({
+var StyledLi2 = import_styled_components19.default.li.withConfig({
   componentId: "ccl__sc-1ubjfz7-2"
 })(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // ../../node_modules/@react-stately/form/dist/import.mjs
-var import_react23 = require("react");
+var import_react24 = require("react");
 var $e5be200c675c3b3a$export$aca958c65c314e6c = {
   badInput: false,
   customError: false,
@@ -1563,7 +1520,7 @@ var $e5be200c675c3b3a$export$dad6ae84456c676a = {
   validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
   validationErrors: []
 };
-var $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, import_react23.createContext)({});
+var $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, import_react24.createContext)({});
 var $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
 function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
   if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
@@ -1601,25 +1558,25 @@ function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
     validationErrors: [],
     validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
   } : null;
-  let clientError = (0, import_react23.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [validate, value]);
+  let clientError = (0, import_react24.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [validate, value]);
   if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid)
     builtinValidation = null;
-  let serverErrors = (0, import_react23.useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
-  let serverErrorMessages = (0, import_react23.useMemo)(() => {
+  let serverErrors = (0, import_react24.useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
+  let serverErrorMessages = (0, import_react24.useMemo)(() => {
     if (name)
       return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
     return [];
   }, [serverErrors, name]);
-  let [lastServerErrors, setLastServerErrors] = (0, import_react23.useState)(serverErrors);
-  let [isServerErrorCleared, setServerErrorCleared] = (0, import_react23.useState)(false);
+  let [lastServerErrors, setLastServerErrors] = (0, import_react24.useState)(serverErrors);
+  let [isServerErrorCleared, setServerErrorCleared] = (0, import_react24.useState)(false);
   if (serverErrors !== lastServerErrors) {
     setLastServerErrors(serverErrors);
     setServerErrorCleared(false);
   }
-  let serverError = (0, import_react23.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
-  let nextValidation = (0, import_react23.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let [currentValidity, setCurrentValidity] = (0, import_react23.useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let lastError = (0, import_react23.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let serverError = (0, import_react24.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
+  let nextValidation = (0, import_react24.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let [currentValidity, setCurrentValidity] = (0, import_react24.useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let lastError = (0, import_react24.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
   let commitValidation = () => {
     if (!commitQueued)
       return;
@@ -1630,8 +1587,8 @@ function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
       setCurrentValidity(error);
     }
   };
-  let [commitQueued, setCommitQueued] = (0, import_react23.useState)(false);
-  (0, import_react23.useEffect)(commitValidation);
+  let [commitQueued, setCommitQueued] = (0, import_react24.useState)(false);
+  (0, import_react24.useEffect)(commitValidation);
   let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
   let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
   return {
@@ -1687,19 +1644,19 @@ function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
 }
 
 // ../../node_modules/@react-stately/utils/dist/import.mjs
-var import_react24 = require("react");
+var import_react25 = require("react");
 function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (0, import_react24.useState)(value || defaultValue);
-  let isControlledRef = (0, import_react24.useRef)(value !== void 0);
+  let [stateValue, setStateValue] = (0, import_react25.useState)(value || defaultValue);
+  let isControlledRef = (0, import_react25.useRef)(value !== void 0);
   let isControlled = value !== void 0;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     let wasControlled = isControlledRef.current;
     if (wasControlled !== isControlled)
       console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
     isControlledRef.current = isControlled;
   }, [isControlled]);
   let currentValue = isControlled ? value : stateValue;
-  let setValue = (0, import_react24.useCallback)((value2, ...args) => {
+  let setValue = (0, import_react25.useCallback)((value2, ...args) => {
     let onChangeCaller = (value3, ...onChangeArgs) => {
       if (onChange) {
         if (!Object.is(currentValue, value3))
@@ -1728,14 +1685,14 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
 }
 
 // ../../node_modules/@react-stately/radio/dist/import.mjs
-var import_react25 = require("react");
+var import_react26 = require("react");
 var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
 var $a54cdc5c1942b639$var$i = 0;
 function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
-  let name = (0, import_react25.useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [props.name]);
+  let name = (0, import_react26.useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [props.name]);
   var _props_defaultValue;
   let [selectedValue, setSelected] = (0, $458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
-  let [lastFocusedValue, setLastFocusedValue] = (0, import_react25.useState)(null);
+  let [lastFocusedValue, setLastFocusedValue] = (0, import_react26.useState)(null);
   let validation = (0, $e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
     ...props,
     value: selectedValue
@@ -1764,12 +1721,12 @@ function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
 
 // src/components/SegmentedControl/index.tsx
 var import_radio2 = require("@react-aria/radio");
-var import_styled_components21 = __toESM(require("styled-components"));
+var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioContext = (0, import_react26.createContext)(null);
+var RadioContext = (0, import_react27.createContext)(null);
 var RadioProvider = ({
   value,
   children
@@ -1777,7 +1734,7 @@ var RadioProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react26.useContext)(RadioContext);
+  const state = (0, import_react27.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
@@ -1785,8 +1742,8 @@ var useRadioContext = () => {
 
 // src/components/SegmentedControl/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react27.forwardRef)(function SegmentedControlInner(props, ref) {
-  const ariaRadioGroupProps = (0, import_react27.useMemo)(() => ({
+var SegmentedControl = (0, import_react28.forwardRef)(function SegmentedControlInner(props, ref) {
+  const ariaRadioGroupProps = (0, import_react28.useMemo)(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1797,7 +1754,7 @@ var SegmentedControl = (0, import_react27.forwardRef)(function SegmentedControlI
   const {
     radioGroupProps
   } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react27.useMemo)(() => {
+  const segmentedControlItems = (0, import_react28.useMemo)(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
@@ -1805,11 +1762,11 @@ var SegmentedControl = (0, import_react27.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_react27.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react28.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react27.useRef)(null);
-  const ariaRadioProps = (0, import_react27.useMemo)(() => ({
+  const ref = (0, import_react28.useRef)(null);
+  const ariaRadioProps = (0, import_react28.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1824,37 +1781,37 @@ var Segmented = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioLabel2, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SegmentedLabelInner, { children: props.children }) })
   ] });
 };
-var SegmentedControlRoot = import_styled_components21.default.div.withConfig({
+var SegmentedControlRoot = import_styled_components20.default.div.withConfig({
   componentId: "ccl__sc-1xmkkqt-0"
 })(["display:inline-flex;align-items:center;background-color:var(--charcoal-surface3);border-radius:16px;"]);
-var SegmentedRoot = import_styled_components21.default.label.withConfig({
+var SegmentedRoot = import_styled_components20.default.label.withConfig({
   componentId: "ccl__sc-1xmkkqt-1"
 })(["position:relative;display:flex;align-items:center;cursor:pointer;height:32px;padding-right:16px;padding-left:16px;border-radius:16px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}color:var(--charcoal-text2);", ""], ({
   checked = false
-}) => checked && (0, import_styled_components21.css)(["background-color:var(--charcoal-brand);color:var(--charcoal-text5);"]));
-var SegmentedInput = import_styled_components21.default.input.withConfig({
+}) => checked && (0, import_styled_components20.css)(["background-color:var(--charcoal-brand);color:var(--charcoal-text5);"]));
+var SegmentedInput = import_styled_components20.default.input.withConfig({
   componentId: "ccl__sc-1xmkkqt-2"
 })(["position:absolute;height:0px;width:0px;padding:0;margin:0;appearance:none;box-sizing:border-box;overflow:hidden;white-space:nowrap;opacity:0;"]);
-var RadioLabel2 = import_styled_components21.default.div.withConfig({
+var RadioLabel2 = import_styled_components20.default.div.withConfig({
   componentId: "ccl__sc-1xmkkqt-3"
 })(["background:transparent;display:flex;align-items:center;height:22px;"]);
-var SegmentedLabelInner = import_styled_components21.default.div.withConfig({
+var SegmentedLabelInner = import_styled_components20.default.div.withConfig({
   componentId: "ccl__sc-1xmkkqt-4"
 })(["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_react28 = require("react");
-var import_styled_components22 = __toESM(require("styled-components"));
+var import_react29 = require("react");
+var import_styled_components21 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
 var import_utils12 = require("@react-aria/utils");
 var import_react_stately2 = require("react-stately");
-var import_styled9 = require("@charcoal-ui/styled");
+var import_styled8 = require("@charcoal-ui/styled");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Checkbox = (0, import_react28.forwardRef)(function CheckboxInner({
+var Checkbox = (0, import_react29.forwardRef)(function CheckboxInner({
   invalid = false,
   ...props
 }, ref) {
-  const ariaCheckboxProps = (0, import_react28.useMemo)(() => ({
+  const ariaCheckboxProps = (0, import_react29.useMemo)(() => ({
     ...props,
     isInValid: invalid,
     isSelected: props.checked,
@@ -1877,39 +1834,39 @@ var Checkbox = (0, import_react28.forwardRef)(function CheckboxInner({
     "children" in props && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InputLabel, { children: props.children })
   ] });
 });
-var Checkbox_default = (0, import_react28.memo)(Checkbox);
-var hiddenCss = (0, import_styled_components22.css)(["visibility:hidden;"]);
-var InputRoot = import_styled_components22.default.label.withConfig({
+var Checkbox_default = (0, import_react29.memo)(Checkbox);
+var hiddenCss = (0, import_styled_components21.css)(["visibility:hidden;"]);
+var InputRoot = import_styled_components21.default.label.withConfig({
   componentId: "ccl__sc-wrdmwj-0"
 })(["position:relative;display:flex;cursor:pointer;gap:4px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}"]);
-var CheckboxRoot = import_styled_components22.default.div.withConfig({
+var CheckboxRoot = import_styled_components21.default.div.withConfig({
   componentId: "ccl__sc-wrdmwj-1"
 })(["position:relative;"]);
-var CheckboxInput = import_styled_components22.default.input.withConfig({
+var CheckboxInput = import_styled_components21.default.input.withConfig({
   componentId: "ccl__sc-wrdmwj-2"
-})(["&[type='checkbox']{appearance:none;display:block;cursor:pointer;margin:0;width:20px;height:20px;border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:disabled{cursor:default;}&:read-only{cursor:default;}&:checked{background-color:var(--charcoal-brand);&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);}&:active{background-color:var(--charcoal-brand-press);}}}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text4);}}"], import_styled9.focusVisibleFocusRingCss);
-var CheckboxInputOverlay = import_styled_components22.default.div.withConfig({
+})(["&[type='checkbox']{appearance:none;display:block;cursor:pointer;margin:0;width:20px;height:20px;border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:disabled{cursor:default;}&:read-only{cursor:default;}&:checked{background-color:var(--charcoal-brand);&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);}&:active{background-color:var(--charcoal-brand-press);}}}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text4);}}"], import_styled8.focusVisibleFocusRingCss);
+var CheckboxInputOverlay = import_styled_components21.default.div.withConfig({
   componentId: "ccl__sc-wrdmwj-3"
 })(["position:absolute;top:-2px;left:-2px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--charcoal-text5);", ";"], ({
   checked
 }) => checked !== true && hiddenCss);
-var InputLabel = import_styled_components22.default.div.withConfig({
+var InputLabel = import_styled_components21.default.div.withConfig({
   componentId: "ccl__sc-wrdmwj-4"
 })(["color:var(--charcoal-text2);font-size:14px;line-height:20px;"]);
 
 // src/components/TagItem/index.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_utils13 = require("@react-aria/utils");
-var import_styled_components23 = __toESM(require("styled-components"));
+var import_styled_components22 = __toESM(require("styled-components"));
 var import_utils14 = require("@charcoal-ui/utils");
 var import_button = require("@react-aria/button");
-var import_styled10 = require("@charcoal-ui/styled");
+var import_styled9 = require("@charcoal-ui/styled");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react29.forwardRef)(function TagItemInner({
+var TagItem = (0, import_react30.forwardRef)(function TagItemInner({
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
@@ -1921,7 +1878,7 @@ var TagItem = (0, import_react29.forwardRef)(function TagItemInner({
   ...props
 }, _ref) {
   const ref = (0, import_utils13.useObjectRef)(_ref);
-  const ariaButtonProps = (0, import_react29.useMemo)(() => ({
+  const ariaButtonProps = (0, import_react30.useMemo)(() => ({
     elementType: "a",
     isDisabled: disabled,
     ...props
@@ -1941,11 +1898,11 @@ var TagItem = (0, import_react29.forwardRef)(function TagItemInner({
     ] })
   ] });
 });
-var TagItem_default = (0, import_react29.memo)(TagItem);
+var TagItem_default = (0, import_react30.memo)(TagItem);
 var horizontalPadding = ({
   left,
   right
-}) => (0, import_styled_components23.css)(["padding-right:", ";padding-left:", ";"], (0, import_utils14.px)(right), (0, import_utils14.px)(left));
+}) => (0, import_styled_components22.css)(["padding-right:", ";padding-left:", ";"], (0, import_utils14.px)(right), (0, import_utils14.px)(left));
 var tagItemRootSize = (size) => {
   switch (size) {
     case "M":
@@ -1964,7 +1921,7 @@ var activeTagItemRoot = horizontalPadding({
   left: 16,
   right: 8
 });
-var TagItemRoot = import_styled_components23.default.a.withConfig({
+var TagItemRoot = import_styled_components22.default.a.withConfig({
   componentId: "ccl__sc-11j9pu2-0"
 })(["isolation:isolate;position:relative;height:", "px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;overflow:hidden;border-radius:4px;", " ", " color:", ";transition:0.2s box-shadow;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", "}&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}"], ({
   size
@@ -1975,30 +1932,30 @@ var TagItemRoot = import_styled_components23.default.a.withConfig({
   status
 }) => status === "active" && activeTagItemRoot, ({
   status
-}) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)", import_styled10.focusVisibleFocusRingCss);
-var Background = import_styled_components23.default.div.withConfig({
+}) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)", import_styled9.focusVisibleFocusRingCss);
+var Background = import_styled_components22.default.div.withConfig({
   componentId: "ccl__sc-11j9pu2-1"
 })(["position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:", ";", " ", ""], ({
   bgColor
 }) => bgColor, ({
   status
-}) => status === "inactive" && (0, import_styled_components23.css)(["background-color:var(--charcoal-surface3);"]), ({
+}) => status === "inactive" && (0, import_styled_components22.css)(["background-color:var(--charcoal-surface3);"]), ({
   bgImage
-}) => bgImage !== void 0 && (0, import_styled_components23.css)(["background-color:var(--charcoal-surface4);&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;background-image:url(", ");mix-blend-mode:overlay;}"], bgImage));
-var Inner = import_styled_components23.default.div.withConfig({
+}) => bgImage !== void 0 && (0, import_styled_components22.css)(["background-color:var(--charcoal-surface4);&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;background-image:url(", ");mix-blend-mode:overlay;}"], bgImage));
+var Inner = import_styled_components22.default.div.withConfig({
   componentId: "ccl__sc-11j9pu2-2"
 })(["display:inline-flex;gap:8px;align-items:center;z-index:2;"]);
-var labelCSS = (0, import_styled_components23.css)(["font-size:14px;line-height:22px;font-weight:bold;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;}"]);
-var translateLabelCSS = (0, import_styled_components23.css)(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
-var LabelWrapper = import_styled_components23.default.div.withConfig({
+var labelCSS = (0, import_styled_components22.css)(["font-size:14px;line-height:22px;font-weight:bold;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;}"]);
+var translateLabelCSS = (0, import_styled_components22.css)(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
+var LabelWrapper = import_styled_components22.default.div.withConfig({
   componentId: "ccl__sc-11j9pu2-3"
 })(["", ""], ({
   isTranslate
 }) => isTranslate ?? false ? translateLabelCSS : labelCSS);
-var Label3 = import_styled_components23.default.span.withConfig({
+var Label3 = import_styled_components22.default.span.withConfig({
   componentId: "ccl__sc-11j9pu2-4"
 })(["max-width:152px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit;color:inherit;line-height:inherit;"]);
-var TranslatedLabel = import_styled_components23.default.div.withConfig({
+var TranslatedLabel = import_styled_components22.default.div.withConfig({
   componentId: "ccl__sc-11j9pu2-5"
 })(["font-size:12px;line-height:20px;font-weight:bold;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;}"]);
 // Annotate the CommonJS export names for ESM import in node: