@charcoal-ui/react 4.0.0-beta.0 → 4.0.0-beta.11

package/dist/index.cjs.js

@@ -30,7 +30,6 @@ __export(src_exports, {
   CharcoalProvider: () => CharcoalProvider,
   Checkbox: () => Checkbox_default,
   Clickable: () => Clickable_default,
-  ComponentAbstraction: () => ComponentAbstraction,
   DropdownMenuItem: () => DropdownMenuItem,
   DropdownSelector: () => DropdownSelector,
   Icon: () => Icon_default,
@@ -42,72 +41,38 @@ __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,
   TextArea: () => TextArea_default,
-  TextField: () => TextField_default,
-  useComponentAbstraction: () => useComponentAbstraction
+  TextField: () => TextField_default
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/core/ComponentAbstraction.tsx
-var import_react = require("react");
-var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var DefaultLink = React.forwardRef(function DefaultLink2({
-  to,
-  children,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: to, ref, ...rest, children });
-});
-var DefaultValue = {
-  Link: DefaultLink
-};
-var ComponentAbstractionContext = React.createContext(DefaultValue);
-function ComponentAbstraction({
-  children,
-  components
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComponentAbstractionContext.Provider, { value: {
-    ...DefaultValue,
-    ...components
-  }, children });
-}
-function useComponentAbstraction() {
-  return (0, import_react.useContext)(ComponentAbstractionContext);
-}
-
 // src/core/SSRProvider.tsx
 var import_ssr = require("@react-aria/ssr");
+var import_react = require("react");
+function isReactVersionOver(minVersion) {
+  const reactMajorVersion = parseInt(import_react.version.split(".")[0], 10);
+  return Number.isFinite(reactMajorVersion) ? reactMajorVersion >= minVersion : false;
+}
+var SSRProvider = isReactVersionOver(18) ? import_react.Fragment : import_ssr.SSRProvider;
 
 // src/core/OverlayProvider.tsx
 var import_overlays = require("@react-aria/overlays");
 
 // src/core/CharcoalProvider.tsx
-var import_styled_components = require("styled-components");
-var import_styled = require("@charcoal-ui/styled");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 function CharcoalProvider({
-  themeMap,
-  defaultTheme = themeMap[":root"],
-  components = {},
-  injectTokens = true,
-  children,
-  background
+  children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ssr.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 }) })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SSRProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_overlays.OverlayProvider, { children }) });
 }
 
 // src/components/Button/index.tsx
@@ -115,123 +80,58 @@ var import_react3 = 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]);
+function useClassNames(...classNames) {
+  return (0, import_react2.useMemo)(() => classNames.filter((v) => v).join(" "), [classNames]);
 }
 
 // src/components/Button/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Button = (0, import_react3.forwardRef)(function Button2({
   variant,
   fullWidth,
   size,
   className,
-  as,
+  component,
   isActive,
   ...props
 }, ref) {
-  const Component = (0, import_react3.useMemo)(() => as ?? "button", [as]);
+  const Component = (0, import_react3.useMemo)(() => component ?? "button", [component]);
   const classNames = useClassNames("charcoal-button", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
 });
 var Button_default = Button;
 
 // src/components/Clickable/index.tsx
-var React3 = __toESM(require("react"));
-var import_styled_components2 = __toESM(require("styled-components"));
-var import_utils = require("@charcoal-ui/utils");
-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 import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Clickable = (0, import_react4.forwardRef)(function Clickable2({
+  component,
+  ...props
+}, ref) {
+  const className = useClassNames("charcoal-clickable", props.className);
+  const Component = (0, import_react4.useMemo)(() => component ?? "button", [component]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, ref, className });
 });
 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_jsx_runtime5 = require("react/jsx-runtime");
