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

package/dist/index.cjs.js

@@ -42,13 +42,12 @@ __export(src_exports, {
   ModalAlign: () => ModalAlign,
   ModalBody: () => ModalBody,
   ModalButtons: () => ModalButtons,
+  ModalCloseButton: () => ModalCloseButton,
   ModalHeader: () => ModalHeader,
-  MultiSelect: () => MultiSelect_default,
-  MultiSelectGroup: () => MultiSelectGroup,
   OverlayProvider: () => import_overlays.OverlayProvider,
   Radio: () => Radio_default,
   RadioGroup: () => RadioGroup,
-  SSRProvider: () => import_ssr.SSRProvider,
+  SSRProvider: () => SSRProvider,
   SegmentedControl: () => SegmentedControl_default,
   Switch: () => Switch_default,
   TagItem: () => TagItem_default,
@@ -88,6 +87,12 @@ function useComponentAbstraction() {
 
 // src/core/SSRProvider.tsx
 var import_ssr = require("@react-aria/ssr");
+var import_react2 = require("react");
+function isReactVersionOver(minVersion) {
+  const reactMajorVersion = parseInt(import_react2.version.split(".")[0], 10);
+  return Number.isFinite(reactMajorVersion) ? reactMajorVersion >= minVersion : false;
+}
+var SSRProvider = isReactVersionOver(18) ? import_react2.Fragment : import_ssr.SSRProvider;
 
 // src/core/OverlayProvider.tsx
 var import_overlays = require("@react-aria/overlays");
@@ -104,24 +109,24 @@ function CharcoalProvider({
   children,
   background
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ssr.SSRProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_styled_components.ThemeProvider, { theme: defaultTheme, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SSRProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_styled_components.ThemeProvider, { theme: defaultTheme, children: [
     injectTokens && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_styled.TokenInjector, { theme: themeMap, background }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentAbstraction, { components, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_overlays.OverlayProvider, { children }) })
   ] }) });
 }
 
 // src/components/Button/index.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/_lib/useClassNames.ts
