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

package/dist/index.esm.js

@@ -1,177 +1,80 @@
-// src/core/ComponentAbstraction.tsx
-import { useContext } from "react";
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var DefaultLink = React.forwardRef(function DefaultLink2({
-  to,
-  children,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx("a", { href: to, ref, ...rest, children });
-});
-var DefaultValue = {
-  Link: DefaultLink
-};
-var ComponentAbstractionContext = React.createContext(DefaultValue);
-function ComponentAbstraction({
-  children,
-  components
-}) {
-  return /* @__PURE__ */ jsx(ComponentAbstractionContext.Provider, { value: {
-    ...DefaultValue,
-    ...components
-  }, children });
-}
-function useComponentAbstraction() {
-  return useContext(ComponentAbstractionContext);
-}
-
 // src/core/SSRProvider.tsx
-import { SSRProvider } from "@react-aria/ssr";
+import { SSRProvider as OriginSSRProvider } from "@react-aria/ssr";
+import { version, Fragment } from "react";
+function isReactVersionOver(minVersion) {
+  const reactMajorVersion = parseInt(version.split(".")[0], 10);
+  return Number.isFinite(reactMajorVersion) ? reactMajorVersion >= minVersion : false;
+}
+var SSRProvider = isReactVersionOver(18) ? Fragment : OriginSSRProvider;
 
 // src/core/OverlayProvider.tsx
 import { OverlayProvider } from "@react-aria/overlays";
 
 // src/core/CharcoalProvider.tsx
-import { ThemeProvider } from "styled-components";
-import { TokenInjector } from "@charcoal-ui/styled";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function CharcoalProvider({
-  themeMap,
-  defaultTheme = themeMap[":root"],
-  components = {},
-  injectTokens = true,
-  children,
-  background
+  children
 }) {
-  return /* @__PURE__ */ jsx2(SSRProvider, { children: /* @__PURE__ */ jsxs(ThemeProvider, { theme: defaultTheme, children: [
-    injectTokens && /* @__PURE__ */ jsx2(TokenInjector, { theme: themeMap, background }),
-    /* @__PURE__ */ jsx2(ComponentAbstraction, { components, children: /* @__PURE__ */ jsx2(OverlayProvider, { children }) })
-  ] }) });
+  return /* @__PURE__ */ jsx(SSRProvider, { children: /* @__PURE__ */ jsx(OverlayProvider, { children }) });
 }
 
 // src/components/Button/index.tsx
-import { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
+import { forwardRef, useMemo as useMemo2 } from "react";
 
 // src/_lib/useClassNames.ts
 import { useMemo } from "react";
-function useClassNames(defaultClassName, propsClassName) {
-  return useMemo(() => [defaultClassName, propsClassName].filter((v) => v).join(" "), [defaultClassName, propsClassName]);
+function useClassNames(...classNames) {
+  return useMemo(() => classNames.filter((v) => v).join(" "), [classNames]);
 }
 
 // src/components/Button/index.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Button = forwardRef2(function Button2({
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button = forwardRef(function Button2({
   variant,
   fullWidth,
   size,
   className,
-  as,
+  component,
   isActive,
   ...props
 }, ref) {
-  const Component = useMemo2(() => as ?? "button", [as]);
+  const Component = useMemo2(() => component ?? "button", [component]);
   const classNames = useClassNames("charcoal-button", className);
-  return /* @__PURE__ */ jsx3(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
+  return /* @__PURE__ */ jsx2(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
-import * as React3 from "react";
-import styled from "styled-components";
-import { disabledSelector } from "@charcoal-ui/utils";
-import { jsx as jsx4 } from "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__ */ jsx4(StyledClickableDiv, { ...rest, ref, as, "aria-disabled": ariaDisabled });
+import { useMemo as useMemo3, forwardRef as forwardRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Clickable = forwardRef2(function Clickable2({
+  component,
+  ...props
+}, ref) {
+  const className = useClassNames("charcoal-clickable", props.className);
+  const Component = useMemo3(() => component ?? "button", [component]);
+  return /* @__PURE__ */ jsx3(Component, { ...props, ref, className });
 });
 var Clickable_default = Clickable;
-var StyledClickableDiv = styled.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;}"], disabledSelector);
 
 // src/components/IconButton/index.tsx
-import { forwardRef as forwardRef4 } from "react";
-import styled2, { css } from "styled-components";
-import { focusVisibleFocusRingCss } from "@charcoal-ui/styled";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var IconButton = forwardRef4(function IconButtonInner({
+import { forwardRef as forwardRef3, useMemo as useMemo4 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var IconButton = forwardRef3(function IconButtonInner({
   variant = "Default",
   size = "M",
   icon,
   isActive = false,
+  componentAs,
+  as,
   ...rest
 }, ref) {
   validateIconSize(size, icon);
-  return /* @__PURE__ */ jsx5(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, $isActive: isActive, children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon }) });
+  const Component = useMemo4(() => as ?? "button", [as]);
+  const classNames = useClassNames("charcoal-icon-button", rest.className);
+  return /* @__PURE__ */ jsx4(Component, { ...rest, as: componentAs, ref, className: classNames, "data-size": size, "data-active": isActive, "data-variant": variant, children: /* @__PURE__ */ jsx4("pixiv-icon", { name: icon }) });
 });
 var IconButton_default = IconButton;
-var StyledIconButton = styled2(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 ? css(["color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);"], $font, $background) : 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), 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) {
@@ -194,17 +97,47 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-import { memo, forwardRef as forwardRef5, useCallback, useContext as useContext2 } from "react";
-import * as React4 from "react";
-import styled3 from "styled-components";
+import { memo as memo2, forwardRef as forwardRef5, useContext } from "react";
 import warning from "warning";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss2 } from "@charcoal-ui/styled";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/components/Radio/RadioGroupContext.ts
+import * as React4 from "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
+import { forwardRef as forwardRef4, memo, useCallback } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var RadioInput = forwardRef4(function RadioInput2({
+  onChange,
+  invalid,
+  className,
+  ...props
+}, ref) {
+  const handleChange = useCallback((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.value);
+  }, [onChange]);
+  const classNames = useClassNames("charcoal-radio-input", className);
+  return /* @__PURE__ */ jsx5("input", { className: classNames, ref, type: "radio", onChange: handleChange, "aria-invalid": invalid, ...props });
+});
+var RadioInput_default = memo(RadioInput);
+
+// src/components/Radio/index.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 var Radio = forwardRef5(function RadioInner({
   value,
   disabled = false,
   children,
-  className
+  ...props
 }, ref) {
   const {
     name,
@@ -213,7 +146,8 @@ var Radio = forwardRef5(function RadioInner({
     readonly,
     invalid,
     onChange
-  } = useContext2(RadioGroupContext);
+  } = useContext(RadioGroupContext);
+  const classNames = useClassNames("charcoal-radio__label", props.className);
   warning(
     name !== void 0,
     `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`
@@ -221,41 +155,17 @@ var Radio = forwardRef5(function RadioInner({
   const isSelected = value === selected;
   const isDisabled = disabled || isParentDisabled;
   const isReadonly = readonly && !isSelected;
-  const handleChange = useCallback((e) => {
-    onChange(e.currentTarget.value);
-  }, [onChange]);
-  return /* @__PURE__ */ jsxs2(RadioRoot, { "aria-disabled": isDisabled || isReadonly, className, children: [
-    /* @__PURE__ */ jsx6(RadioInput, { name, value, checked: isSelected, "aria-invalid": invalid, onChange: handleChange, disabled: isDisabled || isReadonly, ref }),
-    children != null && /* @__PURE__ */ jsx6(RadioLabel, { children })
+  return /* @__PURE__ */ jsxs("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
+    /* @__PURE__ */ jsx6(RadioInput_default, { name, value, checked: isSelected, "aria-invalid": invalid, onChange, disabled: isDisabled || isReadonly, ref }),
+    children != null && /* @__PURE__ */ jsx6("div", { className: "charcoal-radio__label_div", children })
   ] });
 });
-var Radio_default = memo(Radio);
-var RadioRoot = styled3.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 = styled3.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);}}}}}"], focusVisibleFocusRingCss2);
-var RadioLabel = styled3.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 = styled3.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 = memo2(Radio);
+
+// src/components/Radio/RadioGroup/index.tsx
+import { forwardRef as forwardRef6, useCallback as useCallback2, useMemo as useMemo5 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var RadioGroup = forwardRef6(function RadioGroupInner({
   value,
   label,
   name,
@@ -263,207 +173,93 @@ function RadioGroup({
   disabled,
   readonly,
   invalid,
-  children
-}) {
-  const handleChange = useCallback((next) => {
+  children,
+  "aria-orientation": ariaOrientation = "vertical",
+  ...props
+}, ref) {
+  const classNames = useClassNames("charcoal-radio-group", props.className);
+  const handleChange = useCallback2((next) => {
     onChange(next);
   }, [onChange]);
-  return /* @__PURE__ */ jsx6(RadioGroupContext.Provider, { value: {
+  const contextValue = useMemo5(() => ({
     name,
     selected: value,
     disabled: disabled ?? false,
     readonly: readonly ?? false,
     invalid: invalid ?? false,
     onChange: handleChange
-  }, children: /* @__PURE__ */ jsx6(StyledRadioGroup, { role: "radiogroup", "aria-orientation": "vertical", "aria-label": label, "aria-invalid": invalid, className, children }) });
-}
-
-// src/components/MultiSelect/index.tsx
-import { useCallback as useCallback2, useContext as useContext3, forwardRef as forwardRef6, memo as memo2 } from "react";
-import styled4, { css as css2 } from "styled-components";
-import warning2 from "warning";
-import { px } from "@charcoal-ui/utils";
-
-// src/components/MultiSelect/context.ts
-import { createContext as createContext3 } from "react";
-var MultiSelectGroupContext = createContext3({
-  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__ */ jsx7(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7("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
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss3 } from "@charcoal-ui/styled";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var MultiSelect = forwardRef6(function MultiSelectInner({
-  value,
-  disabled = false,
+// src/components/Switch/index.tsx
+import { memo as memo4, forwardRef as forwardRef8 } from "react";
+import { useId } from "@react-aria/utils";
+
+// src/components/Switch/SwitchInput/index.tsx
+import { forwardRef as forwardRef7, useCallback as useCallback3 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SwitchInput = forwardRef7(function SwitchInput2({
   onChange,
-  variant = "default",
   className,
-  children
+  ...props
 }, ref) {
-  const {
-    name,
-    selected,
-    disabled: parentDisabled,
-    readonly,
-    invalid,
-    onChange: parentOnChange
-  } = useContext3(MultiSelectGroupContext);
-  warning2(
-    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 = useCallback2((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__ */ jsxs3(MultiSelectRoot, { "aria-disabled": isDisabled, className, children: [
-    /* @__PURE__ */ jsx7(MultiSelectInput, { ...{
-      name,
-      value,
-      invalid
-    }, checked: isSelected, disabled: isDisabled, onChange: handleChange, overlay: variant === "overlay", "aria-invalid": invalid, ref }),
-    /* @__PURE__ */ jsx7(MultiSelectInputOverlay, { overlay: variant === "overlay", invalid, "aria-hidden": true, children: /* @__PURE__ */ jsx7("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
-    Boolean(children) && /* @__PURE__ */ jsx7(MultiSelectLabel, { children })
-  ] });
+  const handleChange = useCallback3((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.checked);
+  }, [onChange]);
+  props.children;
+  const classNames = useClassNames("charcoal-switch-input", className);
+  return /* @__PURE__ */ jsx8("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
 });
-var MultiSelect_default = memo2(MultiSelect);
-var MultiSelectRoot = styled4.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
-}) => px(theme.spacing[4]));
-var MultiSelectLabel = styled4.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 = styled4.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);}}", " ", " ", "}"], focusVisibleFocusRingCss3, ({
-  invalid,
-  overlay
-}) => invalid && !overlay && css2(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]), ({
-  overlay
-}) => overlay && css2(["background-color:var(--charcoal-surface4);"]));
-var MultiSelectInputOverlay = styled4.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 && css2(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]), ({
-  overlay
-}) => overlay && css2(["border-color:var(--charcoal-text5);border-width:2px;border-style:solid;"]));
-function MultiSelectGroup({
+var SwitchInput_default = SwitchInput;
+
+// src/components/Switch/SwitchWithLabel.tsx
+import * as React5 from "react";
+import { jsx as jsx9, jsxs as jsxs2 } from "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 = useCallback2((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__ */ jsx7(MultiSelectGroupContext.Provider, { value: {
-    name,
-    selected: Array.from(new Set(selected)),
-    disabled,
-    readonly,
-    invalid,
-    onChange: handleChange
-  }, children: /* @__PURE__ */ jsx7("div", { className, "aria-label": label, "data-testid": "SelectGroup", children }) });
-}
+  const classNames = useClassNames("charcoal-switch__label", className);
+  return /* @__PURE__ */ jsxs2("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
+    input,
+    /* @__PURE__ */ jsx9("div", { className: "charcoal-switch__label_div", children })
+  ] });
+});
 
 // src/components/Switch/index.tsx
-import { useSwitch } from "@react-aria/switch";
-import { useMemo as useMemo3, memo as memo3, forwardRef as forwardRef7 } from "react";
-import { useToggleState } from "react-stately";
-import styled5 from "styled-components";
-import { useObjectRef } from "@react-aria/utils";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss4 } from "@charcoal-ui/styled";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var SwitchCheckbox = forwardRef7(function SwitchCheckboxInner(props, external) {
-  const {
-    disabled,
-    className
-  } = props;
-  const ariaSwitchProps = useMemo3(() => ({
-    ...props,
-    "aria-label": "children" in props ? void 0 : props.label,
-    isDisabled: props.disabled,
-    isSelected: props.checked
-  }), [props]);
-  const state = useToggleState(ariaSwitchProps);
-  const ref = useObjectRef(external);
-  const {
-    inputProps: {
-      className: _className,
-      type: _type,
-      ...rest
-    }
-  } = useSwitch(ariaSwitchProps, state, ref);
-  return /* @__PURE__ */ jsxs4(Label, { className, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsx8(SwitchInput, { ...rest, ref }),
-    "children" in props ? /* @__PURE__ */ jsx8(LabelInner, { children: props.children }) : void 0
-  ] });
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Switch = forwardRef8(function Switch2({
+  children,
+  onChange,
+  disabled,
+  className,
+  id,
+  ...props
+}, ref) {
+  const htmlId = useId(id);
+  const noChildren = children === void 0;
+  const input = /* @__PURE__ */ jsx10(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
+  if (noChildren) {
+    return input;
+  }
+  return /* @__PURE__ */ jsx10(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Switch_default = memo3(SwitchCheckbox);
-var Label = styled5.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 = styled5.div.withConfig({
-  componentId: "ccl__sc-1wy6z5h-1"
-})(["font-size:14px;line-height:22px;color:var(--charcoal-text2);margin-left:4px;"]);
-var SwitchInput = styled5.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;}}"], focusVisibleFocusRingCss4);
+var Switch_default = memo4(Switch);
 
 // src/components/TextField/index.tsx
-import { useTextField } from "@react-aria/textfield";
 import { useVisuallyHidden } from "@react-aria/visually-hidden";
-import { useCallback as useCallback3, useEffect as useEffect2, useRef, useState } from "react";
-import * as React6 from "react";
-import styled7, { css as css3 } from "styled-components";
+import { useCallback as useCallback4, useEffect as useEffect2, useRef, useState } from "react";
+import * as React7 from "react";
 
 // src/components/FieldLabel/index.tsx
-import * as React5 from "react";
-import styled6 from "styled-components";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var FieldLabel = React5.forwardRef(function FieldLabel2({
+import * as React6 from "react";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var FieldLabel = React6.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -472,30 +268,16 @@ var FieldLabel = React5.forwardRef(function FieldLabel2({
   subLabel,
   ...labelProps
 }, ref) {
-  return /* @__PURE__ */ jsxs5(FieldLabelWrapper, { style, className, children: [
-    /* @__PURE__ */ jsx9(Label2, { ref, ...labelProps, children: label }),
-    required && /* @__PURE__ */ jsx9(RequiredText, { children: requiredText }),
-    /* @__PURE__ */ jsx9(SubLabelClickable, { children: /* @__PURE__ */ jsx9("span", { children: subLabel }) })
+  const classNames = useClassNames("charcoal-field-label-root", className);
+  return /* @__PURE__ */ jsxs3("div", { style, className: classNames, children: [
+    /* @__PURE__ */ jsx11("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
+    required && /* @__PURE__ */ jsx11("div", { className: "charcoal-field-label-required-text", children: requiredText }),
+    /* @__PURE__ */ jsx11("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ jsx11("span", { children: subLabel }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
-var Label2 = styled6.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 = styled6.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 = styled6.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 = styled6.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) {
@@ -532,148 +314,124 @@ function useFocusWithClick(containerRef, inputRef) {
 }
 
 // src/components/TextField/index.tsx
-import { mergeProps } from "@react-aria/utils";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var TextField = React6.forwardRef(function SingleLineTextFieldInner({
+import { mergeRefs as mergeRefs2, useId as useId2 } from "@react-aria/utils";
+
+// src/_lib/createDivComponent.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function createDivComponent(mainClassName) {
+  return forwardRef10(function DivComponent({
+    className,
+    ...props
+  }, ref) {
+    const classNames = useClassNames(mainClassName, className);
+    return /* @__PURE__ */ jsx12("div", { className: classNames, ref, ...props });
+  });
+}
+
+// src/components/TextField/AssistiveText/index.tsx
+var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
+
+// src/components/TextField/index.tsx
+import { jsx as jsx13, jsxs as jsxs4 } from "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 = useRef(null);
   const {
     visuallyHiddenProps
   } = useVisuallyHidden();
-  const ariaRef = useRef(null);
-  const [count, setCount] = useState(countCodePointsInString(props.value ?? ""));
-  const nonControlled = props.value === void 0;
-  const handleChange = useCallback3((value) => {
-    const count2 = countCodePointsInString(value);
+  const [count, setCount] = useState(getCount(value ?? ""));
+  const handleChange = useCallback4((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]);
+    setCount(count2);
+    onChange?.(value2);
+  }, [getCount, maxLength, onChange]);
   useEffect2(() => {
-    setCount(countCodePointsInString(props.value ?? ""));
-  }, [props.value]);
-  const {
-    inputProps: ariaInputProps,
-    labelProps,
-    descriptionProps,
-    errorMessageProps
-  } = useTextField({
-    inputElementType: "input",
-    isDisabled: disabled,
-    isRequired: required,
-    validationState: invalid ? "invalid" : "valid",
-    description: !invalid && assistiveText,
-    errorMessage: invalid && assistiveText,
-    onChange: handleChange,
-    ...props
-  }, ariaRef);
+    setCount(getCount(value ?? ""));
+  }, [getCount, value]);
   const containerRef = useRef(null);
-  useFocusWithClick(containerRef, ariaRef);
-  const inputProps = mergeProps(restProps, ariaInputProps);
-  return /* @__PURE__ */ jsxs6(TextFieldRoot, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ jsx10(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ jsxs6(StyledInputContainer, { ref: containerRef, invalid, "aria-disabled": disabled === true ? true : void 0, hasPrefix: prefix != null, hasSuffix: suffix != null || showCount, children: [
-      prefix && /* @__PURE__ */ jsx10(PrefixContainer, { children: prefix }),
-      /* @__PURE__ */ jsx10(StyledInput, { ref: mergeRefs(forwardRef18, ariaRef), invalid, ...inputProps }),
-      (suffix || showCount) && /* @__PURE__ */ jsxs6(SuffixContainer, { children: [
+  useFocusWithClick(containerRef, inputRef);
+  const inputId = useId2(props.id);
+  const describedbyId = useId2();
+  const labelledbyId = useId2();
+  const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
+  const classNames = useClassNames("charcoal-text-field-root");
+  return /* @__PURE__ */ jsxs4("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ jsx13(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsxs4("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
+      prefix && /* @__PURE__ */ jsx13("div", { className: "charcoal-text-field-prefix", children: prefix }),
+      /* @__PURE__ */ jsx13("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: mergeRefs2(forwardRef23, inputRef), type, value, ...props }),
+      (suffix || showCount) && /* @__PURE__ */ jsxs4("div", { className: "charcoal-text-field-suffix", children: [
         suffix,
-        showCount && /* @__PURE__ */ jsx10(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ jsx13("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx10(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ jsx13(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
-var TextFieldRoot = styled7.div.withConfig({
-  componentId: "ccl__sc-3dd0tt-0"
-})(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
-  opacity: p.theme.elementEffect.disabled.opacity
-});
-var TextFieldLabel = styled7(FieldLabel_default).withConfig({
-  componentId: "ccl__sc-3dd0tt-1"
-})(["margin-bottom:8px;"]);
-var StyledInputContainer = styled7.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 && css3(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
-var PrefixContainer = styled7.div.withConfig({
-  componentId: "ccl__sc-3dd0tt-3"
-})(["display:flex;align-items:center;"]);
-var SuffixContainer = styled7.span.withConfig({
-  componentId: "ccl__sc-3dd0tt-4"
-})(["display:flex;align-items:center;gap:8px;"]);
-var StyledInput = styled7.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 = styled7.span.withConfig({
-  componentId: "ccl__sc-3dd0tt-6"
-})(["line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
-var AssistiveText = styled7.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
-import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
-import { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
-import styled8, { css as css4 } from "styled-components";
-import { mergeProps as mergeProps2 } from "@react-aria/utils";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var TextArea = forwardRef10(function TextAreaInner({
+import { forwardRef as forwardRef12, useCallback as useCallback5, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { useId as useId3 } from "@react-aria/utils";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var TextArea = forwardRef12(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
   } = useVisuallyHidden2();
   const textareaRef = useRef2(null);
-  const ariaRef = useRef2(null);
-  const [count, setCount] = useState2(countCodePointsInString(props.value ?? ""));
+  const [count, setCount] = useState2(getCount(value ?? ""));
   const [rows, setRows] = useState2(initialRows);
-  const syncHeight = useCallback4((textarea) => {
+  const syncHeight = useCallback5((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 = useCallback4((value) => {
-    const count2 = countCodePointsInString(value);
+  const nonControlled = value === void 0;
+  const handleChange = useCallback5((e) => {
+    const value2 = e.target.value;
+    const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
       return;
     }
@@ -683,110 +441,67 @@ var TextArea = forwardRef10(function TextAreaInner({
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
-    onChange?.(value);
-  }, [autoHeight, maxLength, nonControlled, onChange, syncHeight]);
+    onChange?.(value2);
+  }, [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]);
   useEffect3(() => {
-    setCount(countCodePointsInString(props.value ?? ""));
-  }, [props.value]);
-  const {
-    inputProps: ariaInputProps,
-    labelProps,
-    descriptionProps,
-    errorMessageProps
-  } = useTextField2({
-    inputElementType: "textarea",
-    isDisabled: disabled,
-    isRequired: required,
-    validationState: invalid ? "invalid" : "valid",
-    description: !invalid && assistiveText,
-    errorMessage: invalid && assistiveText,
-    onChange: handleChange,
-    ...props
-  }, ariaRef);
+    setCount(getCount(value ?? ""));
+  }, [getCount, value]);
   useEffect3(() => {
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
   }, [autoHeight, syncHeight]);
   const containerRef = useRef2(null);
-  useFocusWithClick(containerRef, ariaRef);
-  const inputProps = mergeProps2(restProps, ariaInputProps);
-  return /* @__PURE__ */ jsxs7(TextFieldRoot2, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ jsx11(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ jsxs7(StyledTextareaContainer, { ref: containerRef, invalid, rows: showCount ? rows + 1 : rows, "aria-disabled": disabled === true ? "true" : void 0, children: [
-      /* @__PURE__ */ jsx11(StyledTextarea, { ref: mergeRefs(textareaRef, forwardRef18, ariaRef), rows, noBottomPadding: showCount, ...inputProps }),
-      showCount && /* @__PURE__ */ jsx11(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+  useFocusWithClick(containerRef, textareaRef);
+  const textAreaId = useId3(props.id);
+  const describedbyId = useId3();
+  const labelledbyId = useId3();
+  const classNames = useClassNames("charcoal-text-area-root", className);
+  const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
+  return /* @__PURE__ */ jsxs5("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ jsx14(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsxs5("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__ */ jsx14("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__ */ jsx14("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx11(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ jsx14(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
-var TextFieldRoot2 = styled8.div.withConfig({
-  componentId: "ccl__sc-58waht-0"
-})(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
-  opacity: p.theme.elementEffect.disabled.opacity
-});
-var StyledTextareaContainer = styled8.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
-}) => css4(["height:calc(22px * ", " + 18px);"], rows), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && css4(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
-var StyledTextarea = styled8.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
-}) => css4(["height:calc(22px / 0.875 * ", " + ", "px);"], rows, noBottomPadding ? 9 : 20));
-var MultiLineCounter = styled8.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
-import * as React7 from "react";
+import * as React8 from "react";
 import "@charcoal-ui/icons";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Icon = React7.forwardRef(function IconInner({
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Icon = React8.forwardRef(function IconInner({
   name,
   scale,
   unsafeNonGuidelineScale,
   className,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx12("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+  return /* @__PURE__ */ jsx15("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
 });
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-import { useContext as useContext4, forwardRef as forwardRef13, memo as memo4 } from "react";
-import * as React11 from "react";
+import { useContext as useContext2, forwardRef as forwardRef15, memo as memo5 } from "react";
+import * as React12 from "react";
 import { Overlay } from "@react-aria/overlays";
-import styled10, { css as css6, useTheme } from "styled-components";
-import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
-import { useMedia } from "@charcoal-ui/styled";
-import { animated as animated2, useTransition, easings } from "react-spring";
-import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
+import { animated, useTransition, easings } from "react-spring";
+import { useObjectRef } from "@react-aria/utils";
 
 // src/components/Modal/Dialog/index.tsx
-import { forwardRef as forwardRef12 } from "react";
-import styled9, { css as css5 } from "styled-components";
+import { forwardRef as forwardRef14 } from "react";
 import { useDialog } from "@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
-import { maxWidth } from "@charcoal-ui/utils";
-import { animated } from "react-spring";
-
 // src/_lib/useForwardedRef.tsx
-import * as React8 from "react";
+import * as React9 from "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") {
@@ -799,44 +514,49 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Dialog = forwardRef12(function Dialog2(props, forwardRef18) {
-  const ref = useForwardedRef(forwardRef18);
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Dialog = forwardRef14(function Dialog2({
+  size,
+  bottomSheet,
+  className,
+  ...props
+}, forwardRef23) {
+  const ref = useForwardedRef(forwardRef23);
   const {
     dialogProps
   } = useDialog({
     role: "dialog"
   }, ref);
-  return /* @__PURE__ */ jsx13(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__ */ jsx16("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 = animated(styled9.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
-}) => maxWidth(theme.breakpoint.screen1), (p) => p.bottomSheet !== false && css5(["max-width:unset;width:100%;border-radius:0;margin:auto 0 0 0;", ""], p.bottomSheet === "full" && css5(["min-height:100%;"]))));
 
 // src/components/Modal/ModalBackgroundContext.tsx
-import * as React9 from "react";
-var ModalBackgroundContext = React9.createContext(null);
+import * as React10 from "react";
+var ModalBackgroundContext = React10.createContext(null);
+
+// src/components/Modal/useCustomModalOverlay.tsx
+import * as React11 from "react";
+import { ariaHideOutside, useOverlay, useOverlayFocusContain } from "@react-aria/overlays";
+
+// src/components/DropdownSelector/Popover/usePreventScroll.tsx
+import { useEffect as useEffect5 } from "react";
+function usePreventScroll(element, isOpen) {
+  useEffect5(() => {
+    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
-import * as React10 from "react";
-import { ariaHideOutside, useOverlay, useOverlayFocusContain, usePreventScroll } from "@react-aria/overlays";
 function useCharcoalModalOverlay(props, state, ref) {
   const {
     overlayProps,
@@ -847,11 +567,9 @@ function useCharcoalModalOverlay(props, state, ref) {
     onClose: state.onClose,
     shouldCloseOnInteractOutside: () => false
   }, ref);
-  usePreventScroll({
-    isDisabled: !state.isOpen
-  });
+  usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen);
   useOverlayFocusContain();
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (state.isOpen && ref.current) {
       return ariaHideOutside([ref.current]);
     }
@@ -861,11 +579,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
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_Z_INDEX = 10;
-var Modal = forwardRef13(function ModalInner({
+var Modal = forwardRef15(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -878,9 +609,10 @@ var Modal = forwardRef13(function ModalInner({
     isDismissable,
     onClose,
     className,
-    isOpen = false
+    isOpen = false,
+    closeButtonAriaLabel = "Close"
   } = props;
-  const ref = useObjectRef2(external);
+  const ref = useObjectRef(external);
   const {
     modalProps,
     underlayProps
@@ -891,8 +623,7 @@ var Modal = forwardRef13(function ModalInner({
     onClose,
     isOpen
   }, ref);
-  const theme = useTheme();
-  const isMobile = useMedia(maxWidth2(theme.breakpoint.screen1)) ?? false;
+  const isMobile = useWindowWidth() < 744;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const showDismiss = !isMobile || bottomSheet !== true;
   const transition = useTransition(isOpen, {
@@ -920,8 +651,8 @@ var Modal = forwardRef13(function ModalInner({
       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();
     }
@@ -930,12 +661,15 @@ var Modal = forwardRef13(function ModalInner({
     backgroundColor,
     overflow,
     transform
-  }, item) => item && /* @__PURE__ */ jsx14(Overlay, { portalContainer, children: /* @__PURE__ */ jsx14(ModalBackground, { ref: bgRef, zIndex, ...underlayProps, style: transitionEnabled ? {
+  }, item) => item && /* @__PURE__ */ jsx17(Overlay, { portalContainer, children: /* @__PURE__ */ jsx17(animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
     backgroundColor,
-    overflow
-  } : {}, $bottomSheet: bottomSheet, onClick: handleClick, children: /* @__PURE__ */ jsx14(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx14(Dialog, { ref, ...modalProps, style: transitionEnabled ? {
+    overflow,
+    zIndex
+  } : {
+    zIndex
+  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ jsx17(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx17(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
     transform
-  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ jsxs8(ModalContext.Provider, { value: {
+  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ jsxs6(ModalContext.Provider, { value: {
     titleProps: {},
     title,
     close: onClose,
@@ -943,92 +677,50 @@ var Modal = forwardRef13(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ jsx14(ModalCrossButton, { size: "S", icon: "24/Close", onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ jsx17(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
-var Modal_default = memo4(Modal);
-var ModalContext = React11.createContext({
+var AnimatedDialog = animated(Dialog);
+var Modal_default = memo5(Modal);
+var ModalContext = React12.createContext({
   titleProps: {},
   title: "",
   close: void 0,
   showDismiss: true,
   bottomSheet: false
 });
-var ModalBackground = animated2(styled10.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
-}) => maxWidth2(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && css6(["padding:0;"])));
-var ModalCrossButton = styled10(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
-  } = useContext4(ModalContext);
-  return /* @__PURE__ */ jsx14(ModalHeading, { ...titleProps, ...props, children: title });
+function ModalCloseButton(props) {
+  return /* @__PURE__ */ jsx17(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
 }
-var ModalHeading = styled10.h3.withConfig({
-  componentId: "ccl__sc-h2bc55-2"
-})(["margin:0;font-weight:inherit;font-size:inherit;"]);
 
 // src/components/Modal/ModalPlumbing.tsx
-import styled11, { css as css7 } from "styled-components";
-import { useContext as useContext5 } from "react";
-import { maxWidth as maxWidth3 } from "@charcoal-ui/utils";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { useContext as useContext3 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function ModalHeader() {
-  const modalCtx = useContext5(ModalContext);
-  return /* @__PURE__ */ jsx15(ModalHeaderRoot, { $bottomSheet: modalCtx.bottomSheet, children: /* @__PURE__ */ jsx15(StyledModalTitle, {}) });
+  const modalCtx = useContext3(ModalContext);
+  return /* @__PURE__ */ jsx18("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ jsx18("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
 }
-var ModalHeaderRoot = styled11.div.withConfig({
-  componentId: "ccl__sc-1k33wze-0"
-})(["height:64px;display:grid;align-content:center;justify-content:center;@media ", "{", "}"], ({
-  theme
-}) => maxWidth3(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && css7(["height:48px;"]));
-var StyledModalTitle = styled11(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 = styled11.div.withConfig({
-  componentId: "ccl__sc-1k33wze-2"
-})(["padding-left:16px;padding-right:16px;"]);
-var ModalBody = styled11.div.withConfig({
-  componentId: "ccl__sc-1k33wze-3"
-})(["padding-bottom:40px;"]);
-var ModalButtons = styled11.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
-import { forwardRef as forwardRef14, useImperativeHandle, useRef as useRef5, memo as memo5 } from "react";
-import styled12, { keyframes } from "styled-components";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var LoadingSpinner = forwardRef14(function LoadingSpinnerInner({
+import { forwardRef as forwardRef16, useImperativeHandle, useRef as useRef5, memo as memo6 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var LoadingSpinner = forwardRef16(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
-  className
+  ...props
 }, ref) {
-  return /* @__PURE__ */ jsx16(LoadingSpinnerRoot, { size, padding, transparent, className, ref, children: /* @__PURE__ */ jsx16(LoadingSpinnerIcon, {}) });
+  const classNames = useClassNames("charcoal-loading-spinner", props.className);
+  return /* @__PURE__ */ jsx19("div", { role: "progressbar", style: {
+    "--charcoal-loading-spinner-size": `${size}px`,
+    "--charcoal-loading-spinner-padding": `${padding}px`
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ jsx19(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = memo5(LoadingSpinner);
-var LoadingSpinnerRoot = styled12.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 = keyframes(["from{transform:scale(0);opacity:1;}to{transform:scale(1);opacity:0;}"]);
-var Icon2 = styled12.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 = forwardRef14(function LoadingSpinnerIcon2({
+var LoadingSpinner_default = memo6(LoadingSpinner);
+var LoadingSpinnerIcon = forwardRef16(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
   const iconRef = useRef5(null);
@@ -1042,41 +734,19 @@ var LoadingSpinnerIcon = forwardRef14(function LoadingSpinnerIcon2({
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ jsx16(Icon2, { ref: iconRef, once });
+  return /* @__PURE__ */ jsx19("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
 });
 
 // src/components/DropdownSelector/index.tsx
-import { useState as useState3, useRef as useRef9, useMemo as useMemo5 } from "react";
-import styled15, { css as css8 } from "styled-components";
-import { disabledSelector as disabledSelector2 } from "@charcoal-ui/utils";
+import { useState as useState4, useRef as useRef9, useMemo as useMemo7, useCallback as useCallback7 } from "react";
 
 // src/components/DropdownSelector/DropdownPopover.tsx
 import { useEffect as useEffect7, useRef as useRef7 } from "react";
 
 // src/components/DropdownSelector/Popover/index.tsx
-import { useContext as useContext6, useRef as useRef6 } from "react";
+import { useContext as useContext4, useRef as useRef6 } from "react";
 import { DismissButton, Overlay as Overlay2, usePopover } from "@react-aria/overlays";
-import styled13 from "styled-components";
-
-// src/components/DropdownSelector/Popover/usePreventScroll.tsx
-import { useEffect as useEffect6 } from "react";
-function usePreventScroll2(element, isOpen) {
-  useEffect6(() => {
-    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
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
 var _empty = () => null;
 function Popover(props) {
   const defaultPopoverRef = useRef6(null);
@@ -1095,29 +765,28 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = useContext6(ModalBackgroundContext);
-  usePreventScroll2(modalBackground, props.isOpen);
+  const modalBackground = useContext4(ModalBackgroundContext);
+  usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
-  return /* @__PURE__ */ jsxs9(Overlay2, { portalContainer: document.body, children: [
-    /* @__PURE__ */ jsx17("div", { ...underlayProps, style: {
+  return /* @__PURE__ */ jsxs7(Overlay2, { portalContainer: document.body, children: [
+    /* @__PURE__ */ jsx20("div", { ...underlayProps, style: {
       position: "fixed",
       zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
       inset: 0
     } }),
-    /* @__PURE__ */ jsxs9(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
-      /* @__PURE__ */ jsx17(DismissButton, { onDismiss: () => props.onClose() }),
+    /* @__PURE__ */ jsxs7("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
+      /* @__PURE__ */ jsx20(DismissButton, { onDismiss: () => props.onClose() }),
+      /* @__PURE__ */ jsx20("div", { tabIndex: 0, onFocus: props.onClose }),
       props.children,
-      /* @__PURE__ */ jsx17(DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ jsx20("div", { tabIndex: 0, onFocus: props.onClose }),
+      /* @__PURE__ */ jsx20(DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
-var DropdownPopoverDiv = styled13.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
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function DropdownPopover({
   children,
   ...props
@@ -1129,24 +798,31 @@ function DropdownPopover({
     }
   }, [props.triggerRef, props.isOpen]);
   useEffect7(() => {
-    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);
+    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__ */ jsx18(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
+  return /* @__PURE__ */ jsx21(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
-import * as React12 from "react";
+import * as React13 from "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) {
@@ -1165,12 +841,11 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { useMemo as useMemo4, useRef as useRef8 } from "react";
-import styled14 from "styled-components";
+import { useMemo as useMemo6, useRef as useRef8 } from "react";
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-import { createContext as createContext6 } from "react";
-var MenuListContext = createContext6({
+import { createContext as createContext4 } from "react";
+var MenuListContext = createContext4({
   root: void 0,
   value: "",
   propsArray: [],
@@ -1179,13 +854,13 @@ var MenuListContext = createContext6({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-import * as React13 from "react";
+import * as React14 from "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({
@@ -1202,11 +877,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function MenuList(props) {
   const root = useRef8(null);
-  const propsArray = useMemo4(() => getValuesRecursive(props.children), [props.children]);
-  return /* @__PURE__ */ jsx19(StyledUl, { ref: root, children: /* @__PURE__ */ jsx19(MenuListContext.Provider, { value: {
+  const propsArray = useMemo6(() => getValuesRecursive(props.children), [props.children]);
+  return /* @__PURE__ */ jsx22("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ jsx22(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -1215,91 +890,70 @@ function MenuList(props) {
     }
   }, children: props.children }) });
 }
-var StyledUl = styled14.ul.withConfig({
-  componentId: "ccl__sc-1y72v02-0"
-})(["padding:0;margin:0;"]);
 
 // src/components/DropdownSelector/index.tsx
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss5 } from "@charcoal-ui/styled";
 import { useVisuallyHidden as useVisuallyHidden3 } from "@react-aria/visually-hidden";
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
-var defaultRequiredText = "*\u5FC5\u9808";
-function DropdownSelector(props) {
+import { useId as useId4 } from "@react-aria/utils";
+import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
+function DropdownSelector({
+  onChange,
+  showLabel = false,
+  ...props
+}) {
   const triggerRef = useRef9(null);
-  const [isOpen, setIsOpen] = useState3(false);
+  const [isOpen, setIsOpen] = useState4(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = useMemo5(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const isPlaceholder = useMemo7(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
   const propsArray = getValuesRecursive(props.children);
   const {
     visuallyHiddenProps
   } = useVisuallyHidden3();
-  return /* @__PURE__ */ jsxs10(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
-    props.showLabel === true && /* @__PURE__ */ jsx20(DropdownFieldLabel, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
-    /* @__PURE__ */ jsx20("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx20("select", { name: props.name, value: props.value, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ jsx20("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+  const handleChange = useCallback7((e) => {
+    onChange(e.target.value);
+  }, [onChange]);
+  const labelId = useId4();
+  const describedbyId = useId4();
+  const classNames = useClassNames("charcoal-dropdown-selector-root", props.className);
+  return /* @__PURE__ */ jsxs8("div", { className: classNames, "aria-disabled": props.disabled, children: [
+    /* @__PURE__ */ jsx23(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsx23("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx23("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ jsx23("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
-    /* @__PURE__ */ jsxs10(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
+    /* @__PURE__ */ jsxs8("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__ */ jsx20(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
-      /* @__PURE__ */ jsx20(DropdownButtonIcon, { name: "16/Menu" })
+    }, ref: triggerRef, type: "button", "data-active": isOpen, children: [
+      /* @__PURE__ */ jsx23("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
+      /* @__PURE__ */ jsx23(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
     ] }),
-    isOpen && /* @__PURE__ */ jsx20(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx20(MenuList, { value: props.value, onChange: (v) => {
-      props.onChange(v);
+    isOpen && /* @__PURE__ */ jsx23(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx23(MenuList, { value: props.value, onChange: (v) => {
+      onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
-    props.assistiveText !== void 0 && /* @__PURE__ */ jsx20(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ jsx23(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = styled15.div.withConfig({
-  componentId: "ccl__sc-1vnxmc8-0"
-})(["display:inline-block;width:100%;", "{cursor:default;opacity:0.32;}"], disabledSelector2);
-var DropdownFieldLabel = styled15(FieldLabel_default).withConfig({
-  componentId: "ccl__sc-1vnxmc8-1"
-})(["width:100%;margin-bottom:8px;"]);
-var DropdownButton = styled15.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']{", " ", "}", ""], disabledSelector2, focusVisibleFocusRingCss5, ({
-  $active
-}) => $active === true ? css8(["background-color:var(--charcoal-surface3-press);"]) : css8(["&:hover{background-color:var(--charcoal-surface3-hover);}&:active{background-color:var(--charcoal-surface3-press);}"]), ({
-  invalid
-}) => invalid === true && css8(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
-var DropdownButtonText = styled15.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 = styled15(Icon_default).withConfig({
-  componentId: "ccl__sc-1vnxmc8-4"
-})(["color:var(--charcoal-text2);"]);
-var AssertiveText = styled15.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 && css8(["color:var(--charcoal-assertive);"]));
 
-// src/components/DropdownSelector/DropdownMenuItem.tsx
-import styled17 from "styled-components";
+// src/components/DropdownSelector/MenuItem/index.tsx
+import { forwardRef as forwardRef18 } from "react";
 
 // src/components/DropdownSelector/ListItem/index.tsx
-import styled16 from "styled-components";
-import { jsx as jsx21 } from "react/jsx-runtime";
-function ListItem(props) {
-  const {
-    children,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsx21(StyledLi, { role: "option", children: /* @__PURE__ */ jsx21(ItemDiv, { ...rest, children: props.children }) });
-}
-var StyledLi = styled16.li.withConfig({
-  componentId: "ccl__sc-p1vs75-0"
-})(["list-style:none;"]);
-var ItemDiv = styled16.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);}}"]);
+import { forwardRef as forwardRef17, useMemo as useMemo8 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var ListItem = forwardRef17(function ListItem2({
+  as,
+  className,
+  ...props
+}, ref) {
+  const Component = useMemo8(() => as ?? "li", [as]);
+  const classNames = useClassNames("charcoal-list-item", className);
+  return /* @__PURE__ */ jsx24(Component, { className: classNames, ref, ...props });
+});
+var ListItem_default = ListItem;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-import { useCallback as useCallback6, useContext as useContext7 } from "react";
+import { useCallback as useCallback8, useContext as useContext5 } from "react";
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1336,12 +990,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = useContext7(MenuListContext);
-  const setContextValue = useCallback6(() => {
+  } = useContext5(MenuListContext);
+  const setContextValue = useCallback8(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = useCallback6((e) => {
+  const handleKeyDown = useCallback8((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1376,337 +1030,95 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-function MenuItem(props) {
-  const {
-    children,
-    as,
-    ...rest
-  } = props;
-  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value);
-  return /* @__PURE__ */ jsx22(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 });
-}
+import { jsx as jsx25 } from "react/jsx-runtime";
+var MenuItem = forwardRef18(function MenuItem2({
+  className,
+  value,
+  disabled,
+  ...props
+}, ref) {
+  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
+  return /* @__PURE__ */ jsx25(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
-import { useContext as useContext8 } from "react";
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+// src/components/DropdownSelector/DropdownMenuItem/index.tsx
+import { useContext as useContext6 } from "react";
+import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = useContext8(MenuListContext);
+  } = useContext6(MenuListContext);
   const isSelected = props.value === ctxValue;
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxs11(MenuItem, { ...rest, children: [
-    isSelected && /* @__PURE__ */ jsx23(Text2ColorIcon, { name: "16/Check" }),
-    /* @__PURE__ */ jsx23(StyledSpan, { isSelected, children: props.children })
+  return /* @__PURE__ */ jsxs9(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
+    isSelected && /* @__PURE__ */ jsx26(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
+    /* @__PURE__ */ jsx26("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
   ] });
 }
-var StyledSpan = styled17.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 = styled17(Icon_default).withConfig({
-  componentId: "ccl__sc-108wg2j-1"
-})(["color:var(--charcoal-text2);padding-right:4px;"]);
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-import styled18 from "styled-components";
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 function MenuItemGroup(props) {
-  return /* @__PURE__ */ jsxs12(StyledLi2, { role: "presentation", children: [
-    /* @__PURE__ */ jsx24(TextSpan, { children: props.text }),
-    /* @__PURE__ */ jsx24(StyledUl2, { role: "group", children: props.children })
+  return /* @__PURE__ */ jsxs10("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
+    /* @__PURE__ */ jsx27("span", { children: props.text }),
+    /* @__PURE__ */ jsx27("ul", { role: "group", children: props.children })
   ] });
 }
-var TextSpan = styled18.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 = styled18.ul.withConfig({
-  componentId: "ccl__sc-1ubjfz7-1"
-})(["padding-left:0;margin:0;box-sizing:border-box;list-style:none;overflow:hidden;"]);
-var StyledLi2 = styled18.li.withConfig({
-  componentId: "ccl__sc-1ubjfz7-2"
-})(["display:block;"]);
-
-// src/components/SegmentedControl/index.tsx
-import { forwardRef as forwardRef15, memo as memo6, useMemo as useMemo6, useRef as useRef10 } from "react";
-
-// ../../node_modules/@react-stately/form/dist/import.mjs
-import { createContext as $jcIOw$createContext, useMemo as $jcIOw$useMemo, useContext as $jcIOw$useContext, useState as $jcIOw$useState, useRef as $jcIOw$useRef, useEffect as $jcIOw$useEffect } from "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, $jcIOw$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, $jcIOw$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, $jcIOw$useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
-  let serverErrorMessages = (0, $jcIOw$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, $jcIOw$useState)(serverErrors);
-  let [isServerErrorCleared, setServerErrorCleared] = (0, $jcIOw$useState)(false);
-  if (serverErrors !== lastServerErrors) {
-    setLastServerErrors(serverErrors);
-    setServerErrorCleared(false);
-  }
-  let serverError = (0, $jcIOw$useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
-  let nextValidation = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let [currentValidity, setCurrentValidity] = (0, $jcIOw$useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let lastError = (0, $jcIOw$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, $jcIOw$useState)(false);
-  (0, $jcIOw$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
-import { useState as $6imuh$useState, useRef as $6imuh$useRef, useEffect as $6imuh$useEffect, useCallback as $6imuh$useCallback } from "react";
-function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (0, $6imuh$useState)(value || defaultValue);
-  let isControlledRef = (0, $6imuh$useRef)(value !== void 0);
-  let isControlled = value !== void 0;
-  (0, $6imuh$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, $6imuh$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
-import { useMemo as $fQ2SF$useMemo, useState as $fQ2SF$useState } from "react";
-var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
-var $a54cdc5c1942b639$var$i = 0;
-function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
-  let name = (0, $fQ2SF$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, $fQ2SF$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
+import { forwardRef as forwardRef19, memo as memo7, useMemo as useMemo9, useRef as useRef10 } from "react";
+import { useRadioGroupState } from "@react-stately/radio";
 import { useRadio, useRadioGroup } from "@react-aria/radio";
-import styled19, { css as css9 } from "styled-components";
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-import { createContext as createContext7, useContext as useContext9 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var RadioContext = createContext7(null);
+import { createContext as createContext5, useContext as useContext7 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var RadioContext = createContext5(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx25(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx28(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = useContext9(RadioContext);
+  const state = useContext7(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
-var SegmentedControl = forwardRef15(function SegmentedControlInner(props, ref) {
-  const ariaRadioGroupProps = useMemo6(() => ({
+import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
+var SegmentedControl = forwardRef19(function SegmentedControlInner(props, ref) {
+  const className = useClassNames("charcoal-segmented-control", props.className);
+  const ariaRadioGroupProps = useMemo9(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
     isRequired: props.required,
     "aria-label": props.name
   }), [props]);
-  const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(ariaRadioGroupProps);
+  const state = useRadioGroupState(ariaRadioGroupProps);
   const {
     radioGroupProps
   } = useRadioGroup(ariaRadioGroupProps, state);
-  const segmentedControlItems = useMemo6(() => {
+  const segmentedControlItems = useMemo9(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
     } : d);
   }, [props.data]);
-  return /* @__PURE__ */ jsx26(SegmentedControlRoot, { ref, ...radioGroupProps, className: props.className, children: /* @__PURE__ */ jsx26(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx26(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
+  return /* @__PURE__ */ jsx29("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ jsx29(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx29(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = memo6(SegmentedControl);
+var SegmentedControl_default = memo7(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
   const ref = useRef10(null);
-  const ariaRadioProps = useMemo6(() => ({
+  const ariaRadioProps = useMemo9(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1716,194 +1128,108 @@ var Segmented = (props) => {
     isDisabled,
     isSelected
   } = useRadio(ariaRadioProps, state, ref);
-  return /* @__PURE__ */ jsxs13(SegmentedRoot, { "aria-disabled": isDisabled || state.isReadOnly, checked: isSelected, children: [
-    /* @__PURE__ */ jsx26(SegmentedInput, { ...inputProps, ref }),
-    /* @__PURE__ */ jsx26(RadioLabel2, { children: /* @__PURE__ */ jsx26(SegmentedLabelInner, { children: props.children }) })
+  return /* @__PURE__ */ jsxs11("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
+    /* @__PURE__ */ jsx29("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
+    props.children
   ] });
 };
-var SegmentedControlRoot = styled19.div.withConfig({
-  componentId: "ccl__sc-1xmkkqt-0"
-})(["display:inline-flex;align-items:center;background-color:var(--charcoal-surface3);border-radius:16px;"]);
-var SegmentedRoot = styled19.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 && css9(["background-color:var(--charcoal-brand);color:var(--charcoal-text5);"]));
-var SegmentedInput = styled19.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 = styled19.div.withConfig({
-  componentId: "ccl__sc-1xmkkqt-3"
-})(["background:transparent;display:flex;align-items:center;height:22px;"]);
-var SegmentedLabelInner = styled19.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
-import { forwardRef as forwardRef16, memo as memo7, useMemo as useMemo7 } from "react";
-import styled20, { css as css10 } from "styled-components";
-import { useCheckbox } from "@react-aria/checkbox";
-import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
-import { useToggleState as useToggleState2 } from "react-stately";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss6 } from "@charcoal-ui/styled";
-import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
-var Checkbox = forwardRef16(function CheckboxInner({
-  invalid = false,
+import { forwardRef as forwardRef21, memo as memo9 } from "react";
+import { useId as useId5 } from "@react-aria/utils";
+
+// src/components/Checkbox/CheckboxInput/index.tsx
+import { forwardRef as forwardRef20, memo as memo8, useCallback as useCallback9 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var CheckboxInput = forwardRef20(function CheckboxInput2({
+  onChange,
+  checked,
+  invalid,
+  className,
+  rounded,
   ...props
 }, ref) {
-  const ariaCheckboxProps = useMemo7(() => ({
-    ...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 = useToggleState2(ariaCheckboxProps);
-  const objectRef = useObjectRef3(ref);
-  const {
-    inputProps
-  } = useCheckbox(ariaCheckboxProps, state, objectRef);
-  const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-  return /* @__PURE__ */ jsxs14(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
-    /* @__PURE__ */ jsxs14(CheckboxRoot, { children: [
-      /* @__PURE__ */ jsx27(CheckboxInput, { type: "checkbox", ...inputProps, readOnly: props.readonly }),
-      /* @__PURE__ */ jsx27(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ jsx27(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
-    ] }),
-    "children" in props && /* @__PURE__ */ jsx27(InputLabel, { children: props.children })
+  const handleChange = useCallback9((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.checked);
+  }, [onChange]);
+  const classNames = useClassNames("charcoal-checkbox-input", className);
+  return /* @__PURE__ */ jsx30("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
+});
+var CheckboxInput_default = memo8(CheckboxInput);
+
+// src/components/Checkbox/CheckboxWithLabel.tsx
+import React16 from "react";
+import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+var CheckboxWithLabel = React16.memo(function CheckboxWithLabel2({
+  className,
+  children,
+  input,
+  id,
+  disabled
+}) {
+  const classNames = useClassNames("charcoal-checkbox__label", className);
+  return /* @__PURE__ */ jsxs12("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
+    input,
+    /* @__PURE__ */ jsx31("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
-var Checkbox_default = memo7(Checkbox);
-var hiddenCss = css10(["visibility:hidden;"]);
-var InputRoot = styled20.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 = styled20.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-1"
-})(["position:relative;"]);
-var CheckboxInput = styled20.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);}}"], focusVisibleFocusRingCss6);
-var CheckboxInputOverlay = styled20.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 = styled20.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-4"
-})(["color:var(--charcoal-text2);font-size:14px;line-height:20px;"]);
+
+// src/components/Checkbox/index.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Checkbox = forwardRef21(function Checkbox2({
+  disabled,
+  className,
+  id,
+  children,
+  ...props
+}, ref) {
+  const htmlId = useId5(id);
+  const noChildren = children === void 0;
+  const input = /* @__PURE__ */ jsx32(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  if (noChildren) {
+    return input;
+  }
+  return /* @__PURE__ */ jsx32(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
+});
+var Checkbox_default = memo9(Checkbox);
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef17, memo as memo8, useMemo as useMemo8 } from "react";
-import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import styled21, { css as css11 } from "styled-components";
-import { px as px2 } from "@charcoal-ui/utils";
-import { useButton } from "@react-aria/button";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss7 } from "@charcoal-ui/styled";
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
-var sizeMap = {
-  S: 32,
-  M: 40
-};
-var TagItem = forwardRef17(function TagItemInner({
+import { forwardRef as forwardRef22, memo as memo10, useMemo as useMemo10 } from "react";
+import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
+import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+var TagItem = forwardRef22(function TagItemInner({
+  component,
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
   bgImage,
   size = "M",
-  disabled,
   status = "default",
-  className,
   ...props
 }, _ref) {
-  const ref = useObjectRef4(_ref);
-  const ariaButtonProps = useMemo8(() => ({
-    elementType: "a",
-    isDisabled: disabled,
-    ...props
-  }), [disabled, props]);
-  const {
-    buttonProps
-  } = useButton(ariaButtonProps, ref);
+  const ref = useObjectRef2(_ref);
   const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-  return /* @__PURE__ */ jsxs15(TagItemRoot, { ref, size: hasTranslatedLabel ? "M" : size, status, ...buttonProps, className, children: [
-    /* @__PURE__ */ jsx28(Background, { bgColor, bgImage, status }),
-    /* @__PURE__ */ jsxs15(Inner, { children: [
-      /* @__PURE__ */ jsxs15(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
-        hasTranslatedLabel && /* @__PURE__ */ jsx28(TranslatedLabel, { children: /* @__PURE__ */ jsx28(Label3, { children: translatedLabel }) }),
-        /* @__PURE__ */ jsx28(Label3, { children: label })
-      ] }),
-      status === "active" && /* @__PURE__ */ jsx28(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 = useMemo10(() => component ?? "button", [component]);
+  return /* @__PURE__ */ jsxs13(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
+    "--charcoal-tag-item-bg": bg
+  }, children: [
+    /* @__PURE__ */ jsxs13("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
+      hasTranslatedLabel && /* @__PURE__ */ jsx33("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
+      /* @__PURE__ */ jsx33("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+    ] }),
+    status === "active" && /* @__PURE__ */ jsx33(Icon_default, { name: "16/Remove" })
   ] });
 });
-var TagItem_default = memo8(TagItem);
-var horizontalPadding = ({
-  left,
-  right
-}) => css11(["padding-right:", ";padding-left:", ";"], px2(right), px2(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 = styled21.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)", focusVisibleFocusRingCss7);
-var Background = styled21.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" && css11(["background-color:var(--charcoal-surface3);"]), ({
-  bgImage
-}) => bgImage !== void 0 && css11(["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 = styled21.div.withConfig({
-  componentId: "ccl__sc-11j9pu2-2"
-})(["display:inline-flex;gap:8px;align-items:center;z-index:2;"]);
-var labelCSS = css11(["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 = css11(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
-var LabelWrapper = styled21.div.withConfig({
-  componentId: "ccl__sc-11j9pu2-3"
-})(["", ""], ({
-  isTranslate
-}) => isTranslate ?? false ? translateLabelCSS : labelCSS);
-var Label3 = styled21.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 = styled21.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 = memo10(TagItem);
 export {
   Button_default as Button,
   CharcoalProvider,
   Checkbox_default as Checkbox,
   Clickable_default as Clickable,
-  ComponentAbstraction,
   DropdownMenuItem,
   DropdownSelector,
   Icon_default as Icon,
@@ -1915,9 +1241,8 @@ export {
   ModalAlign,
   ModalBody,
   ModalButtons,
+  ModalCloseButton,
   ModalHeader,
-  MultiSelect_default as MultiSelect,
-  MultiSelectGroup,
   OverlayProvider,
   Radio_default as Radio,
   RadioGroup,
@@ -1926,7 +1251,6 @@ export {
   Switch_default as Switch,
   TagItem_default as TagItem,
   TextArea_default as TextArea,
-  TextField_default as TextField,
-  useComponentAbstraction
+  TextField_default as TextField
 };
 //# sourceMappingURL=index.esm.js.map