-var IconButton = (0, import_react4.forwardRef)(function IconButtonInner({
+var import_react5 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var IconButton = (0, import_react5.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_react5.useMemo)(() => as ?? "button", [as]);
+  const classNames = useClassNames("charcoal-icon-button", rest.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...rest, as: componentAs, ref, className: classNames, "data-size": size, "data-active": isActive, "data-variant": variant, children: /* @__PURE__ */ (0, import_jsx_runtime4.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) {
@@ -254,17 +154,47 @@ 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 import_warning = __toESM(require("warning"));
-var import_styled3 = require("@charcoal-ui/styled");
+
+// src/components/Radio/RadioGroupContext.ts
+var React4 = __toESM(require("react"));
+var RadioGroupContext = React4.createContext({
+  name: void 0,
+  selected: void 0,
+  disabled: false,
+  readonly: false,
+  invalid: false,
+  onChange() {
+    throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?");
+  }
+});
+
+// src/components/Radio/RadioInput/index.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var RadioInput = (0, import_react6.forwardRef)(function RadioInput2({
+  onChange,
+  invalid,
+  className,
+  ...props
+}, ref) {
+  const handleChange = (0, import_react6.useCallback)((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.value);
+  }, [onChange]);
+  const classNames = useClassNames("charcoal-radio-input", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { className: classNames, ref, type: "radio", onChange: handleChange, "aria-invalid": invalid, ...props });
+});
+var RadioInput_default = (0, import_react6.memo)(RadioInput);
+
+// src/components/Radio/index.tsx
 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,
@@ -273,7 +203,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> ?`
@@ -281,41 +212,17 @@ 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) => {
-    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)(RadioInput_default, { name, value, checked: isSelected, "aria-invalid": invalid, onChange, 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({
-  name: void 0,
-  selected: void 0,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  onChange() {
-    throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?");
-  }
-});
-function RadioGroup({
-  className,
+var Radio_default = (0, import_react7.memo)(Radio);
+
+// src/components/Radio/RadioGroup/index.tsx
+var import_react8 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react8.forwardRef)(function RadioGroupInner({
   value,
   label,
   name,
@@ -323,207 +230,93 @@ function RadioGroup({
   disabled,
   readonly,
   invalid,
-  children
-}) {
-  const handleChange = (0, import_react5.useCallback)((next) => {
+  children,
+  "aria-orientation": ariaOrientation = "vertical",
+  ...props
+}, ref) {
+  const classNames = useClassNames("charcoal-radio-group", props.className);
+  const handleChange = (0, import_react8.useCallback)((next) => {
     onChange(next);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioGroupContext.Provider, { value: {
+  const contextValue = (0, import_react8.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_runtime7.jsx)(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { role: "radiogroup", "aria-disabled": disabled, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": props["aria-labelledby"], "aria-orientation": ariaOrientation, className: classNames, ref, children }) });
 });
 
-// src/components/MultiSelect/index.tsx
-var import_styled4 = require("@charcoal-ui/styled");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react7.forwardRef)(function MultiSelectInner({
-  value,
-  disabled = false,
+// src/components/Switch/index.tsx
+var import_react10 = require("react");
+var import_utils = require("@react-aria/utils");
+
+// src/components/Switch/SwitchInput/index.tsx
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SwitchInput = (0, import_react9.forwardRef)(function SwitchInput2({
   onChange,
-  variant = "default",
   className,
-  children
+  ...props
 }, 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_runtime7.jsxs)(MultiSelectRoot, { "aria-disabled": isDisabled, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSelectInput, { ...{
-      name,
-      value,
-      invalid
-    }, checked: isSelected, disabled: isDisabled, onChange: handleChange, overlay: variant === "overlay", "aria-invalid": invalid, ref }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSelectInputOverlay, { overlay: variant === "overlay", invalid, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
-    Boolean(children) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSelectLabel, { children })
-  ] });
+  const handleChange = (0, import_react9.useCallback)((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.checked);
+  }, [onChange]);
+  props.children;
+  const classNames = useClassNames("charcoal-switch-input", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
 });
-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({
+var SwitchInput_default = SwitchInput;
+
+// src/components/Switch/SwitchWithLabel.tsx
+var React5 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SwitchWithLabel = React5.memo(function SwitchWithLabel2({
+  children,
   className,
-  name,
-  label,
-  selected,
-  onChange,
-  disabled = false,
-  readonly = false,
-  invalid = false,
-  children
+  disabled,
+  id,
+  input
 }) {
-  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_runtime7.jsx)(MultiSelectGroupContext.Provider, { value: {
-    name,
-    selected: Array.from(new Set(selected)),
-    disabled,
-    readonly,
-    invalid,
-    onChange: handleChange
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, "aria-label": label, "data-testid": "SelectGroup", children }) });
-}
+  const classNames = useClassNames("charcoal-switch__label", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
+    input,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "charcoal-switch__label_div", 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_runtime8 = 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_runtime8.jsxs)(Label, { className, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SwitchInput, { ...rest, ref }),
-    "children" in props ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LabelInner, { children: props.children }) : void 0
-  ] });
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Switch = (0, import_react10.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_runtime10.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_runtime10.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_react10.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 React6 = __toESM(require("react"));
-var import_styled_components8 = __toESM(require("styled-components"));
+var import_react13 = require("react");
+var React7 = __toESM(require("react"));
 
 // src/components/FieldLabel/index.tsx
-var React5 = __toESM(require("react"));
-var import_styled_components7 = __toESM(require("styled-components"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var FieldLabel = React5.forwardRef(function FieldLabel2({
+var React6 = __toESM(require("react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FieldLabel = React6.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -532,30 +325,16 @@ var FieldLabel = React5.forwardRef(function FieldLabel2({
   subLabel,
   ...labelProps
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FieldLabelWrapper, { style, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label2, { ref, ...labelProps, children: label }),
-    required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RequiredText, { children: requiredText }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SubLabelClickable, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: subLabel }) })
+  const classNames = useClassNames("charcoal-field-label-root", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style, className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
+    required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "charcoal-field-label-required-text", children: requiredText }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ (0, import_jsx_runtime11.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) {
@@ -573,9 +352,9 @@ function countCodePointsInString(string) {
 }
 
 // src/components/TextField/useFocusWithClick.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 function useFocusWithClick(containerRef, inputRef) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const el = containerRef.current;
     if (el) {
       const handleDown = (e) => {
@@ -592,148 +371,124 @@ function useFocusWithClick(containerRef, inputRef) {
 }
 
 // src/components/TextField/index.tsx
-var import_utils4 = require("@react-aria/utils");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var TextField = React6.forwardRef(function SingleLineTextFieldInner({
+var import_utils2 = require("@react-aria/utils");
+
+// src/_lib/createDivComponent.tsx
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function createDivComponent(mainClassName) {
+  return (0, import_react12.forwardRef)(function DivComponent({
+    className,
+    ...props
+  }, ref) {
+    const classNames = useClassNames(mainClassName, className);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: classNames, ref, ...props });
+  });
+}
+
+// src/components/TextField/AssistiveText/index.tsx
+var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
+
+// src/components/TextField/index.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var TextField = React7.forwardRef(function SingleLineTextFieldInner({
+  assistiveText,
+  className,
+  disabled = false,
+  label = "",
+  maxLength,
   onChange,
+  prefix = null,
+  required,
+  requiredText,
+  showCount = false,
+  showLabel = false,
+  subLabel,
+  suffix = null,
+  type = "text",
+  invalid,
+  value,
+  getCount = countCodePointsInString,
   ...props
-}, forwardRef18) {
-  const {
-    className,
-    showLabel = false,
-    showCount = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    assistiveText,
-    maxLength,
-    prefix = null,
-    suffix = null,
-    ...restProps
-  } = props;
+}, forwardRef23) {
+  const inputRef = (0, import_react13.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_react13.useState)(getCount(value ?? ""));
+  const handleChange = (0, import_react13.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,
-    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);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(StyledInputContainer, { ref: containerRef, invalid, "aria-disabled": disabled === true ? true : void 0, hasPrefix: prefix != null, hasSuffix: suffix != null || showCount, children: [
-      prefix && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PrefixContainer, { children: prefix }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledInput, { ref: mergeRefs(forwardRef18, ariaRef), invalid, ...inputProps }),
-      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SuffixContainer, { children: [
+    setCount(count2);
+    onChange?.(value2);
+  }, [getCount, maxLength, onChange]);
+  (0, import_react13.useEffect)(() => {
+    setCount(getCount(value ?? ""));
+  }, [getCount, value]);
+  const containerRef = (0, import_react13.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;
+  const classNames = useClassNames("charcoal-text-field-root");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "charcoal-text-field-prefix", children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: (0, import_utils2.mergeRefs)(forwardRef23, inputRef), type, value, ...props }),
+      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "charcoal-text-field-suffix", children: [
         suffix,
-        showCount && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
-var TextFieldRoot = import_styled_components8.default.div.withConfig({
-  componentId: "ccl__sc-3dd0tt-0"
-})(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
-  opacity: p.theme.elementEffect.disabled.opacity
-});
-var TextFieldLabel = (0, import_styled_components8.default)(FieldLabel_default).withConfig({
-  componentId: "ccl__sc-3dd0tt-1"
-})(["margin-bottom:8px;"]);
-var StyledInputContainer = import_styled_components8.default.div.withConfig({
-  componentId: "ccl__sc-3dd0tt-2"
-})(["display:grid;grid-template-columns:", ";height:40px;transition:0.2s background-color,0.2s box-shadow;color:var(--charcoal-text2);background-color:var(--charcoal-surface3);border-radius:4px;gap:4px;padding:0 8px;line-height:22px;font-size:14px;:not(:disabled):not([aria-disabled]):hover,[aria-disabled='false']:hover{background-color:var(--charcoal-surface3-hover);}:focus-within{outline:none;box-shadow:0 0 0 4px ", ";}", ""], (p) => [p.hasPrefix && "auto", "1fr", p.hasSuffix && "auto"].filter(Boolean).join(" "), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && (0, import_styled_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"
-})(["display:flex;align-items:center;gap:8px;"]);
-var StyledInput = import_styled_components8.default.input.withConfig({
-  componentId: "ccl__sc-3dd0tt-5"
-})(["border:none;box-sizing:border-box;outline:none;font-family:inherit;transform-origin:top left;transform:scale(0.875);width:calc(100% / 0.875);height:calc(100% / 0.875);font-size:calc(14px / 0.875);line-height:calc(22px / 0.875);padding-left:0;padding-right:0;border-radius:calc(4px / 0.875);appearance:none;background:transparent;color:var(--charcoal-text2);&::placeholder{color:var(--charcoal-text3);}"]);
-var SingleLineCounter = import_styled_components8.default.span.withConfig({
-  componentId: "ccl__sc-3dd0tt-6"
-})(["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`})`);
 
 // 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_jsx_runtime11 = require("react/jsx-runtime");
-var TextArea = (0, import_react11.forwardRef)(function TextAreaInner({
+var import_react14 = require("react");
+var import_utils3 = require("@react-aria/utils");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var TextArea = (0, import_react14.forwardRef)(function TextAreaInner({
   onChange,
+  className,
+  value,
+  showCount = false,
+  showLabel = false,
+  label = "",
+  requiredText,
+  subLabel,
+  disabled = false,
+  required,
+  assistiveText,
+  maxLength,
+  autoHeight = false,
+  rows: initialRows = 4,
+  invalid,
+  getCount = countCodePointsInString,
   ...props
-}, forwardRef18) {
-  const {
-    className,
-    showCount = false,
-    showLabel = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    assistiveText,
-    maxLength,
-    autoHeight = false,
-    rows: initialRows = 4,
-    ...restProps
-  } = props;
+}, forwardRef23) {
   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_react14.useRef)(null);
+  const [count, setCount] = (0, import_react14.useState)(getCount(value ?? ""));
+  const [rows, setRows] = (0, import_react14.useState)(initialRows);
+  const syncHeight = (0, import_react14.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_react14.useCallback)((e) => {
+    const value2 = e.target.value;
+    const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
       return;
     }
@@ -743,110 +498,67 @@ 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,
-    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_react14.useEffect)(() => {
+    setCount(getCount(value ?? ""));
+  }, [getCount, value]);
+  (0, import_react14.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);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TextFieldRoot2, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(StyledTextareaContainer, { ref: containerRef, invalid, rows: showCount ? rows + 1 : rows, "aria-disabled": disabled === true ? "true" : void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledTextarea, { ref: mergeRefs(textareaRef, forwardRef18, ariaRef), rows, noBottomPadding: showCount, ...inputProps }),
-      showCount && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+  const containerRef = (0, import_react14.useRef)(null);
+  useFocusWithClick(containerRef, textareaRef);
+  const textAreaId = (0, import_utils3.useId)(props.id);
+  const describedbyId = (0, import_utils3.useId)();
+  const labelledbyId = (0, import_utils3.useId)();
+  const classNames = useClassNames("charcoal-text-area-root", className);
+  const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
+      "--charcoal-text-area-rows": `${showCount ? rows + 1 : rows}`
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef23, textareaRef), rows, value, disabled, ...props }),
+      showCount && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "charcoal-text-area-counter", 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_runtime14.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
-var TextFieldRoot2 = import_styled_components9.default.div.withConfig({
-  componentId: "ccl__sc-58waht-0"
-})(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
-  opacity: p.theme.elementEffect.disabled.opacity
-});
-var StyledTextareaContainer = import_styled_components9.default.div.withConfig({
-  componentId: "ccl__sc-58waht-1"
-})(["position:relative;overflow:hidden;color:var(--charcoal-text2);background-color:var(--charcoal-surface3);border-radius:4px;transition:0.2s background-color,0.2s box-shadow;", ";:not([aria-disabled]):hover,[aria-disabled='false']:hover{background-color:var(--charcoal-surface3-hover);}:focus-within{outline:none;box-shadow:0 0 0 4px ", ";}", ""], ({
-  rows
-}) => (0, import_styled_components9.css)(["height:calc(22px * ", " + 18px);"], rows), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && (0, import_styled_components9.css)(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
-var StyledTextarea = import_styled_components9.default.textarea.withConfig({
-  componentId: "ccl__sc-58waht-2"
-})(["border:none;outline:none;resize:none;font-family:inherit;color:inherit;box-sizing:border-box;transform-origin:top left;transform:scale(0.875);width:calc(100% / 0.875);font-size:calc(14px / 0.875);line-height:calc(22px / 0.875);padding:calc(9px / 0.875) calc(8px / 0.875) ", ";", ";appearance:none;background:none;&::placeholder{color:var(--charcoal-text3);}"], (p) => p.noBottomPadding ? 0 : "", ({
-  rows = 1,
-  noBottomPadding
-}) => (0, import_styled_components9.css)(["height:calc(22px / 0.875 * ", " + ", "px);"], rows, noBottomPadding ? 9 : 20));
-var MultiLineCounter = import_styled_components9.default.span.withConfig({
-  componentId: "ccl__sc-58waht-3"
-})(["position:absolute;bottom:9px;right:8px;line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
 
 // src/components/Icon/index.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_icons = require("@charcoal-ui/icons");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Icon = React7.forwardRef(function IconInner({
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Icon = React8.forwardRef(function IconInner({
   name,
   scale,
   unsafeNonGuidelineScale,
   className,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.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_react13 = require("react");
-var React11 = __toESM(require("react"));
+var import_react17 = require("react");
+var React12 = __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_react_spring = require("react-spring");
+var import_utils4 = 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_react15 = require("react");
 var import_dialog = require("@react-aria/dialog");
 
-// ../foundation/src/grid.ts
-var COLUMN_UNIT = 80;
-var GUTTER_UNIT = 24;
-function columnSystem(span, column, gutter) {
-  return span * column + (span - 1) * gutter;
-}
-
-// src/components/Modal/Dialog/index.tsx
-var import_utils6 = require("@charcoal-ui/utils");
-var import_react_spring = require("react-spring");
-
 // src/_lib/useForwardedRef.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 function useForwardedRef(ref) {
-  const innerRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const innerRef = React9.useRef(null);
+  React9.useEffect(() => {
     if (!ref)
       return;
     if (typeof ref === "function") {
@@ -859,44 +571,49 @@ 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, forwardRef18) {
-  const ref = useForwardedRef(forwardRef18);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Dialog = (0, import_react15.forwardRef)(function Dialog2({
+  size,
+  bottomSheet,
+  className,
+  ...props
+}, forwardRef23) {
+  const ref = useForwardedRef(forwardRef23);
   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_runtime16.jsx)("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, "data-size": size, 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 columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
-    }
-    case "M": {
-      return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
-    }
-    case "L": {
-      return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + 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 React10 = __toESM(require("react"));
+var ModalBackgroundContext = React10.createContext(null);
 
 // src/components/Modal/useCustomModalOverlay.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
+
+// src/components/DropdownSelector/Popover/usePreventScroll.tsx
+var import_react16 = require("react");
+function usePreventScroll(element, isOpen) {
+  (0, import_react16.useEffect)(() => {
+    if (isOpen && element) {
+      const defaultPaddingRight = element.style.paddingRight;
+      const defaultOverflow = element.style.overflow;
+      element.style.paddingRight = `${window.innerWidth - element.clientWidth}px`;
+      element.style.overflow = "hidden";
+      return () => {
+        element.style.paddingRight = defaultPaddingRight;
+        element.style.overflow = defaultOverflow;
+      };
+    }
+  }, [element, isOpen]);
+}
+
+// src/components/Modal/useCustomModalOverlay.tsx
 function useCharcoalModalOverlay(props, state, ref) {
   const {
     overlayProps,
@@ -907,11 +624,9 @@ function useCharcoalModalOverlay(props, state, ref) {
     onClose: state.onClose,
     shouldCloseOnInteractOutside: () => false
   }, ref);
-  (0, import_overlays2.usePreventScroll)({
-    isDisabled: !state.isOpen
-  });
+  usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen);
   (0, import_overlays2.useOverlayFocusContain)();
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (state.isOpen && ref.current) {
       return (0, import_overlays2.ariaHideOutside)([ref.current]);
     }
@@ -921,11 +636,24 @@ function useCharcoalModalOverlay(props, state, ref) {
     underlayProps
   };
 }
+function useWindowWidth() {
+  const [width, setWidth] = React11.useState(window.innerWidth);
+  React11.useEffect(() => {
+    const handleResize = () => {
+      setWidth(window.innerWidth);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  });
+  return width;
+}
 
 // src/components/Modal/index.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react13.forwardRef)(function ModalInner({
+var Modal = (0, import_react17.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -938,9 +666,10 @@ var Modal = (0, import_react13.forwardRef)(function ModalInner({
     isDismissable,
     onClose,
     className,
-    isOpen = false
+    isOpen = false,
+    closeButtonAriaLabel = "Close"
   } = props;
-  const ref = (0, import_utils8.useObjectRef)(external);
+  const ref = (0, import_utils4.useObjectRef)(external);
   const {
     modalProps,
     underlayProps
@@ -951,11 +680,10 @@ var Modal = (0, import_react13.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 isMobile = useWindowWidth() < 744;
   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)",
@@ -975,13 +703,13 @@ var Modal = (0, import_react13.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 = React12.useRef(null);
+  const handleClick = React12.useCallback((e) => {
     if (e.currentTarget === e.target) {
       onClose();
     }
@@ -990,12 +718,15 @@ var Modal = (0, import_react13.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_runtime17.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsxs)(ModalContext.Provider, { value: {
     titleProps: {},
     title,
     close: onClose,
@@ -1003,96 +734,54 @@ var Modal = (0, import_react13.forwardRef)(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalCrossButton, { size: "S", icon: "24/Close", onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
-var Modal_default = (0, import_react13.memo)(Modal);
-var ModalContext = React11.createContext({
+var AnimatedDialog = (0, import_react_spring.animated)(Dialog);
+var Modal_default = (0, import_react17.memo)(Modal);
+var ModalContext = React12.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_react13.useContext)(ModalContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
+function ModalCloseButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.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_react14 = require("react");
-var import_utils9 = require("@charcoal-ui/utils");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react14.useContext)(ModalContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalHeaderRoot, { $bottomSheet: modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledModalTitle, {}) });
+  const modalCtx = (0, import_react18.useContext)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
 }
-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;"]);
+var ModalAlign = createDivComponent("charcoal-modal-align");
+var ModalBody = createDivComponent("charcoal-modal-body");
+var ModalButtons = createDivComponent("charcoal-modal-buttons");
 
 // src/components/LoadingSpinner/index.tsx
-var import_react15 = require("react");
-var import_styled_components13 = __toESM(require("styled-components"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react15.forwardRef)(function LoadingSpinnerInner({
+var import_react19 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var LoadingSpinner = (0, import_react19.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_runtime19.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_runtime19.jsx)(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = (0, import_react15.memo)(LoadingSpinner);
-var LoadingSpinnerRoot = import_styled_components13.default.div.attrs({
-  role: "progressbar"
-}).withConfig({
-  componentId: "ccl__sc-1id6yz4-0"
-})(["box-sizing:content-box;margin:auto;padding:", "px;border-radius:8px;font-size:", "px;width:", "px;height:", "px;opacity:0.84;color:var(--charcoal-text4);background-color:", ";"], (props) => props.padding, (props) => props.size, (props) => props.size, (props) => props.size, ({
-  transparent
-}) => `var(--charcoal-${transparent ? "transparent" : "background1"})`);
-var scaleOut = (0, import_styled_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_react15.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinner_default = (0, import_react19.memo)(LoadingSpinner);
+var LoadingSpinnerIcon = (0, import_react19.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -1102,44 +791,22 @@ var LoadingSpinnerIcon = (0, import_react15.forwardRef)(function LoadingSpinnerI
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon2, { ref: iconRef, once });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.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_react24 = require("react");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react18 = require("react");
+var import_react21 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react17 = require("react");
+var import_react20 = require("react");
 var import_overlays4 = require("@react-aria/overlays");
-var import_styled_components14 = __toESM(require("styled-components"));
-
-// src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react16 = require("react");
-function usePreventScroll2(element, isOpen) {
-  (0, import_react16.useEffect)(() => {
-    if (isOpen && element) {
-      const defaultPaddingRight = element.style.paddingRight;
-      const defaultOverflow = element.style.overflow;
-      element.style.paddingRight = `${window.innerWidth - element.clientWidth}px`;
-      element.style.overflow = "hidden";
-      return () => {
-        element.style.paddingRight = defaultPaddingRight;
-        element.style.overflow = defaultOverflow;
-      };
-    }
-  }, [element, isOpen]);
-}
-
-// src/components/DropdownSelector/Popover/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = (0, import_react17.useRef)(null);
+  const defaultPopoverRef = (0, import_react20.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const {
     popoverProps,
@@ -1155,58 +822,64 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = (0, import_react17.useContext)(ModalBackgroundContext);
-  usePreventScroll2(modalBackground, props.isOpen);
+  const modalBackground = (0, import_react20.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_runtime20.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.jsxs)("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
       props.children,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
-var DropdownPopoverDiv = import_styled_components14.default.div.withConfig({
-  componentId: "ccl__sc-jwnoy6-0"
-})(["margin:4px 0;list-style:none;overflow:auto;max-height:inherit;background-color:var(--charcoal-background1);border:solid 1px var(--charcoal-border-default);border-radius:8px;padding-top:8px;padding-bottom:8px;"]);
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function DropdownPopover({
   children,
   ...props
 }) {
-  const ref = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const ref = (0, import_react21.useRef)(null);
+  (0, import_react21.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)(() => {
-    if (props.isOpen && props.value !== void 0) {
-      const windowScrollY = window.scrollY;
-      const windowScrollX = window.scrollX;
-      const selectedElement = document.querySelector(`[data-key="${props.value.toString()}"]`);
-      selectedElement?.focus();
-      window.scrollTo(windowScrollX, windowScrollY);
+  (0, import_react21.useEffect)(() => {
+    if (props.isOpen) {
+      if (props.value !== void 0 && props.value !== "") {
+        const windowScrollY = window.scrollY;
+        const windowScrollX = window.scrollX;
+        const selectedElement = document.querySelector(`[data-key="${props.value.toString()}"]`);
+        selectedElement?.focus();
+        window.scrollTo(windowScrollX, windowScrollY);
+      } else {
+        const el = ref.current?.querySelector("[role='option']");
+        if (el instanceof HTMLElement) {
+          el.focus();
+        }
+      }
     }
   }, [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_runtime21.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 React13 = __toESM(require("react"));
 function findPreviewRecursive(children, value) {
-  const childArray = React12.Children.toArray(children);
+  const childArray = React13.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React12.isValidElement(child)) {
+    if (React13.isValidElement(child)) {
       if ("value" in child.props) {
         const childValue = child.props.value;
         if (childValue === value && "children" in child.props) {
@@ -1225,12 +898,11 @@ 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_react23 = require("react");
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react19 = require("react");
-var MenuListContext = (0, import_react19.createContext)({
+var import_react22 = require("react");
+var MenuListContext = (0, import_react22.createContext)({
   root: void 0,
   value: "",
   propsArray: [],
@@ -1239,13 +911,13 @@ var MenuListContext = (0, import_react19.createContext)({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 function getValuesRecursive(children) {
-  const childArray = React13.Children.toArray(children);
+  const childArray = React14.Children.toArray(children);
   const propsArray = [];
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React13.isValidElement(child)) {
+    if (React14.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
         propsArray.push({
@@ -1262,11 +934,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime22 = 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_react23.useRef)(null);
+  const propsArray = (0, import_react23.useMemo)(() => getValuesRecursive(props.children), [props.children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -1275,91 +947,70 @@ function MenuList(props) {
     }
   }, children: props.children }) });
 }
-var StyledUl = import_styled_components15.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_visually_hidden3 = require("@react-aria/visually-hidden");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var defaultRequiredText = "*\u5FC5\u9808";
-function DropdownSelector(props) {
-  const triggerRef = (0, import_react21.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+var import_utils5 = require("@react-aria/utils");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function DropdownSelector({
+  onChange,
+  showLabel = false,
+  ...props
+}) {
+  const triggerRef = (0, import_react24.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react24.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_react24.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
   const propsArray = getValuesRecursive(props.children);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden3.useVisuallyHidden)();
-  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, 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);
+  const handleChange = (0, import_react24.useCallback)((e) => {
+    onChange(e.target.value);
+  }, [onChange]);
+  const labelId = (0, import_utils5.useId)();
+  const describedbyId = (0, import_utils5.useId)();
+  const classNames = useClassNames("charcoal-dropdown-selector-root", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: classNames, "aria-disabled": props.disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsxs)("button", { className: "charcoal-dropdown-selector-button", "aria-labelledby": labelId, "aria-invalid": props.invalid, "aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0, 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" })
+    }, ref: triggerRef, type: "button", "data-active": isOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", 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) => {
-      props.onChange(v);
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = import_styled_components16.default.div.withConfig({
-  componentId: "ccl__sc-1vnxmc8-0"
-})(["display:inline-block;width:100%;", "{cursor:default;opacity:0.32;}"], import_utils10.disabledSelector);
-var DropdownFieldLabel = (0, import_styled_components16.default)(FieldLabel_default).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, ({
-  $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);}"]), ({
-  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"
-})(["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"
-})(["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"));
+
+// src/components/DropdownSelector/MenuItem/index.tsx
+var import_react27 = require("react");
 
 // src/components/DropdownSelector/ListItem/index.tsx
-var import_styled_components17 = __toESM(require("styled-components"));
-var import_jsx_runtime21 = 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 }) });
-}
-var StyledLi = import_styled_components17.default.li.withConfig({
-  componentId: "ccl__sc-p1vs75-0"
-})(["list-style:none;"]);
-var ItemDiv = import_styled_components17.default.div.withConfig({
-  componentId: "ccl__sc-p1vs75-1"
-})(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;transition:background-color 0.2s;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{&:not(disabled):not([aria-disabled='true']){background-color:var(--charcoal-surface3);}}"]);
+var import_react25 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ListItem = (0, import_react25.forwardRef)(function ListItem2({
+  as,
+  className,
+  ...props
+}, ref) {
+  const Component = (0, import_react25.useMemo)(() => as ?? "li", [as]);
+  const classNames = useClassNames("charcoal-list-item", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Component, { className: classNames, ref, ...props });
+});
+var ListItem_default = ListItem;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-var import_react22 = require("react");
+var import_react26 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1396,12 +1047,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = (0, import_react22.useContext)(MenuListContext);
-  const setContextValue = (0, import_react22.useCallback)(() => {
+  } = (0, import_react26.useContext)(MenuListContext);
+  const setContextValue = (0, import_react26.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react22.useCallback)((e) => {
+  const handleKeyDown = (0, import_react26.useCallback)((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1436,337 +1087,95 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-function MenuItem(props) {
-  const {
-    children,
-    as,
-    ...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 });
-}
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var MenuItem = (0, import_react27.forwardRef)(function MenuItem2({
+  className,
+  value,
+  disabled,
+  ...props
+}, ref) {
+  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ListItem_default, { ...props, ref, "data-key": value, onKeyDown: handleKeyDown, onClick: disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": disabled, role: "option", children: props.children });
+});
+var MenuItem_default = MenuItem;
 
-// src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_react23 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+// src/components/DropdownSelector/DropdownMenuItem/index.tsx
+var import_react28 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = (0, import_react23.useContext)(MenuListContext);
+  } = (0, import_react28.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_runtime26.jsxs)(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
   ] });
 }
-var StyledSpan = import_styled_components18.default.span.withConfig({
-  componentId: "ccl__sc-108wg2j-0"
-})(["font-size:14px;line-height:22px;color:var(--charcoal-text2);padding:9px 0;display:flex;align-items:center;width:100%;margin-left:", "px;"], ({
-  isSelected
-}) => isSelected === true ? 0 : 20);
-var Text2ColorIcon = (0, import_styled_components18.default)(Icon_default).withConfig({
-  componentId: "ccl__sc-108wg2j-1"
-})(["color:var(--charcoal-text2);padding-right:4px;"]);
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-var import_styled_components19 = __toESM(require("styled-components"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime27 = 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_runtime27.jsxs)("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: props.text }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { role: "group", children: props.children })
   ] });
 }
-var TextSpan = import_styled_components19.default.span.withConfig({
-  componentId: "ccl__sc-1ubjfz7-0"
-})(["display:block;color:var(--charcoal-text3);font-size:12px;font-weight:bold;padding:12px 0 8px 16px;"]);
-var StyledUl2 = import_styled_components19.default.ul.withConfig({
-  componentId: "ccl__sc-1ubjfz7-1"
-})(["padding-left:0;margin:0;box-sizing:border-box;list-style:none;overflow:hidden;"]);
-var StyledLi2 = import_styled_components19.default.li.withConfig({
-  componentId: "ccl__sc-1ubjfz7-2"
-})(["display:block;"]);
-
-// src/components/SegmentedControl/index.tsx
-var import_react28 = require("react");
-
-// ../../node_modules/@react-stately/form/dist/import.mjs
-var import_react24 = require("react");
-var $e5be200c675c3b3a$export$aca958c65c314e6c = {
-  badInput: false,
-  customError: false,
-  patternMismatch: false,
-  rangeOverflow: false,
-  rangeUnderflow: false,
-  stepMismatch: false,
-  tooLong: false,
-  tooShort: false,
-  typeMismatch: false,
-  valueMissing: false,
-  valid: true
-};
-var $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
-  ...$e5be200c675c3b3a$export$aca958c65c314e6c,
-  customError: true,
-  valid: false
-};
-var $e5be200c675c3b3a$export$dad6ae84456c676a = {
-  isInvalid: false,
-  validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
-  validationErrors: []
-};
-var $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, import_react24.createContext)({});
-var $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
-function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
-  if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
-    let {
-      realtimeValidation,
-      displayValidation,
-      updateValidation,
-      resetValidation,
-      commitValidation
-    } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
-    return {
-      realtimeValidation,
-      displayValidation,
-      updateValidation,
-      resetValidation,
-      commitValidation
-    };
-  }
-  return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
-}
-function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
-  let {
-    isInvalid,
-    validationState,
-    name,
-    value,
-    builtinValidation,
-    validate,
-    validationBehavior = "aria"
-  } = props;
-  if (validationState)
-    isInvalid || (isInvalid = validationState === "invalid");
-  let controlledError = isInvalid ? {
-    isInvalid: true,
-    validationErrors: [],
-    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
-  } : null;
-  let clientError = (0, import_react24.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [validate, value]);
-  if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid)
-    builtinValidation = null;
-  let serverErrors = (0, import_react24.useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
-  let serverErrorMessages = (0, import_react24.useMemo)(() => {
-    if (name)
-      return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
-    return [];
-  }, [serverErrors, name]);
-  let [lastServerErrors, setLastServerErrors] = (0, import_react24.useState)(serverErrors);
-  let [isServerErrorCleared, setServerErrorCleared] = (0, import_react24.useState)(false);
-  if (serverErrors !== lastServerErrors) {
-    setLastServerErrors(serverErrors);
-    setServerErrorCleared(false);
-  }
-  let serverError = (0, import_react24.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
-  let nextValidation = (0, import_react24.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let [currentValidity, setCurrentValidity] = (0, import_react24.useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let lastError = (0, import_react24.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let commitValidation = () => {
-    if (!commitQueued)
-      return;
-    setCommitQueued(false);
-    let error = clientError || builtinValidation || nextValidation.current;
-    if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
-      lastError.current = error;
-      setCurrentValidity(error);
-    }
-  };
-  let [commitQueued, setCommitQueued] = (0, import_react24.useState)(false);
-  (0, import_react24.useEffect)(commitValidation);
-  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
-  let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
-  return {
-    realtimeValidation,
-    displayValidation,
-    updateValidation(value2) {
-      if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value2))
-        setCurrentValidity(value2);
-      else
-        nextValidation.current = value2;
-    },
-    resetValidation() {
-      let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
-      if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
-        lastError.current = error;
-        setCurrentValidity(error);
-      }
-      if (validationBehavior === "native")
-        setCommitQueued(false);
-      setServerErrorCleared(true);
-    },
-    commitValidation() {
-      if (validationBehavior === "native")
-        setCommitQueued(true);
-      setServerErrorCleared(true);
-    }
-  };
-}
-function $e5be200c675c3b3a$var$asArray(v) {
-  if (!v)
-    return [];
-  return Array.isArray(v) ? v : [v];
-}
-function $e5be200c675c3b3a$var$runValidate(validate, value) {
-  if (typeof validate === "function") {
-    let e = validate(value);
-    if (e && typeof e !== "boolean")
-      return $e5be200c675c3b3a$var$asArray(e);
-  }
-  return [];
-}
-function $e5be200c675c3b3a$var$getValidationResult(errors) {
-  return errors.length ? {
-    isInvalid: true,
-    validationErrors: errors,
-    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
-  } : null;
-}
-function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
-  if (a === b)
-    return true;
-  return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
-}
-
-// ../../node_modules/@react-stately/utils/dist/import.mjs
-var import_react25 = require("react");
-function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (0, import_react25.useState)(value || defaultValue);
-  let isControlledRef = (0, import_react25.useRef)(value !== void 0);
-  let isControlled = value !== void 0;
-  (0, import_react25.useEffect)(() => {
-    let wasControlled = isControlledRef.current;
-    if (wasControlled !== isControlled)
-      console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
-    isControlledRef.current = isControlled;
-  }, [isControlled]);
-  let currentValue = isControlled ? value : stateValue;
-  let setValue = (0, import_react25.useCallback)((value2, ...args) => {
-    let onChangeCaller = (value3, ...onChangeArgs) => {
-      if (onChange) {
-        if (!Object.is(currentValue, value3))
-          onChange(value3, ...onChangeArgs);
-      }
-      if (!isControlled)
-        currentValue = value3;
-    };
-    if (typeof value2 === "function") {
-      console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320");
-      let updateFunction = (oldValue, ...functionArgs) => {
-        let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
-        onChangeCaller(interceptedValue, ...args);
-        if (!isControlled)
-          return interceptedValue;
-        return oldValue;
-      };
-      setStateValue(updateFunction);
-    } else {
-      if (!isControlled)
-        setStateValue(value2);
-      onChangeCaller(value2, ...args);
-    }
-  }, [isControlled, currentValue, onChange]);
-  return [currentValue, setValue];
-}
-
-// ../../node_modules/@react-stately/radio/dist/import.mjs
-var import_react26 = require("react");
-var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
-var $a54cdc5c1942b639$var$i = 0;
-function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
-  let name = (0, import_react26.useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [props.name]);
-  var _props_defaultValue;
-  let [selectedValue, setSelected] = (0, $458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
-  let [lastFocusedValue, setLastFocusedValue] = (0, import_react26.useState)(null);
-  let validation = (0, $e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
-    ...props,
-    value: selectedValue
-  });
-  let setSelectedValue = (value) => {
-    if (!props.isReadOnly && !props.isDisabled) {
-      setSelected(value);
-      validation.commitValidation();
-    }
-  };
-  let isInvalid = validation.displayValidation.isInvalid;
-  return {
-    ...validation,
-    name,
-    selectedValue,
-    setSelectedValue,
-    lastFocusedValue,
-    setLastFocusedValue,
-    isDisabled: props.isDisabled || false,
-    isReadOnly: props.isReadOnly || false,
-    isRequired: props.isRequired || false,
-    validationState: props.validationState || (isInvalid ? "invalid" : null),
-    isInvalid
-  };
-}
 
 // src/components/SegmentedControl/index.tsx
+var import_react30 = 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_react27 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioContext = (0, import_react27.createContext)(null);
+var import_react29 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var RadioContext = (0, import_react29.createContext)(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react27.useContext)(RadioContext);
+  const state = (0, import_react29.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_react28.forwardRef)(function SegmentedControlInner(props, ref) {
-  const ariaRadioGroupProps = (0, import_react28.useMemo)(() => ({
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var SegmentedControl = (0, import_react30.forwardRef)(function SegmentedControlInner(props, ref) {
+  const className = useClassNames("charcoal-segmented-control", props.className);
+  const ariaRadioGroupProps = (0, import_react30.useMemo)(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
     isRequired: props.required,
     "aria-label": props.name
   }), [props]);
-  const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(ariaRadioGroupProps);
+  const state = (0, import_radio.useRadioGroupState)(ariaRadioGroupProps);
   const {
     radioGroupProps
   } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react28.useMemo)(() => {
+  const segmentedControlItems = (0, import_react30.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_runtime29.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = (0, import_react28.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react30.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react28.useRef)(null);
-  const ariaRadioProps = (0, import_react28.useMemo)(() => ({
+  const ref = (0, import_react30.useRef)(null);
+  const ariaRadioProps = (0, import_react30.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1776,195 +1185,109 @@ 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_runtime29.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.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_react29 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"));
-var import_checkbox = require("@react-aria/checkbox");
-var import_utils12 = require("@react-aria/utils");
-var import_react_stately2 = require("react-stately");
-var import_styled8 = require("@charcoal-ui/styled");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Checkbox = (0, import_react29.forwardRef)(function CheckboxInner({
-  invalid = false,
+var import_react33 = require("react");
+var import_utils6 = require("@react-aria/utils");
+
+// src/components/Checkbox/CheckboxInput/index.tsx
+var import_react31 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var CheckboxInput = (0, import_react31.forwardRef)(function CheckboxInput2({
+  onChange,
+  checked,
+  invalid,
+  className,
+  rounded,
   ...props
 }, ref) {
-  const ariaCheckboxProps = (0, import_react29.useMemo)(() => ({
-    ...props,
-    isInValid: invalid,
-    isSelected: props.checked,
-    defaultSelected: props.defaultChecked,
-    validationState: invalid ? "invalid" : "valid",
-    "aria-label": "children" in props ? void 0 : props.label,
-    isDisabled: props.disabled
-  }), [invalid, props]);
-  const state = (0, import_react_stately2.useToggleState)(ariaCheckboxProps);
-  const objectRef = (0, import_utils12.useObjectRef)(ref);
-  const {
-    inputProps
-  } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
-  const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CheckboxRoot, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxInput, { type: "checkbox", ...inputProps, readOnly: props.readonly }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
-    ] }),
-    "children" in props && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InputLabel, { children: props.children })
+  const handleChange = (0, import_react31.useCallback)((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.checked);
+  }, [onChange]);
+  const classNames = useClassNames("charcoal-checkbox-input", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
+});
+var CheckboxInput_default = (0, import_react31.memo)(CheckboxInput);
+
+// src/components/Checkbox/CheckboxWithLabel.tsx
+var import_react32 = __toESM(require("react"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var CheckboxWithLabel = import_react32.default.memo(function CheckboxWithLabel2({
+  className,
+  children,
+  input,
+  id,
+  disabled
+}) {
+  const classNames = useClassNames("charcoal-checkbox__label", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
+    input,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
-var Checkbox_default = (0, import_react29.memo)(Checkbox);
-var hiddenCss = (0, import_styled_components21.css)(["visibility:hidden;"]);
-var InputRoot = import_styled_components21.default.label.withConfig({
-  componentId: "ccl__sc-wrdmwj-0"
-})(["position:relative;display:flex;cursor:pointer;gap:4px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}"]);
-var CheckboxRoot = import_styled_components21.default.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-1"
-})(["position:relative;"]);
-var CheckboxInput = import_styled_components21.default.input.withConfig({
-  componentId: "ccl__sc-wrdmwj-2"
-})(["&[type='checkbox']{appearance:none;display:block;cursor:pointer;margin:0;width:20px;height:20px;border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:disabled{cursor:default;}&:read-only{cursor:default;}&:checked{background-color:var(--charcoal-brand);&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);}&:active{background-color:var(--charcoal-brand-press);}}}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text4);}}"], import_styled8.focusVisibleFocusRingCss);
-var CheckboxInputOverlay = import_styled_components21.default.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-3"
-})(["position:absolute;top:-2px;left:-2px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--charcoal-text5);", ";"], ({
-  checked
-}) => checked !== true && hiddenCss);
-var InputLabel = import_styled_components21.default.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-4"
-})(["color:var(--charcoal-text2);font-size:14px;line-height:20px;"]);
+
+// src/components/Checkbox/index.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Checkbox = (0, import_react33.forwardRef)(function Checkbox2({
+  disabled,
+  className,
+  id,
+  children,
+  ...props
+}, ref) {
+  const htmlId = (0, import_utils6.useId)(id);
+  const noChildren = children === void 0;
+  const input = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  if (noChildren) {
+    return input;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
+});
+var Checkbox_default = (0, import_react33.memo)(Checkbox);
 
 // src/components/TagItem/index.tsx
-var import_react30 = require("react");
-var import_utils13 = require("@react-aria/utils");
-var import_styled_components22 = __toESM(require("styled-components"));
-var import_utils14 = require("@charcoal-ui/utils");
-var import_button = require("@react-aria/button");
-var import_styled9 = require("@charcoal-ui/styled");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var sizeMap = {
-  S: 32,
-  M: 40
-};
-var TagItem = (0, import_react30.forwardRef)(function TagItemInner({
+var import_react34 = require("react");
+var import_utils7 = require("@react-aria/utils");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var TagItem = (0, import_react34.forwardRef)(function TagItemInner({
+  component,
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
   bgImage,
   size = "M",
-  disabled,
   status = "default",
-  className,
   ...props
 }, _ref) {
-  const ref = (0, import_utils13.useObjectRef)(_ref);
-  const ariaButtonProps = (0, import_react30.useMemo)(() => ({
-    elementType: "a",
-    isDisabled: disabled,
-    ...props
-  }), [disabled, props]);
-  const {
-    buttonProps
-  } = (0, import_button.useButton)(ariaButtonProps, ref);
+  const ref = (0, import_utils7.useObjectRef)(_ref);
   const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(TagItemRoot, { ref, size: hasTranslatedLabel ? "M" : size, status, ...buttonProps, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Background, { bgColor, bgImage, status }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Inner, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
-        hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslatedLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label3, { children: translatedLabel }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label3, { children: label })
-      ] }),
-      status === "active" && /* @__PURE__ */ (0, import_jsx_runtime28.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_react34.useMemo)(() => component ?? "button", [component]);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
+      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+    ] }),
+    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon_default, { name: "16/Remove" })
   ] });
 });
-var TagItem_default = (0, import_react30.memo)(TagItem);
-var horizontalPadding = ({
-  left,
-  right
-}) => (0, import_styled_components22.css)(["padding-right:", ";padding-left:", ";"], (0, import_utils14.px)(right), (0, import_utils14.px)(left));
-var tagItemRootSize = (size) => {
-  switch (size) {
-    case "M":
-      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_components22.default.a.withConfig({
-  componentId: "ccl__sc-11j9pu2-0"
-})(["isolation:isolate;position:relative;height:", "px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;overflow:hidden;border-radius:4px;", " ", " color:", ";transition:0.2s box-shadow;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", "}&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}"], ({
-  size
-}) => sizeMap[size], ({
-  size,
-  status
-}) => status !== "active" && tagItemRootSize(size), ({
-  status
-}) => status === "active" && activeTagItemRoot, ({
-  status
-}) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)", import_styled9.focusVisibleFocusRingCss);
-var Background = import_styled_components22.default.div.withConfig({
-  componentId: "ccl__sc-11j9pu2-1"
-})(["position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:", ";", " ", ""], ({
-  bgColor
-}) => bgColor, ({
-  status
-}) => status === "inactive" && (0, import_styled_components22.css)(["background-color:var(--charcoal-surface3);"]), ({
-  bgImage
-}) => bgImage !== void 0 && (0, import_styled_components22.css)(["background-color:var(--charcoal-surface4);&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;background-image:url(", ");mix-blend-mode:overlay;}"], bgImage));
-var Inner = import_styled_components22.default.div.withConfig({
-  componentId: "ccl__sc-11j9pu2-2"
-})(["display:inline-flex;gap:8px;align-items:center;z-index:2;"]);
-var labelCSS = (0, import_styled_components22.css)(["font-size:14px;line-height:22px;font-weight:bold;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var translateLabelCSS = (0, import_styled_components22.css)(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
-var LabelWrapper = import_styled_components22.default.div.withConfig({
-  componentId: "ccl__sc-11j9pu2-3"
-})(["", ""], ({
-  isTranslate
-}) => isTranslate ?? false ? translateLabelCSS : labelCSS);
-var Label3 = import_styled_components22.default.span.withConfig({
-  componentId: "ccl__sc-11j9pu2-4"
-})(["max-width:152px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit;color:inherit;line-height:inherit;"]);
-var TranslatedLabel = import_styled_components22.default.div.withConfig({
-  componentId: "ccl__sc-11j9pu2-5"
-})(["font-size:12px;line-height:20px;font-weight:bold;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
+var TagItem_default = (0, import_react34.memo)(TagItem);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   CharcoalProvider,
   Checkbox,
   Clickable,
-  ComponentAbstraction,
   DropdownMenuItem,
   DropdownSelector,
   Icon,
@@ -1976,9 +1299,8 @@ var TranslatedLabel = import_styled_components22.default.div.withConfig({
   ModalAlign,
   ModalBody,
   ModalButtons,
+  ModalCloseButton,
   ModalHeader,
-  MultiSelect,
-  MultiSelectGroup,
   OverlayProvider,
   Radio,
   RadioGroup,
@@ -1987,7 +1309,6 @@ var TranslatedLabel = import_styled_components22.default.div.withConfig({
   Switch,
   TagItem,
   TextArea,
-  TextField,
-  useComponentAbstraction
+  TextField
 });
 //# sourceMappingURL=index.cjs.js.map