-var import_react2 = require("react");
-function useClassNames(defaultClassName, propsClassName) {
-  return (0, import_react2.useMemo)(() => [defaultClassName, propsClassName].filter((v) => v).join(" "), [defaultClassName, propsClassName]);
+var import_react3 = require("react");
+function useClassNames(...classNames) {
+  return (0, import_react3.useMemo)(() => classNames.filter((v) => v).join(" "), [classNames]);
 }
 
 // src/components/Button/index.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Button = (0, import_react3.forwardRef)(function Button2({
+var Button = (0, import_react4.forwardRef)(function Button2({
   variant,
   fullWidth,
   size,
@@ -131,108 +136,44 @@ var Button = (0, import_react3.forwardRef)(function Button2({
   componentAs,
   ...props
 }, ref) {
-  const Component = (0, import_react3.useMemo)(() => as ?? "button", [as]);
+  const Component = (0, import_react4.useMemo)(() => as ?? "button", [as]);
   const classNames = useClassNames("charcoal-button", className);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, as: componentAs, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
 });
 var Button_default = Button;
 
 // src/components/Clickable/index.tsx
-var React3 = __toESM(require("react"));
-var import_styled_components2 = __toESM(require("styled-components"));
-var import_utils = require("@charcoal-ui/utils");
+var import_react5 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Clickable = React3.forwardRef(function Clickable2(props, ref) {
-  const {
-    Link
-  } = useComponentAbstraction();
-  const isLink = "to" in props;
-  const as = isLink ? Link : "button";
-  const ariaDisabled = isLink && props.disabled === true ? true : void 0;
-  let rest = props;
-  if (isLink) {
-    const {
-      disabled,
-      ..._rest
-    } = props;
-    rest = _rest;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledClickableDiv, { ...rest, ref, as, "aria-disabled": ariaDisabled });
+var Clickable = (0, import_react5.forwardRef)(function Clickable2({
+  componentAs,
+  as,
+  ...props
+}, ref) {
+  const className = useClassNames("charcoal-clickable", props.className);
+  const Component = (0, import_react5.useMemo)(() => as ?? "button", [as]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...props, ref, className, as: componentAs });
 });
 var Clickable_default = Clickable;
-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/IconButton/index.tsx
-var import_react4 = require("react");
-var import_styled_components3 = __toESM(require("styled-components"));
-var import_styled2 = require("@charcoal-ui/styled");
+var import_react6 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var IconButton = (0, import_react4.forwardRef)(function IconButtonInner({
+var IconButton = (0, import_react6.forwardRef)(function IconButtonInner({
   variant = "Default",
   size = "M",
   icon,
   isActive = false,
+  componentAs,
+  as,
   ...rest
 }, ref) {
   validateIconSize(size, icon);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, $isActive: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon }) });
+  const Component = (0, import_react6.useMemo)(() => as ?? "button", [as]);
+  const classNames = useClassNames("charcoal-icon-button", rest.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { ...rest, as: componentAs, ref, className: classNames, "data-size": size, "data-active": isActive, "data-variant": variant, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon }) });
 });
 var IconButton_default = IconButton;
-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
-}) => `--charcoal-${$font}`, ({
-  $background
-}) => `--charcoal-${$background}`, ({
-  $isActive,
-  $background,
-  $font
-}) => $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
-}) {
-  return {
-    ...variantToProps($variant),
-    ...sizeToProps($size)
-  };
-}
-function variantToProps(variant) {
-  switch (variant) {
-    case "Default":
-      return {
-        $font: "text3",
-        $background: "transparent"
-      };
-    case "Overlay":
-      return {
-        $font: "text5",
-        $background: "surface4"
-      };
-  }
-}
-function sizeToProps(size) {
-  switch (size) {
-    case "XS":
-      return {
-        $width: 20,
-        $height: 20
-      };
-    case "S":
-      return {
-        $width: 32,
-        $height: 32
-      };
-    case "M":
-      return {
-        $width: 40,
-        $height: 40
-      };
-  }
-}
 function validateIconSize(size, icon) {
   let requiredIconSize;
   switch (size) {
@@ -255,17 +196,15 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-var import_react5 = require("react");
-var React4 = __toESM(require("react"));
-var import_styled_components4 = __toESM(require("styled-components"));
+var import_react7 = require("react");
+var React5 = __toESM(require("react"));
 var import_warning = __toESM(require("warning"));
-var import_styled3 = require("@charcoal-ui/styled");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Radio = (0, import_react5.forwardRef)(function RadioInner({
+var Radio = (0, import_react7.forwardRef)(function RadioInner({
   value,
   disabled = false,
   children,
-  className
+  ...props
 }, ref) {
   const {
     name,
@@ -274,7 +213,8 @@ var Radio = (0, import_react5.forwardRef)(function RadioInner({
     readonly,
     invalid,
     onChange
-  } = (0, import_react5.useContext)(RadioGroupContext);
+  } = (0, import_react7.useContext)(RadioGroupContext);
+  const classNames = useClassNames("charcoal-radio__label", props.className);
   (0, import_warning.default)(
     name !== void 0,
     `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`
@@ -282,30 +222,16 @@ var Radio = (0, import_react5.forwardRef)(function RadioInner({
   const isSelected = value === selected;
   const isDisabled = disabled || isParentDisabled;
   const isReadonly = readonly && !isSelected;
-  const handleChange = (0, import_react5.useCallback)((e) => {
+  const handleChange = (0, import_react7.useCallback)((e) => {
     onChange(e.currentTarget.value);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(RadioRoot, { "aria-disabled": isDisabled || isReadonly, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioInput, { name, value, checked: isSelected, "aria-invalid": invalid, onChange: handleChange, disabled: isDisabled || isReadonly, ref }),
-    children != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioLabel, { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "radio", className: "charcoal-radio__input", name, value, checked: isSelected, "aria-invalid": invalid, onChange: handleChange, disabled: isDisabled || isReadonly, ref }),
+    children != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "charcoal-radio__label_div", children })
   ] });
 });
-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_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_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_components4.default.div.withConfig({
-  componentId: "ccl__sc-1hitkzn-3"
-})(["display:grid;grid-template-columns:1fr;grid-gap:8px;"]);
-var RadioGroupContext = React4.createContext({
+var Radio_default = (0, import_react7.memo)(Radio);
+var RadioGroupContext = React5.createContext({
   name: void 0,
   selected: void 0,
   disabled: false,
@@ -315,233 +241,100 @@ var RadioGroupContext = React4.createContext({
     throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?");
   }
 });
-function RadioGroup({
-  className,
+var RadioGroup = (0, import_react7.forwardRef)(function RadioGroupInner({
   value,
-  label,
   name,
   onChange,
   disabled,
   readonly,
   invalid,
-  children
-}) {
-  const handleChange = (0, import_react5.useCallback)((next) => {
+  children,
+  ...props
+}, ref) {
+  const classNames = useClassNames("charcoal-radio-group", props.className);
+  const handleChange = (0, import_react7.useCallback)((next) => {
     onChange(next);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioGroupContext.Provider, { value: {
+  const contextValue = (0, import_react7.useMemo)(() => ({
     name,
     selected: value,
     disabled: disabled ?? false,
     readonly: readonly ?? false,
     invalid: invalid ?? false,
     onChange: handleChange
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledRadioGroup, { role: "radiogroup", "aria-orientation": "vertical", "aria-label": label, "aria-invalid": invalid, className, children }) });
-}
-
-// src/components/MultiSelect/index.tsx
-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_react6 = require("react");
-var MultiSelectGroupContext = (0, import_react6.createContext)({
-  name: void 0,
-  selected: [],
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  onChange() {
-    throw new Error("Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?");
-  }
+  }), [disabled, handleChange, invalid, name, readonly, value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "radiogroup", "aria-orientation": "vertical", "aria-invalid": invalid, className: classNames, ref, children }) });
 });
 
-// src/components/MultiSelect/index.tsx
-var import_styled4 = require("@charcoal-ui/styled");
+// src/components/Switch/index.tsx
+var import_react9 = require("react");
+var import_utils = require("@react-aria/utils");
 
-// src/components/Icon/index.tsx
-var React5 = __toESM(require("react"));
-var import_icons = require("@charcoal-ui/icons");
+// src/components/Switch/SwitchInput/index.tsx
+var import_react8 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Icon = React5.forwardRef(function IconInner({
-  name,
-  scale,
-  unsafeNonGuidelineScale,
+var SwitchInput = (0, import_react8.forwardRef)(function SwitchInput2({
+  onChange,
   className,
-  ...rest
+  ...props
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+  const handleChange = (0, import_react8.useCallback)((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.checked);
+  }, [onChange]);
+  props.children;
+  const classNames = useClassNames("charcoal-switch-input", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
 });
-var Icon_default = Icon;
+var SwitchInput_default = SwitchInput;
 
-// src/components/MultiSelect/index.tsx
+// src/components/Switch/SwitchWithLabel.tsx
+var React6 = __toESM(require("react"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react7.forwardRef)(function MultiSelectInner({
-  value,
-  disabled = false,
-  onChange,
-  variant = "default",
+var SwitchWithLabel = React6.memo(function SwitchWithLabel2({
+  children,
   className,
-  children
-}, ref) {
-  const {
-    name,
-    selected,
-    disabled: parentDisabled,
-    readonly,
-    invalid,
-    onChange: parentOnChange
-  } = (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_react7.useCallback)((event) => {
-    if (!(event.currentTarget instanceof HTMLInputElement)) {
-      return;
-    }
-    if (onChange)
-      onChange({
-        value,
-        selected: event.currentTarget.checked
-      });
-    parentOnChange({
-      value,
-      selected: event.currentTarget.checked
-    });
-  }, [onChange, parentOnChange, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(MultiSelectRoot, { "aria-disabled": isDisabled, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MultiSelectInput, { ...{
-      name,
-      value,
-      invalid
-    }, checked: isSelected, disabled: isDisabled, onChange: handleChange, overlay: variant === "overlay", "aria-invalid": invalid, ref }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MultiSelectInputOverlay, { overlay: variant === "overlay", invalid, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
-    Boolean(children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MultiSelectLabel, { children })
+  disabled,
+  id,
+  input
+}) {
+  const classNames = useClassNames("charcoal-switch__label", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
+    input,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "charcoal-switch__label_div", children })
   ] });
 });
-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_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_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_styled4.focusVisibleFocusRingCss, ({
-  invalid,
-  overlay
-}) => 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_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_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_components5.css)(["border-color:var(--charcoal-text5);border-width:2px;border-style:solid;"]));
-function MultiSelectGroup({
-  className,
-  name,
-  label,
-  selected,
-  onChange,
-  disabled = false,
-  readonly = false,
-  invalid = false,
-  children
-}) {
-  const handleChange = (0, import_react7.useCallback)((payload) => {
-    const index = selected.indexOf(payload.value);
-    if (payload.selected) {
-      if (index < 0) {
-        onChange([...selected, payload.value]);
-      }
-    } else {
-      if (index >= 0) {
-        onChange([...selected.slice(0, index), ...selected.slice(index + 1)]);
-      }
-    }
-  }, [onChange, selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MultiSelectGroupContext.Provider, { value: {
-    name,
-    selected: Array.from(new Set(selected)),
-    disabled,
-    readonly,
-    invalid,
-    onChange: handleChange
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className, "aria-label": label, "data-testid": "SelectGroup", children }) });
-}
 
 // src/components/Switch/index.tsx
-var import_switch = require("@react-aria/switch");
-var import_react8 = require("react");
-var import_react_stately = require("react-stately");
-var import_styled_components6 = __toESM(require("styled-components"));
-var import_utils3 = require("@react-aria/utils");
-var import_styled5 = require("@charcoal-ui/styled");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var SwitchCheckbox = (0, import_react8.forwardRef)(function SwitchCheckboxInner(props, external) {
-  const {
-    disabled,
-    className
-  } = props;
-  const ariaSwitchProps = (0, import_react8.useMemo)(() => ({
-    ...props,
-    "aria-label": "children" in props ? void 0 : props.label,
-    isDisabled: props.disabled,
-    isSelected: props.checked
-  }), [props]);
-  const state = (0, import_react_stately.useToggleState)(ariaSwitchProps);
-  const ref = (0, import_utils3.useObjectRef)(external);
-  const {
-    inputProps: {
-      className: _className,
-      type: _type,
-      ...rest
-    }
-  } = (0, import_switch.useSwitch)(ariaSwitchProps, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Label, { className, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SwitchInput, { ...rest, ref }),
-    "children" in props ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LabelInner, { children: props.children }) : void 0
-  ] });
+var Switch = (0, import_react9.forwardRef)(function Switch2({
+  children,
+  onChange,
+  disabled,
+  className,
+  id,
+  ...props
+}, ref) {
+  const htmlId = (0, import_utils.useId)(id);
+  const noChildren = children === void 0;
+  const input = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
+  if (noChildren) {
+    return input;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
 });
-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_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_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_styled5.focusVisibleFocusRingCss);
+var Switch_default = (0, import_react9.memo)(Switch);
 
 // src/components/TextField/index.tsx
-var import_textfield = require("@react-aria/textfield");
 var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react10 = require("react");
-var React7 = __toESM(require("react"));
-var import_styled_components8 = __toESM(require("styled-components"));
+var import_react11 = require("react");
+var React8 = __toESM(require("react"));
+var import_styled_components2 = __toESM(require("styled-components"));
 
 // src/components/FieldLabel/index.tsx
-var React6 = __toESM(require("react"));
-var import_styled_components7 = __toESM(require("styled-components"));
+var React7 = __toESM(require("react"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var FieldLabel = React6.forwardRef(function FieldLabel2({
+var FieldLabel = React7.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -550,30 +343,16 @@ var FieldLabel = React6.forwardRef(function FieldLabel2({
   subLabel,
   ...labelProps
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FieldLabelWrapper, { style, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label2, { ref, ...labelProps, children: label }),
-    required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RequiredText, { children: requiredText }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SubLabelClickable, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: subLabel }) })
+  const classNames = useClassNames("charcoal-field-label-root", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style, className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
+    required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-field-label-required-text", children: requiredText }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: subLabel }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
-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_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_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_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) {
@@ -591,9 +370,9 @@ function countCodePointsInString(string) {
 }
 
 // src/components/TextField/useFocusWithClick.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useFocusWithClick(containerRef, inputRef) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const el = containerRef.current;
     if (el) {
       const handleDown = (e) => {
@@ -610,151 +389,128 @@ function useFocusWithClick(containerRef, inputRef) {
 }
 
 // src/components/TextField/index.tsx
-var import_utils4 = require("@react-aria/utils");
+var import_utils2 = require("@react-aria/utils");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var TextField = React7.forwardRef(function SingleLineTextFieldInner({
+var TextField = React8.forwardRef(function SingleLineTextFieldInner({
+  assistiveText,
+  className,
+  disabled = false,
+  label = "",
+  maxLength,
   onChange,
+  prefix = null,
+  required,
+  requiredText,
+  showCount = false,
+  showLabel = false,
+  subLabel,
+  suffix = null,
+  type = "text",
+  value,
+  getCount = countCodePointsInString,
   ...props
-}, forwardRef19) {
-  const {
-    className,
-    showLabel = false,
-    showCount = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    readOnly = false,
-    assistiveText,
-    maxLength,
-    prefix = null,
-    suffix = null,
-    ...restProps
-  } = props;
+}, forwardRef20) {
+  const inputRef = (0, import_react11.useRef)(null);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden.useVisuallyHidden)();
-  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_react10.useCallback)((value) => {
-    const count2 = countCodePointsInString(value);
+  const [count, setCount] = (0, import_react11.useState)(getCount(value ?? ""));
+  const handleChange = (0, import_react11.useCallback)((e) => {
+    const value2 = e.target.value;
+    const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
       return;
     }
-    if (nonControlled) {
-      setCount(count2);
-    }
-    onChange?.(value);
-  }, [maxLength, nonControlled, onChange]);
-  (0, import_react10.useEffect)(() => {
-    setCount(countCodePointsInString(props.value ?? ""));
-  }, [props.value]);
-  const {
-    inputProps: ariaInputProps,
-    labelProps,
-    descriptionProps,
-    errorMessageProps
-  } = (0, import_textfield.useTextField)({
-    inputElementType: "input",
-    isDisabled: disabled,
-    isRequired: required,
-    isReadOnly: readOnly,
-    validationState: invalid ? "invalid" : "valid",
-    description: !invalid && assistiveText,
-    errorMessage: invalid && assistiveText,
-    onChange: handleChange,
-    ...props
-  }, ariaRef);
-  const containerRef = (0, import_react10.useRef)(null);
-  useFocusWithClick(containerRef, ariaRef);
-  const inputProps = (0, import_utils4.mergeProps)(restProps, ariaInputProps);
+    setCount(count2);
+    onChange?.(value2);
+  }, [getCount, maxLength, onChange]);
+  (0, import_react11.useEffect)(() => {
+    setCount(getCount(value ?? ""));
+  }, [getCount, value]);
+  const containerRef = (0, import_react11.useRef)(null);
+  useFocusWithClick(containerRef, inputRef);
+  const inputId = (0, import_utils2.useId)(props.id);
+  const describedbyId = (0, import_utils2.useId)();
+  const labelledbyId = (0, import_utils2.useId)();
+  const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(StyledInputContainer, { ref: containerRef, invalid, "aria-disabled": disabled === true ? true : void 0, hasPrefix: prefix != null, hasSuffix: suffix != null || showCount, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(StyledInputContainer, { "aria-disabled": disabled === true ? true : void 0, hasPrefix: prefix != null, hasSuffix: suffix != null || showCount, invalid: props.invalid === true, ref: containerRef, children: [
       prefix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PrefixContainer, { children: prefix }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledInput, { ref: mergeRefs(forwardRef19, ariaRef), invalid, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledInput, { "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": props.invalid, "aria-labelledby": labelledbyId, id: inputId, invalid: props.invalid === true, maxLength, onChange: handleChange, prefix: props.rdfaPredix, ref: (0, import_utils2.mergeRefs)(forwardRef20, inputRef), type, value, ...props }),
       (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SuffixContainer, { children: [
         suffix,
         showCount && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AssistiveText, { invalid: props.invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
-var TextFieldRoot = import_styled_components8.default.div.withConfig({
+var TextFieldRoot = import_styled_components2.default.div.withConfig({
   componentId: "ccl__sc-3dd0tt-0"
-})(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
+})(["display:grid;grid-template-columns:1fr;grid-gap:4px;", ""], (p) => p.isDisabled && {
   opacity: p.theme.elementEffect.disabled.opacity
 });
-var TextFieldLabel = (0, import_styled_components8.default)(FieldLabel_default).withConfig({
+var StyledInputContainer = import_styled_components2.default.div.withConfig({
   componentId: "ccl__sc-3dd0tt-1"
-})(["margin-bottom:8px;"]);
-var StyledInputContainer = import_styled_components8.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_components2.css)(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
+var PrefixContainer = import_styled_components2.default.div.withConfig({
   componentId: "ccl__sc-3dd0tt-2"
-})(["display: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_components8.default.span.withConfig({
-  componentId: "ccl__sc-3dd0tt-4"
+var SuffixContainer = import_styled_components2.default.span.withConfig({
+  componentId: "ccl__sc-3dd0tt-3"
 })(["display:flex;align-items:center;gap:8px;"]);
-var StyledInput = import_styled_components8.default.input.withConfig({
-  componentId: "ccl__sc-3dd0tt-5"
+var StyledInput = import_styled_components2.default.input.withConfig({
+  componentId: "ccl__sc-3dd0tt-4"
 })(["border:none;box-sizing:border-box;outline:none;font-family:inherit;transform-origin:top left;transform:scale(0.875);width:calc(100% / 0.875);height:calc(100% / 0.875);font-size:calc(14px / 0.875);line-height:calc(22px / 0.875);padding-left:0;padding-right:0;border-radius:calc(4px / 0.875);appearance:none;background:transparent;color:var(--charcoal-text2);&::placeholder{color:var(--charcoal-text3);}"]);
-var SingleLineCounter = import_styled_components8.default.span.withConfig({
-  componentId: "ccl__sc-3dd0tt-6"
+var SingleLineCounter = import_styled_components2.default.span.withConfig({
+  componentId: "ccl__sc-3dd0tt-5"
 })(["line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
-var AssistiveText = import_styled_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`})`);
+var AssistiveText = import_styled_components2.default.p.withConfig({
+  componentId: "ccl__sc-3dd0tt-6"
+})(["font-size:14px;line-height:22px;margin:0;color:", ";"], (p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`);
 
 // src/components/TextArea/index.tsx
-var import_textfield2 = require("@react-aria/textfield");
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
-var import_react11 = require("react");
-var import_styled_components9 = __toESM(require("styled-components"));
-var import_utils5 = require("@react-aria/utils");
+var import_react12 = require("react");
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_utils3 = require("@react-aria/utils");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
+var TextArea = (0, import_react12.forwardRef)(function TextAreaInner({
   onChange,
+  className,
+  value,
+  showCount = false,
+  showLabel = false,
+  label = "",
+  requiredText,
+  subLabel,
+  disabled = false,
+  required,
+  assistiveText,
+  maxLength,
+  autoHeight = false,
+  rows: initialRows = 4,
+  getCount = countCodePointsInString,
   ...props
-}, forwardRef19) {
-  const {
-    className,
-    showCount = false,
-    showLabel = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    readOnly = false,
-    assistiveText,
-    maxLength,
-    autoHeight = false,
-    rows: initialRows = 4,
-    ...restProps
-  } = props;
+}, forwardRef20) {
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden2.useVisuallyHidden)();
-  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 textareaRef = (0, import_react12.useRef)(null);
+  const textAreaRef = (0, import_react12.useRef)(null);
+  const [count, setCount] = (0, import_react12.useState)(getCount(value ?? ""));
+  const [rows, setRows] = (0, import_react12.useState)(initialRows);
+  const syncHeight = (0, import_react12.useCallback)((textarea) => {
     const rows2 = (`${textarea.value}
 `.match(/\n/gu)?.length ?? 0) || 1;
     setRows(initialRows <= rows2 ? rows2 : initialRows);
   }, [initialRows]);
-  const nonControlled = props.value === void 0;
-  const handleChange = (0, import_react11.useCallback)((value) => {
-    const count2 = countCodePointsInString(value);
+  const nonControlled = value === void 0;
+  const handleChange = (0, import_react12.useCallback)((e) => {
+    const value2 = e.target.value;
+    const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
       return;
     }
@@ -764,88 +520,86 @@ var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
-    onChange?.(value);
-  }, [autoHeight, maxLength, nonControlled, onChange, syncHeight]);
-  (0, import_react11.useEffect)(() => {
-    setCount(countCodePointsInString(props.value ?? ""));
-  }, [props.value]);
-  const {
-    inputProps: ariaInputProps,
-    labelProps,
-    descriptionProps,
-    errorMessageProps
-  } = (0, import_textfield2.useTextField)({
-    inputElementType: "textarea",
-    isDisabled: disabled,
-    isRequired: required,
-    isReadOnly: readOnly,
-    validationState: invalid ? "invalid" : "valid",
-    description: !invalid && assistiveText,
-    errorMessage: invalid && assistiveText,
-    onChange: handleChange,
-    ...props
-  }, ariaRef);
-  (0, import_react11.useEffect)(() => {
+    onChange?.(value2);
+  }, [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]);
+  (0, import_react12.useEffect)(() => {
+    setCount(getCount(value ?? ""));
+  }, [getCount, value]);
+  (0, import_react12.useEffect)(() => {
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
   }, [autoHeight, syncHeight]);
-  const containerRef = (0, import_react11.useRef)(null);
-  useFocusWithClick(containerRef, ariaRef);
-  const inputProps = (0, import_utils5.mergeProps)(restProps, ariaInputProps);
+  const containerRef = (0, import_react12.useRef)(null);
+  useFocusWithClick(containerRef, textAreaRef);
+  const textAreaId = (0, import_utils3.useId)(props.id);
+  const describedbyId = (0, import_utils3.useId)();
+  const labelledbyId = (0, import_utils3.useId)();
+  const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(TextFieldRoot2, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(StyledTextareaContainer, { ref: containerRef, invalid, rows: showCount ? rows + 1 : rows, "aria-disabled": disabled === true ? "true" : void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledTextarea, { ref: mergeRefs(textareaRef, forwardRef19, ariaRef), rows, noBottomPadding: showCount, ...inputProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(StyledTextareaContainer, { "aria-disabled": disabled === true ? "true" : void 0, invalid: props.invalid === true, ref: containerRef, rows: showCount ? rows + 1 : rows, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledTextarea, { "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": props.invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, noBottomPadding: showCount, onChange: handleChange, ref: mergeRefs(forwardRef20, textAreaRef), rows, value, ...props }),
       showCount && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssistiveText, { invalid: props.invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
-var TextFieldRoot2 = import_styled_components9.default.div.withConfig({
+var TextFieldRoot2 = import_styled_components3.default.div.withConfig({
   componentId: "ccl__sc-58waht-0"
-})(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
+})(["display:grid;grid-template-columns:1fr;grid-gap:4px;", ""], (p) => p.isDisabled && {
   opacity: p.theme.elementEffect.disabled.opacity
 });
-var StyledTextareaContainer = import_styled_components9.default.div.withConfig({
+var StyledTextareaContainer = import_styled_components3.default.div.withConfig({
   componentId: "ccl__sc-58waht-1"
 })(["position:relative;overflow:hidden;color:var(--charcoal-text2);background-color:var(--charcoal-surface3);border-radius:4px;transition:0.2s background-color,0.2s box-shadow;", ";:not([aria-disabled]):hover,[aria-disabled='false']:hover{background-color:var(--charcoal-surface3-hover);}:focus-within{outline:none;box-shadow:0 0 0 4px ", ";}", ""], ({
   rows
-}) => (0, import_styled_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({
+}) => (0, import_styled_components3.css)(["height:calc(22px * ", " + 18px);"], rows), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && (0, import_styled_components3.css)(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
+var StyledTextarea = import_styled_components3.default.textarea.withConfig({
   componentId: "ccl__sc-58waht-2"
 })(["border:none;outline:none;resize:none;font-family:inherit;color:inherit;box-sizing:border-box;transform-origin:top left;transform:scale(0.875);width:calc(100% / 0.875);font-size:calc(14px / 0.875);line-height:calc(22px / 0.875);padding:calc(9px / 0.875) calc(8px / 0.875) ", ";", ";appearance:none;background:none;&::placeholder{color:var(--charcoal-text3);}"], (p) => p.noBottomPadding ? 0 : "", ({
   rows = 1,
   noBottomPadding
-}) => (0, import_styled_components9.css)(["height:calc(22px / 0.875 * ", " + ", "px);"], rows, noBottomPadding ? 9 : 20));
-var MultiLineCounter = import_styled_components9.default.span.withConfig({
+}) => (0, import_styled_components3.css)(["height:calc(22px / 0.875 * ", " + ", "px);"], rows, noBottomPadding ? 9 : 20));
+var MultiLineCounter = import_styled_components3.default.span.withConfig({
   componentId: "ccl__sc-58waht-3"
 })(["position:absolute;bottom:9px;right:8px;line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
 
+// src/components/Icon/index.tsx
+var React9 = __toESM(require("react"));
+var import_icons = require("@charcoal-ui/icons");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Icon = React9.forwardRef(function IconInner({
+  name,
+  scale,
+  unsafeNonGuidelineScale,
+  className,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+});
+var Icon_default = Icon;
+
 // src/components/Modal/index.tsx
-var import_react14 = require("react");
-var React11 = __toESM(require("react"));
+var import_react15 = require("react");
+var React13 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
-var import_styled_components11 = __toESM(require("styled-components"));
-var import_utils7 = require("@charcoal-ui/utils");
-var import_styled6 = require("@charcoal-ui/styled");
-var import_react_spring2 = require("react-spring");
-var import_utils8 = require("@react-aria/utils");
+var import_styled_components4 = require("styled-components");
+var import_utils4 = require("@charcoal-ui/utils");
+var import_styled2 = require("@charcoal-ui/styled");
+var import_react_spring = require("react-spring");
+var import_utils5 = require("@react-aria/utils");
 
 // src/components/Modal/Dialog/index.tsx
-var import_react12 = require("react");
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_react13 = require("react");
 var import_dialog = require("@react-aria/dialog");
-var import_foundation = require("@charcoal-ui/foundation");
-var import_utils6 = require("@charcoal-ui/utils");
-var import_react_spring = require("react-spring");
 
 // src/_lib/useForwardedRef.tsx
-var React8 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 function useForwardedRef(ref) {
-  const innerRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const innerRef = React10.useRef(null);
+  React10.useEffect(() => {
     if (!ref)
       return;
     if (typeof ref === "function") {
@@ -858,49 +612,36 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Dialog = (0, import_react12.forwardRef)(function Dialog2(props, forwardRef19) {
-  const ref = useForwardedRef(forwardRef19);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Dialog = (0, import_react13.forwardRef)(function Dialog2({
+  size,
+  bottomSheet,
+  css: css4,
+  className,
+  ...props
+}, forwardRef20) {
+  const ref = useForwardedRef(forwardRef20);
   const {
     dialogProps
   } = (0, import_dialog.useDialog)({
     role: "dialog"
   }, 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 });
+  const classNames = useClassNames("charcoal-modal-dialog", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, ref, ...props });
 });
-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) {
-    case "S": {
-      return (0, import_foundation.columnSystem)(3, import_foundation.COLUMN_UNIT, import_foundation.GUTTER_UNIT) + import_foundation.GUTTER_UNIT * 2;
-    }
-    case "M": {
-      return (0, import_foundation.columnSystem)(4, import_foundation.COLUMN_UNIT, import_foundation.GUTTER_UNIT) + import_foundation.GUTTER_UNIT * 2;
-    }
-    case "L": {
-      return (0, import_foundation.columnSystem)(6, import_foundation.COLUMN_UNIT, import_foundation.GUTTER_UNIT) + import_foundation.GUTTER_UNIT * 2;
-    }
-    default: {
-      return unreachable(p.size);
-    }
-  }
-}, ({
-  theme
-}) => (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 React9 = __toESM(require("react"));
-var ModalBackgroundContext = React9.createContext(null);
+var React11 = __toESM(require("react"));
+var ModalBackgroundContext = React11.createContext(null);
 
 // src/components/Modal/useCustomModalOverlay.tsx
-var React10 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 function usePreventScroll(element, isOpen) {
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -927,7 +668,7 @@ function useCharcoalModalOverlay(props, state, ref) {
   }, ref);
   usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen);
   (0, import_overlays2.useOverlayFocusContain)();
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     if (state.isOpen && ref.current) {
       return (0, import_overlays2.ariaHideOutside)([ref.current]);
     }
@@ -939,9 +680,9 @@ function useCharcoalModalOverlay(props, state, ref) {
 }
 
 // src/components/Modal/index.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react14.forwardRef)(function ModalInner({
+var Modal = (0, import_react15.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -954,9 +695,10 @@ var Modal = (0, import_react14.forwardRef)(function ModalInner({
     isDismissable,
     onClose,
     className,
-    isOpen = false
+    isOpen = false,
+    closeButtonAriaLabel = "Close"
   } = props;
-  const ref = (0, import_utils8.useObjectRef)(external);
+  const ref = (0, import_utils5.useObjectRef)(external);
   const {
     modalProps,
     underlayProps
@@ -967,11 +709,11 @@ var Modal = (0, import_react14.forwardRef)(function ModalInner({
     onClose,
     isOpen
   }, ref);
-  const theme = (0, import_styled_components11.useTheme)();
-  const isMobile = (0, import_styled6.useMedia)((0, import_utils7.maxWidth)(theme.breakpoint.screen1)) ?? false;
+  const theme = (0, import_styled_components4.useTheme)();
+  const isMobile = (0, import_styled2.useMedia)((0, import_utils4.maxWidth)(theme.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const showDismiss = !isMobile || bottomSheet !== true;
-  const transition = (0, import_react_spring2.useTransition)(isOpen, {
+  const transition = (0, import_react_spring.useTransition)(isOpen, {
     from: {
       transform: "translateY(100%)",
       backgroundColor: "rgba(0, 0, 0, 0)",
@@ -991,13 +733,13 @@ var Modal = (0, import_react14.forwardRef)(function ModalInner({
     },
     config: transitionEnabled ? {
       duration: 400,
-      easing: import_react_spring2.easings.easeOutQuart
+      easing: import_react_spring.easings.easeOutQuart
     } : {
       duration: 0
     }
   });
-  const bgRef = React11.useRef(null);
-  const handleClick = React11.useCallback((e) => {
+  const bgRef = React13.useRef(null);
+  const handleClick = React13.useCallback((e) => {
     if (e.currentTarget === e.target) {
       onClose();
     }
@@ -1006,12 +748,15 @@ var Modal = (0, import_react14.forwardRef)(function ModalInner({
     backgroundColor,
     overflow,
     transform
-  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalBackground, { ref: bgRef, zIndex, ...underlayProps, style: transitionEnabled ? {
+  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_spring.animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
     backgroundColor,
-    overflow
-  } : {}, $bottomSheet: bottomSheet, onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog, { ref, ...modalProps, style: transitionEnabled ? {
+    overflow,
+    zIndex
+  } : {
+    zIndex
+  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
     transform
-  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ModalContext.Provider, { value: {
+  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ModalContext.Provider, { value: {
     titleProps: {},
     title,
     close: onClose,
@@ -1019,96 +764,63 @@ var Modal = (0, import_react14.forwardRef)(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalCrossButton, { size: "S", icon: "24/Close", onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
-var Modal_default = (0, import_react14.memo)(Modal);
-var ModalContext = React11.createContext({
+var AnimatedDialog = (0, import_react_spring.animated)(Dialog);
+var Modal_default = (0, import_react15.memo)(Modal);
+var ModalContext = React13.createContext({
   titleProps: {},
   title: "",
   close: void 0,
   showDismiss: true,
   bottomSheet: false
 });
-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_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_react14.useContext)(ModalContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
+function ModalCloseButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
 }
-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_components12 = __toESM(require("styled-components"));
-var import_react15 = require("react");
-var import_utils9 = require("@charcoal-ui/utils");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react15.useContext)(ModalContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalHeaderRoot, { $bottomSheet: modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledModalTitle, {}) });
+  const modalCtx = (0, import_react16.useContext)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
+}
+var ModalAlign = createDivComponent("charcoal-modal-align");
+var ModalBody = createDivComponent("charcoal-modal-body");
+var ModalButtons = createDivComponent("charcoal-modal-buttons");
+function createDivComponent(mainClassName) {
+  return (0, import_react16.forwardRef)(function DivComponent({
+    className,
+    ...props
+  }, ref) {
+    const classNames = useClassNames(mainClassName, className);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: classNames, ref, ...props });
+  });
 }
-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_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_components12.default.div.withConfig({
-  componentId: "ccl__sc-1k33wze-2"
-})(["padding-left:16px;padding-right:16px;"]);
-var ModalBody = import_styled_components12.default.div.withConfig({
-  componentId: "ccl__sc-1k33wze-3"
-})(["padding-bottom:40px;"]);
-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_react16 = require("react");
-var import_styled_components13 = __toESM(require("styled-components"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react16.forwardRef)(function LoadingSpinnerInner({
+var import_react17 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var LoadingSpinner = (0, import_react17.forwardRef)(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
-  className
+  ...props
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoadingSpinnerRoot, { size, padding, transparent, className, ref, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoadingSpinnerIcon, {}) });
+  const classNames = useClassNames("charcoal-loading-spinner", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "progressbar", style: {
+    "--charcoal-loading-spinner-size": `${size}px`,
+    "--charcoal-loading-spinner-padding": `${padding}px`
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = (0, import_react16.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_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_react16.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinner_default = (0, import_react17.memo)(LoadingSpinner);
+var LoadingSpinnerIcon = (0, import_react17.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react16.useRef)(null);
-  (0, import_react16.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -1118,25 +830,25 @@ var LoadingSpinnerIcon = (0, import_react16.forwardRef)(function LoadingSpinnerI
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon2, { ref: iconRef, once });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
 });
 
 // src/components/DropdownSelector/index.tsx
-var import_react21 = require("react");
-var import_styled_components16 = __toESM(require("styled-components"));
-var import_utils10 = require("@charcoal-ui/utils");
+var import_react22 = require("react");
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_utils6 = require("@charcoal-ui/utils");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_overlays4 = require("@react-aria/overlays");
-var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_styled_components5 = __toESM(require("styled-components"));
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = (0, import_react17.useRef)(null);
+  const defaultPopoverRef = (0, import_react18.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const {
     popoverProps,
@@ -1152,40 +864,40 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = (0, import_react17.useContext)(ModalBackgroundContext);
+  const modalBackground = (0, import_react18.useContext)(ModalBackgroundContext);
   usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ...underlayProps, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ...underlayProps, style: {
       position: "fixed",
       zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
       inset: 0
     } }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
       props.children,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
-var DropdownPopoverDiv = import_styled_components14.default.div.withConfig({
+var DropdownPopoverDiv = import_styled_components5.default.div.withConfig({
   componentId: "ccl__sc-jwnoy6-0"
 })(["margin:4px 0;list-style:none;overflow:auto;max-height:inherit;background-color:var(--charcoal-background1);border:solid 1px var(--charcoal-border-default);border-radius:8px;padding-top:8px;padding-bottom:8px;"]);
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function DropdownPopover({
   children,
   ...props
 }) {
-  const ref = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const ref = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (props.isOpen && props.value !== void 0) {
       const windowScrollY = window.scrollY;
       const windowScrollX = window.scrollX;
@@ -1194,16 +906,16 @@ function DropdownPopover({
       window.scrollTo(windowScrollX, windowScrollY);
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
-var React12 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 function findPreviewRecursive(children, value) {
-  const childArray = React12.Children.toArray(children);
+  const childArray = React14.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React12.isValidElement(child)) {
+    if (React14.isValidElement(child)) {
       if ("value" in child.props) {
         const childValue = child.props.value;
         if (childValue === value && "children" in child.props) {
@@ -1222,12 +934,12 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react20 = require("react");
-var import_styled_components15 = __toESM(require("styled-components"));
+var import_react21 = require("react");
+var import_styled_components6 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react19 = require("react");
-var MenuListContext = (0, import_react19.createContext)({
+var import_react20 = require("react");
+var MenuListContext = (0, import_react20.createContext)({
   root: void 0,
   value: "",
   propsArray: [],
@@ -1236,13 +948,13 @@ var MenuListContext = (0, import_react19.createContext)({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-var React13 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 function getValuesRecursive(children) {
-  const childArray = React13.Children.toArray(children);
+  const childArray = React15.Children.toArray(children);
   const propsArray = [];
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React13.isValidElement(child)) {
+    if (React15.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
         propsArray.push({
@@ -1259,11 +971,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function MenuList(props) {
-  const root = (0, import_react20.useRef)(null);
-  const propsArray = (0, import_react20.useMemo)(() => getValuesRecursive(props.children), [props.children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MenuListContext.Provider, { value: {
+  const root = (0, import_react21.useRef)(null);
+  const propsArray = (0, import_react21.useMemo)(() => getValuesRecursive(props.children), [props.children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -1272,97 +984,89 @@ function MenuList(props) {
     }
   }, children: props.children }) });
 }
-var StyledUl = import_styled_components15.default.ul.withConfig({
+var StyledUl = import_styled_components6.default.ul.withConfig({
   componentId: "ccl__sc-1y72v02-0"
 })(["padding:0;margin:0;"]);
 
 // src/components/DropdownSelector/index.tsx
-var import_styled7 = require("@charcoal-ui/styled");
+var import_styled3 = require("@charcoal-ui/styled");
 var import_visually_hidden3 = require("@react-aria/visually-hidden");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector({
   onChange,
   ...props
 }) {
-  const triggerRef = (0, import_react21.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const triggerRef = (0, import_react22.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = (0, import_react21.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const isPlaceholder = (0, import_react22.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
   const propsArray = getValuesRecursive(props.children);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden3.useVisuallyHidden)();
-  const handleChange = (0, import_react21.useCallback)((e) => {
+  const handleChange = (0, import_react22.useCallback)((e) => {
     onChange(e.target.value);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
-    props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownFieldLabel, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
+    props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldLabel_default, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
       if (props.disabled === true)
         return;
       setIsOpen(true);
     }, ref: triggerRef, type: "button", $active: isOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonIcon, { name: "16/Menu" })
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownButtonIcon, { name: "16/Menu" })
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuList, { value: props.value, onChange: (v) => {
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuList, { value: props.value, onChange: (v) => {
       onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
-    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AssistiveText, { invalid: props.invalid === true, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = import_styled_components16.default.div.withConfig({
+var DropdownSelectorRoot = import_styled_components7.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_components16.default)(FieldLabel_default).withConfig({
+})(["display:grid;grid-template-columns:1fr;grid-gap:4px;width:100%;", "{cursor:default;opacity:0.32;}"], import_utils6.disabledSelector);
+var DropdownButton = import_styled_components7.default.button.withConfig({
   componentId: "ccl__sc-1vnxmc8-1"
-})(["width:100%;margin-bottom:8px;"]);
-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_styled7.focusVisibleFocusRingCss, ({
+})(["display:grid;grid-template-columns:1fr auto;justify-content:space-between;align-items:center;height:40px;width:100%;box-sizing:border-box;border:none;cursor:pointer;gap:4px;", "{cursor:default;}padding-right:8px;padding-left:8px;background-color:var(--charcoal-surface3);border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " ", "}", ""], import_utils6.disabledSelector, import_styled3.focusVisibleFocusRingCss, ({
   $active
-}) => $active === true ? (0, import_styled_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);}"]), ({
+}) => $active === true ? (0, import_styled_components7.css)(["background-color:var(--charcoal-surface3-press);"]) : (0, import_styled_components7.css)(["&:hover{background-color:var(--charcoal-surface3-hover);}&:active{background-color:var(--charcoal-surface3-press);}"]), ({
   invalid
-}) => 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"
+}) => invalid === true && (0, import_styled_components7.css)(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
+var DropdownButtonText = import_styled_components7.default.span.withConfig({
+  componentId: "ccl__sc-1vnxmc8-2"
 })(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-", ");overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], (p) => p.$isText3 ? "text3" : "text2");
-var DropdownButtonIcon = (0, import_styled_components16.default)(Icon_default).withConfig({
-  componentId: "ccl__sc-1vnxmc8-4"
+var DropdownButtonIcon = (0, import_styled_components7.default)(Icon_default).withConfig({
+  componentId: "ccl__sc-1vnxmc8-3"
 })(["color:var(--charcoal-text2);"]);
-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_components16.css)(["color:var(--charcoal-assertive);"]));
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_styled_components18 = __toESM(require("styled-components"));
+var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/ListItem/index.tsx
-var import_styled_components17 = __toESM(require("styled-components"));
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_styled_components8 = __toESM(require("styled-components"));
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function ListItem(props) {
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemDiv, { ...rest, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ItemDiv, { ...rest, children: props.children }) });
 }
-var StyledLi = import_styled_components17.default.li.withConfig({
+var StyledLi = import_styled_components8.default.li.withConfig({
   componentId: "ccl__sc-p1vs75-0"
 })(["list-style:none;"]);
-var ItemDiv = import_styled_components17.default.div.withConfig({
+var ItemDiv = import_styled_components8.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_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1399,12 +1103,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = (0, import_react22.useContext)(MenuListContext);
-  const setContextValue = (0, import_react22.useCallback)(() => {
+  } = (0, import_react23.useContext)(MenuListContext);
+  const setContextValue = (0, import_react23.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react22.useCallback)((e) => {
+  const handleKeyDown = (0, import_react23.useCallback)((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1439,7 +1143,7 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function MenuItem(props) {
   const {
     children,
@@ -1447,81 +1151,81 @@ function MenuItem(props) {
     ...rest
   } = props;
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ListItem, { ...rest, as, "data-key": props.value, onKeyDown: handleKeyDown, onClick: props.disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": props.disabled, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ListItem, { ...rest, as, "data-key": props.value, onKeyDown: handleKeyDown, onClick: props.disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": props.disabled, children: props.children });
 }
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_react23 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = (0, import_react23.useContext)(MenuListContext);
+  } = (0, import_react24.useContext)(MenuListContext);
   const isSelected = props.value === ctxValue;
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(MenuItem, { ...rest, children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text2ColorIcon, { name: "16/Check" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledSpan, { isSelected, children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(MenuItem, { ...rest, children: [
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2ColorIcon, { name: "16/Check" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledSpan, { isSelected, children: props.children })
   ] });
 }
-var StyledSpan = import_styled_components18.default.span.withConfig({
+var StyledSpan = import_styled_components9.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_components18.default)(Icon_default).withConfig({
+var Text2ColorIcon = (0, import_styled_components9.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_components19 = __toESM(require("styled-components"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_styled_components10 = __toESM(require("styled-components"));
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function MenuItemGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(StyledLi2, { role: "presentation", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TextSpan, { children: props.text }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledUl2, { role: "group", children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(StyledLi2, { role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TextSpan, { children: props.text }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledUl2, { role: "group", children: props.children })
   ] });
 }
-var TextSpan = import_styled_components19.default.span.withConfig({
+var TextSpan = import_styled_components10.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_components19.default.ul.withConfig({
+var StyledUl2 = import_styled_components10.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_components19.default.li.withConfig({
+var StyledLi2 = import_styled_components10.default.li.withConfig({
   componentId: "ccl__sc-1ubjfz7-2"
 })(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_radio = require("@react-stately/radio");
 var import_radio2 = require("@react-aria/radio");
-var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react24 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioContext = (0, import_react24.createContext)(null);
+var import_react25 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var RadioContext = (0, import_react25.createContext)(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react24.useContext)(RadioContext);
+  const state = (0, import_react25.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react25.forwardRef)(function SegmentedControlInner(props, ref) {
-  const ariaRadioGroupProps = (0, import_react25.useMemo)(() => ({
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var SegmentedControl = (0, import_react26.forwardRef)(function SegmentedControlInner(props, ref) {
+  const className = useClassNames("charcoal-segmented-control", props.className);
+  const ariaRadioGroupProps = (0, import_react26.useMemo)(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1532,19 +1236,19 @@ var SegmentedControl = (0, import_react25.forwardRef)(function SegmentedControlI
   const {
     radioGroupProps
   } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react25.useMemo)(() => {
+  const segmentedControlItems = (0, import_react26.useMemo)(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
     } : d);
   }, [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)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = (0, import_react25.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react26.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react25.useRef)(null);
-  const ariaRadioProps = (0, import_react25.useMemo)(() => ({
+  const ref = (0, import_react26.useRef)(null);
+  const ariaRadioProps = (0, import_react26.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1554,180 +1258,103 @@ var Segmented = (props) => {
     isDisabled,
     isSelected
   } = (0, import_radio2.useRadio)(ariaRadioProps, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(SegmentedRoot, { "aria-disabled": isDisabled || state.isReadOnly, checked: isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SegmentedInput, { ...inputProps, ref }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioLabel2, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SegmentedLabelInner, { children: props.children }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
+    props.children
   ] });
 };
-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_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_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_components20.default.div.withConfig({
-  componentId: "ccl__sc-1xmkkqt-3"
-})(["background:transparent;display:flex;align-items:center;height:22px;"]);
-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_react27 = require("react");
-var import_utils11 = require("@react-aria/utils");
+var import_react29 = require("react");
+var import_utils7 = require("@react-aria/utils");
 
-// src/components/CheckboxInput/index.tsx
-var import_react26 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var CheckboxInput = (0, import_react26.forwardRef)(function CheckboxInput2({
+// src/components/Checkbox/CheckboxInput/index.tsx
+var import_react27 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var CheckboxInput = (0, import_react27.forwardRef)(function CheckboxInput2({
   onChange,
   checked,
   invalid,
+  className,
+  rounded,
   ...props
 }, ref) {
-  const handleChange = (0, import_react26.useCallback)((e) => {
+  const handleChange = (0, import_react27.useCallback)((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
-  const classNames = useClassNames("charcoal-checkbox-input__root", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: classNames, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("input", { ref, className: "charcoal-checkbox-input__input", type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, ...props }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "charcoal-checkbox-input__overlay", "aria-hidden": true, "data-checked": checked, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
+  const classNames = useClassNames("charcoal-checkbox-input", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
+});
+var CheckboxInput_default = (0, import_react27.memo)(CheckboxInput);
+
+// src/components/Checkbox/CheckboxWithLabel.tsx
+var import_react28 = __toESM(require("react"));
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var CheckboxWithLabel = import_react28.default.memo(function CheckboxWithLabel2({
+  className,
+  children,
+  input,
+  id,
+  disabled
+}) {
+  const classNames = useClassNames("charcoal-checkbox__label", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
+    input,
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
-var CheckboxInput_default = (0, import_react26.memo)(CheckboxInput);
 
 // src/components/Checkbox/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Checkbox = (0, import_react27.forwardRef)(function CheckboxInner({
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Checkbox = (0, import_react29.forwardRef)(function Checkbox2({
   disabled,
   className,
   id,
   children,
   ...props
 }, ref) {
-  const classNames = useClassNames("charcoal-checkbox__label", className);
-  const htmlId = (0, import_utils11.useId)(id);
-  const input = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CheckboxInput_default, { ...props, id: htmlId, disabled, ref });
-  if (children === void 0) {
+  const htmlId = (0, import_utils7.useId)(id);
+  const noChildren = children === void 0;
+  const input = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { htmlFor: htmlId, "aria-disabled": disabled, className: classNames, children: [
-    input,
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "charcoal-checkbox__text", children })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Checkbox_default = (0, import_react27.memo)(Checkbox);
+var Checkbox_default = (0, import_react29.memo)(Checkbox);
 
 // src/components/TagItem/index.tsx
-var import_react28 = require("react");
-var import_utils12 = require("@react-aria/utils");
-var import_styled_components21 = __toESM(require("styled-components"));
-var import_utils13 = require("@charcoal-ui/utils");
-var import_button = require("@react-aria/button");
-var import_styled8 = require("@charcoal-ui/styled");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var sizeMap = {
-  S: 32,
-  M: 40
-};
-var TagItem = (0, import_react28.forwardRef)(function TagItemInner({
+var import_react30 = require("react");
+var import_utils8 = require("@react-aria/utils");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var TagItem = (0, import_react30.forwardRef)(function TagItemInner({
+  as,
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
   bgImage,
   size = "M",
-  disabled,
   status = "default",
-  className,
   ...props
 }, _ref) {
-  const ref = (0, import_utils12.useObjectRef)(_ref);
-  const ariaButtonProps = (0, import_react28.useMemo)(() => ({
-    elementType: "a",
-    isDisabled: disabled,
-    ...props
-  }), [disabled, props]);
-  const {
-    buttonProps
-  } = (0, import_button.useButton)(ariaButtonProps, ref);
+  const ref = (0, import_utils8.useObjectRef)(_ref);
   const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TagItemRoot, { ref, size: hasTranslatedLabel ? "M" : size, status, ...buttonProps, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Background, { bgColor, bgImage, status }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Inner, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
-        hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslatedLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label3, { children: translatedLabel }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label3, { children: label })
-      ] }),
-      status === "active" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: "16/Remove" })
-    ] })
+  const className = useClassNames("charcoal-tag-item", "charcoal-tag-item__bg", props.className);
+  const bgVariant = bgImage !== void 0 && bgImage.length > 0 ? "image" : "color";
+  const bg = bgVariant === "color" ? bgColor : `url(${bgImage ?? ""})`;
+  const Component = (0, import_react30.useMemo)(() => as ?? "button", [as]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
+    "--charcoal-tag-item-bg": bg
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
+      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+    ] }),
+    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: "16/Remove" })
   ] });
 });
-var TagItem_default = (0, import_react28.memo)(TagItem);
-var horizontalPadding = ({
-  left,
-  right
-}) => (0, import_styled_components21.css)(["padding-right:", ";padding-left:", ";"], (0, import_utils13.px)(right), (0, import_utils13.px)(left));
-var tagItemRootSize = (size) => {
-  switch (size) {
-    case "M":
-      return horizontalPadding({
-        left: 24,
-        right: 24
-      });
-    case "S":
-      return horizontalPadding({
-        left: 16,
-        right: 16
-      });
-  }
-};
-var activeTagItemRoot = horizontalPadding({
-  left: 16,
-  right: 8
-});
-var TagItemRoot = import_styled_components21.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
-}) => sizeMap[size], ({
-  size,
-  status
-}) => status !== "active" && tagItemRootSize(size), ({
-  status
-}) => status === "active" && activeTagItemRoot, ({
-  status
-}) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)", import_styled8.focusVisibleFocusRingCss);
-var Background = import_styled_components21.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_components21.css)(["background-color:var(--charcoal-surface3);"]), ({
-  bgImage
-}) => bgImage !== void 0 && (0, import_styled_components21.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_components21.default.div.withConfig({
-  componentId: "ccl__sc-11j9pu2-2"
-})(["display:inline-flex;gap:8px;align-items:center;z-index:2;"]);
-var labelCSS = (0, import_styled_components21.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_components21.css)(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
-var LabelWrapper = import_styled_components21.default.div.withConfig({
-  componentId: "ccl__sc-11j9pu2-3"
-})(["", ""], ({
-  isTranslate
-}) => isTranslate ?? false ? translateLabelCSS : labelCSS);
-var Label3 = import_styled_components21.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_components21.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;}"]);
+var TagItem_default = (0, import_react30.memo)(TagItem);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
@@ -1746,9 +1373,8 @@ var TranslatedLabel = import_styled_components21.default.div.withConfig({
   ModalAlign,
   ModalBody,
   ModalButtons,
+  ModalCloseButton,
   ModalHeader,
-  MultiSelect,
-  MultiSelectGroup,
   OverlayProvider,
   Radio,
   RadioGroup,