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

package/dist/index.esm.js

@@ -27,7 +27,13 @@ function useComponentAbstraction() {
 }
 
 // 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";
@@ -55,8 +61,8 @@ import { forwardRef as forwardRef2, 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
@@ -78,101 +84,37 @@ var Button = forwardRef2(function Button2({
 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 { useMemo as useMemo3, forwardRef as forwardRef3 } from "react";
 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 });
+var Clickable = forwardRef3(function Clickable2({
+  componentAs,
+  as,
+  ...props
+}, ref) {
+  const className = useClassNames("charcoal-clickable", props.className);
+  const Component = useMemo3(() => as ?? "button", [as]);
+  return /* @__PURE__ */ jsx4(Component, { ...props, ref, className, as: componentAs });
 });
 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 { forwardRef as forwardRef4, useMemo as useMemo4 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var IconButton = forwardRef4(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__ */ jsx5(Component, { ...rest, as: componentAs, ref, className: classNames, "data-size": size, "data-active": isActive, "data-variant": variant, children: /* @__PURE__ */ jsx5("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) {
@@ -195,17 +137,15 @@ 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, forwardRef as forwardRef5, useCallback, useContext as useContext2, useMemo as useMemo5 } from "react";
+import * as React5 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";
 var Radio = forwardRef5(function RadioInner({
   value,
   disabled = false,
   children,
-  className
+  ...props
 }, ref) {
   const {
     name,
@@ -215,6 +155,7 @@ var Radio = forwardRef5(function RadioInner({
     invalid,
     onChange
   } = useContext2(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> ?`
@@ -225,27 +166,13 @@ var Radio = forwardRef5(function RadioInner({
   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__ */ jsxs2("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
+    /* @__PURE__ */ jsx6("input", { type: "radio", className: "charcoal-radio__input", name, value, checked: isSelected, "aria-invalid": invalid, onChange: handleChange, 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({
+var RadioGroupContext = React5.createContext({
   name: void 0,
   selected: void 0,
   disabled: false,
@@ -255,233 +182,100 @@ var RadioGroupContext = React4.createContext({
     throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?");
   }
 });
-function RadioGroup({
-  className,
+var RadioGroup = forwardRef5(function RadioGroupInner({
   value,
-  label,
   name,
   onChange,
   disabled,
   readonly,
   invalid,
-  children
-}) {
+  children,
+  ...props
+}, ref) {
+  const classNames = useClassNames("charcoal-radio-group", props.className);
   const handleChange = useCallback((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 forwardRef7, 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__ */ jsx6(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx6("div", { role: "radiogroup", "aria-orientation": "vertical", "aria-invalid": invalid, className: classNames, ref, children }) });
 });
 
-// src/components/MultiSelect/index.tsx
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss3 } from "@charcoal-ui/styled";
+// src/components/Switch/index.tsx
+import { memo as memo3, forwardRef as forwardRef7 } from "react";
+import { useId } from "@react-aria/utils";
 
-// src/components/Icon/index.tsx
-import * as React5 from "react";
-import "@charcoal-ui/icons";
+// src/components/Switch/SwitchInput/index.tsx
+import { forwardRef as forwardRef6, useCallback as useCallback2 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var Icon = React5.forwardRef(function IconInner({
-  name,
-  scale,
-  unsafeNonGuidelineScale,
+var SwitchInput = forwardRef6(function SwitchInput2({
+  onChange,
   className,
-  ...rest
+  ...props
 }, ref) {
-  return /* @__PURE__ */ jsx7("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+  const handleChange = useCallback2((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.checked);
+  }, [onChange]);
+  props.children;
+  const classNames = useClassNames("charcoal-switch-input", className);
+  return /* @__PURE__ */ jsx7("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
 });
-var Icon_default = Icon;
+var SwitchInput_default = SwitchInput;
 
-// src/components/MultiSelect/index.tsx
+// src/components/Switch/SwitchWithLabel.tsx
+import * as React6 from "react";
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
-var MultiSelect = forwardRef7(function MultiSelectInner({
-  value,
-  disabled = false,
-  onChange,
-  variant = "default",
+var SwitchWithLabel = React6.memo(function SwitchWithLabel2({
+  children,
   className,
-  children
-}, ref) {
-  const {
-    name,
-    selected,
-    disabled: parentDisabled,
-    readonly,
-    invalid,
-    onChange: parentOnChange
-  } = 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__ */ jsx8(MultiSelectInput, { ...{
-      name,
-      value,
-      invalid
-    }, checked: isSelected, disabled: isDisabled, onChange: handleChange, overlay: variant === "overlay", "aria-invalid": invalid, ref }),
-    /* @__PURE__ */ jsx8(MultiSelectInputOverlay, { overlay: variant === "overlay", invalid, "aria-hidden": true, children: /* @__PURE__ */ jsx8(Icon_default, { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
-    Boolean(children) && /* @__PURE__ */ jsx8(MultiSelectLabel, { children })
+  disabled,
+  id,
+  input
+}) {
+  const classNames = useClassNames("charcoal-switch__label", className);
+  return /* @__PURE__ */ jsxs3("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
+    input,
+    /* @__PURE__ */ jsx8("div", { className: "charcoal-switch__label_div", children })
   ] });
 });
-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({
-  className,
-  name,
-  label,
-  selected,
-  onChange,
-  disabled = false,
-  readonly = false,
-  invalid = false,
-  children
-}) {
-  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__ */ jsx8(MultiSelectGroupContext.Provider, { value: {
-    name,
-    selected: Array.from(new Set(selected)),
-    disabled,
-    readonly,
-    invalid,
-    onChange: handleChange
-  }, children: /* @__PURE__ */ jsx8("div", { className, "aria-label": label, "data-testid": "SelectGroup", children }) });
-}
 
 // src/components/Switch/index.tsx
-import { useSwitch } from "@react-aria/switch";
-import { useMemo as useMemo3, memo as memo3, forwardRef as forwardRef8 } 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 jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var SwitchCheckbox = forwardRef8(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__ */ jsx9(SwitchInput, { ...rest, ref }),
-    "children" in props ? /* @__PURE__ */ jsx9(LabelInner, { children: props.children }) : void 0
-  ] });
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Switch = forwardRef7(function Switch2({
+  children,
+  onChange,
+  disabled,
+  className,
+  id,
+  ...props
+}, ref) {
+  const htmlId = useId(id);
+  const noChildren = children === void 0;
+  const input = /* @__PURE__ */ jsx9(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
+  if (noChildren) {
+    return input;
+  }
+  return /* @__PURE__ */ jsx9(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 = memo3(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 React7 from "react";
-import styled7, { css as css3 } from "styled-components";
+import * as React8 from "react";
+import styled, { css } from "styled-components";
 
 // src/components/FieldLabel/index.tsx
-import * as React6 from "react";
-import styled6 from "styled-components";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var FieldLabel = React6.forwardRef(function FieldLabel2({
+import * as React7 from "react";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var FieldLabel = React7.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -490,30 +284,16 @@ var FieldLabel = React6.forwardRef(function FieldLabel2({
   subLabel,
   ...labelProps
 }, ref) {
-  return /* @__PURE__ */ jsxs5(FieldLabelWrapper, { style, className, children: [
-    /* @__PURE__ */ jsx10(Label2, { ref, ...labelProps, children: label }),
-    required && /* @__PURE__ */ jsx10(RequiredText, { children: requiredText }),
-    /* @__PURE__ */ jsx10(SubLabelClickable, { children: /* @__PURE__ */ jsx10("span", { children: subLabel }) })
+  const classNames = useClassNames("charcoal-field-label-root", className);
+  return /* @__PURE__ */ jsxs4("div", { style, className: classNames, children: [
+    /* @__PURE__ */ jsx10("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
+    required && /* @__PURE__ */ jsx10("div", { className: "charcoal-field-label-required-text", children: requiredText }),
+    /* @__PURE__ */ jsx10("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ jsx10("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) {
@@ -550,151 +330,128 @@ function useFocusWithClick(containerRef, inputRef) {
 }
 
 // src/components/TextField/index.tsx
-import { mergeProps } from "@react-aria/utils";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var TextField = React7.forwardRef(function SingleLineTextFieldInner({
+import { mergeRefs as mergeRefs2, useId as useId2 } from "@react-aria/utils";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var TextField = React8.forwardRef(function SingleLineTextFieldInner({
+  assistiveText,
+  className,
+  disabled = false,
+  label = "",
+  maxLength,
   onChange,
+  prefix = null,
+  required,
+  requiredText,
+  showCount = false,
+  showLabel = false,
+  subLabel,
+  suffix = null,
+  type = "text",
+  value,
+  getCount = countCodePointsInString,
   ...props
-}, forwardRef19) {
-  const {
-    className,
-    showLabel = false,
-    showCount = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    readOnly = false,
-    assistiveText,
-    maxLength,
-    prefix = null,
-    suffix = null,
-    ...restProps
-  } = props;
+}, forwardRef20) {
+  const inputRef = 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 = useCallback3((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,
-    isReadOnly: readOnly,
-    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__ */ jsx11(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: [
+  useFocusWithClick(containerRef, inputRef);
+  const inputId = useId2(props.id);
+  const describedbyId = useId2();
+  const labelledbyId = useId2();
+  const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
+  return /* @__PURE__ */ jsxs5(TextFieldRoot, { className, isDisabled: disabled, children: [
+    /* @__PURE__ */ jsx11(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsxs5(StyledInputContainer, { "aria-disabled": disabled === true ? true : void 0, hasPrefix: prefix != null, hasSuffix: suffix != null || showCount, invalid: props.invalid === true, ref: containerRef, children: [
       prefix && /* @__PURE__ */ jsx11(PrefixContainer, { children: prefix }),
-      /* @__PURE__ */ jsx11(StyledInput, { ref: mergeRefs(forwardRef19, ariaRef), invalid, ...inputProps }),
-      (suffix || showCount) && /* @__PURE__ */ jsxs6(SuffixContainer, { children: [
+      /* @__PURE__ */ jsx11(StyledInput, { "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": props.invalid, "aria-labelledby": labelledbyId, id: inputId, invalid: props.invalid === true, maxLength, onChange: handleChange, prefix: props.rdfaPredix, ref: mergeRefs2(forwardRef20, inputRef), type, value, ...props }),
+      (suffix || showCount) && /* @__PURE__ */ jsxs5(SuffixContainer, { children: [
         suffix,
         showCount && /* @__PURE__ */ jsx11(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx11(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ jsx11(AssistiveText, { invalid: props.invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
-var TextFieldRoot = styled7.div.withConfig({
+var TextFieldRoot = styled.div.withConfig({
   componentId: "ccl__sc-3dd0tt-0"
-})(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
+})(["display:grid;grid-template-columns:1fr;grid-gap:4px;", ""], (p) => p.isDisabled && {
   opacity: p.theme.elementEffect.disabled.opacity
 });
-var TextFieldLabel = styled7(FieldLabel_default).withConfig({
+var StyledInputContainer = styled.div.withConfig({
   componentId: "ccl__sc-3dd0tt-1"
-})(["margin-bottom:8px;"]);
-var StyledInputContainer = styled7.div.withConfig({
+})(["display:grid;grid-template-columns:", ";height:40px;transition:0.2s background-color,0.2s box-shadow;color:var(--charcoal-text2);background-color:var(--charcoal-surface3);border-radius:4px;gap:4px;padding:0 8px;line-height:22px;font-size:14px;:not(:disabled):not([aria-disabled]):hover,[aria-disabled='false']:hover{background-color:var(--charcoal-surface3-hover);}:focus-within{outline:none;box-shadow:0 0 0 4px ", ";}", ""], (p) => [p.hasPrefix && "auto", "1fr", p.hasSuffix && "auto"].filter(Boolean).join(" "), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && css(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
+var PrefixContainer = styled.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"
+var SuffixContainer = styled.span.withConfig({
+  componentId: "ccl__sc-3dd0tt-3"
 })(["display:flex;align-items:center;gap:8px;"]);
-var StyledInput = styled7.input.withConfig({
-  componentId: "ccl__sc-3dd0tt-5"
+var StyledInput = styled.input.withConfig({
+  componentId: "ccl__sc-3dd0tt-4"
 })(["border:none;box-sizing:border-box;outline:none;font-family:inherit;transform-origin:top left;transform:scale(0.875);width:calc(100% / 0.875);height:calc(100% / 0.875);font-size:calc(14px / 0.875);line-height:calc(22px / 0.875);padding-left:0;padding-right:0;border-radius:calc(4px / 0.875);appearance:none;background:transparent;color:var(--charcoal-text2);&::placeholder{color:var(--charcoal-text3);}"]);
-var SingleLineCounter = styled7.span.withConfig({
-  componentId: "ccl__sc-3dd0tt-6"
+var SingleLineCounter = styled.span.withConfig({
+  componentId: "ccl__sc-3dd0tt-5"
 })(["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`})`);
+var AssistiveText = styled.p.withConfig({
+  componentId: "ccl__sc-3dd0tt-6"
+})(["font-size:14px;line-height:22px;margin:0;color:", ";"], (p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`);
 
 // src/components/TextArea/index.tsx
-import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
-import { forwardRef as forwardRef11, 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 jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var TextArea = forwardRef11(function TextAreaInner({
+import { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import styled2, { css as css2 } from "styled-components";
+import { useId as useId3 } from "@react-aria/utils";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var TextArea = forwardRef10(function TextAreaInner({
   onChange,
+  className,
+  value,
+  showCount = false,
+  showLabel = false,
+  label = "",
+  requiredText,
+  subLabel,
+  disabled = false,
+  required,
+  assistiveText,
+  maxLength,
+  autoHeight = false,
+  rows: initialRows = 4,
+  getCount = countCodePointsInString,
   ...props
-}, forwardRef19) {
-  const {
-    className,
-    showCount = false,
-    showLabel = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    readOnly = false,
-    assistiveText,
-    maxLength,
-    autoHeight = false,
-    rows: initialRows = 4,
-    ...restProps
-  } = props;
+}, forwardRef20) {
   const {
     visuallyHiddenProps
   } = useVisuallyHidden2();
   const textareaRef = useRef2(null);
-  const ariaRef = useRef2(null);
-  const [count, setCount] = useState2(countCodePointsInString(props.value ?? ""));
+  const textAreaRef = useRef2(null);
+  const [count, setCount] = useState2(getCount(value ?? ""));
   const [rows, setRows] = useState2(initialRows);
   const syncHeight = useCallback4((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 = useCallback4((e) => {
+    const value2 = e.target.value;
+    const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
       return;
     }
@@ -704,88 +461,86 @@ var TextArea = forwardRef11(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,
-    isReadOnly: readOnly,
-    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__ */ jsx12(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__ */ jsx12(StyledTextarea, { ref: mergeRefs(textareaRef, forwardRef19, ariaRef), rows, noBottomPadding: showCount, ...inputProps }),
+  useFocusWithClick(containerRef, textAreaRef);
+  const textAreaId = useId3(props.id);
+  const describedbyId = useId3();
+  const labelledbyId = useId3();
+  const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
+  return /* @__PURE__ */ jsxs6(TextFieldRoot2, { className, isDisabled: disabled, children: [
+    /* @__PURE__ */ jsx12(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsxs6(StyledTextareaContainer, { "aria-disabled": disabled === true ? "true" : void 0, invalid: props.invalid === true, ref: containerRef, rows: showCount ? rows + 1 : rows, children: [
+      /* @__PURE__ */ jsx12(StyledTextarea, { "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": props.invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, noBottomPadding: showCount, onChange: handleChange, ref: mergeRefs(forwardRef20, textAreaRef), rows, value, ...props }),
       showCount && /* @__PURE__ */ jsx12(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx12(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ jsx12(AssistiveText, { invalid: props.invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
-var TextFieldRoot2 = styled8.div.withConfig({
+var TextFieldRoot2 = styled2.div.withConfig({
   componentId: "ccl__sc-58waht-0"
-})(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
+})(["display:grid;grid-template-columns:1fr;grid-gap:4px;", ""], (p) => p.isDisabled && {
   opacity: p.theme.elementEffect.disabled.opacity
 });
-var StyledTextareaContainer = styled8.div.withConfig({
+var StyledTextareaContainer = styled2.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({
+}) => css2(["height:calc(22px * ", " + 18px);"], rows), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && css2(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
+var StyledTextarea = styled2.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({
+}) => css2(["height:calc(22px / 0.875 * ", " + ", "px);"], rows, noBottomPadding ? 9 : 20));
+var MultiLineCounter = styled2.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 React9 from "react";
+import "@charcoal-ui/icons";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Icon = React9.forwardRef(function IconInner({
+  name,
+  scale,
+  unsafeNonGuidelineScale,
+  className,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx13("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 useContext3, forwardRef as forwardRef13, memo as memo4 } from "react";
+import * as React13 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 { useTheme } from "styled-components";
+import { maxWidth } 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 { useDialog } from "@react-aria/dialog";
-import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from "@charcoal-ui/foundation";
-import { maxWidth } from "@charcoal-ui/utils";
-import { animated } from "react-spring";
 
 // src/_lib/useForwardedRef.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 function useForwardedRef(ref) {
-  const innerRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const innerRef = React10.useRef(null);
+  React10.useEffect(() => {
     if (!ref)
       return;
     if (typeof ref === "function") {
@@ -798,43 +553,30 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Dialog = forwardRef12(function Dialog2(props, forwardRef19) {
-  const ref = useForwardedRef(forwardRef19);
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Dialog = forwardRef12(function Dialog2({
+  size,
+  bottomSheet,
+  css: css4,
+  className,
+  ...props
+}, forwardRef20) {
+  const ref = useForwardedRef(forwardRef20);
   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__ */ jsx14("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, ref, ...props });
 });
-var AnimatedStyledDialogDiv = 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 React11 from "react";
+var ModalBackgroundContext = React11.createContext(null);
 
 // src/components/Modal/useCustomModalOverlay.tsx
-import * as React10 from "react";
+import * as React12 from "react";
 import { ariaHideOutside, useOverlay, useOverlayFocusContain } from "@react-aria/overlays";
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
@@ -867,7 +609,7 @@ function useCharcoalModalOverlay(props, state, ref) {
   }, ref);
   usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen);
   useOverlayFocusContain();
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     if (state.isOpen && ref.current) {
       return ariaHideOutside([ref.current]);
     }
@@ -879,7 +621,7 @@ function useCharcoalModalOverlay(props, state, ref) {
 }
 
 // src/components/Modal/index.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_Z_INDEX = 10;
 var Modal = forwardRef13(function ModalInner({
   children,
@@ -894,9 +636,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
@@ -908,7 +651,7 @@ var Modal = forwardRef13(function ModalInner({
     isOpen
   }, ref);
   const theme = useTheme();
-  const isMobile = useMedia(maxWidth2(theme.breakpoint.screen1)) ?? false;
+  const isMobile = useMedia(maxWidth(theme.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const showDismiss = !isMobile || bottomSheet !== true;
   const transition = useTransition(isOpen, {
@@ -936,8 +679,8 @@ var Modal = forwardRef13(function ModalInner({
       duration: 0
     }
   });
-  const bgRef = React11.useRef(null);
-  const handleClick = React11.useCallback((e) => {
+  const bgRef = React13.useRef(null);
+  const handleClick = React13.useCallback((e) => {
     if (e.currentTarget === e.target) {
       onClose();
     }
@@ -946,12 +689,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__ */ jsx15(Overlay, { portalContainer, children: /* @__PURE__ */ jsx15(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__ */ jsx15(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx15(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
     transform
-  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ jsxs8(ModalContext.Provider, { value: {
+  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ jsxs7(ModalContext.Provider, { value: {
     titleProps: {},
     title,
     close: onClose,
@@ -959,92 +705,59 @@ var Modal = forwardRef13(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ jsx14(ModalCrossButton, { size: "S", icon: "24/Close", onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ jsx15(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
+var AnimatedDialog = animated(Dialog);
 var Modal_default = memo4(Modal);
-var ModalContext = React11.createContext({
+var ModalContext = React13.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__ */ jsx15(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 { forwardRef as forwardRef14, useContext as useContext4 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function ModalHeader() {
-  const modalCtx = useContext5(ModalContext);
-  return /* @__PURE__ */ jsx15(ModalHeaderRoot, { $bottomSheet: modalCtx.bottomSheet, children: /* @__PURE__ */ jsx15(StyledModalTitle, {}) });
+  const modalCtx = useContext4(ModalContext);
+  return /* @__PURE__ */ jsx16("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ jsx16("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
+}
+var ModalAlign = createDivComponent("charcoal-modal-align");
+var ModalBody = createDivComponent("charcoal-modal-body");
+var ModalButtons = createDivComponent("charcoal-modal-buttons");
+function createDivComponent(mainClassName) {
+  return forwardRef14(function DivComponent({
+    className,
+    ...props
+  }, ref) {
+    const classNames = useClassNames(mainClassName, className);
+    return /* @__PURE__ */ jsx16("div", { className: classNames, ref, ...props });
+  });
 }
-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;"]);
 
 // 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 forwardRef15, useImperativeHandle, useRef as useRef5, memo as memo5 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var LoadingSpinner = forwardRef15(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__ */ jsx17("div", { role: "progressbar", style: {
+    "--charcoal-loading-spinner-size": `${size}px`,
+    "--charcoal-loading-spinner-padding": `${padding}px`
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ jsx17(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 LoadingSpinnerIcon = forwardRef15(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
   const iconRef = useRef5(null);
@@ -1058,22 +771,22 @@ var LoadingSpinnerIcon = forwardRef14(function LoadingSpinnerIcon2({
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ jsx16(Icon2, { ref: iconRef, once });
+  return /* @__PURE__ */ jsx17("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, useCallback as useCallback6 } from "react";
-import styled15, { css as css8 } from "styled-components";
-import { disabledSelector as disabledSelector2 } from "@charcoal-ui/utils";
+import { useState as useState3, useRef as useRef9, useMemo as useMemo7, useCallback as useCallback6 } from "react";
+import styled5, { css as css3 } from "styled-components";
+import { disabledSelector } from "@charcoal-ui/utils";
 
 // 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 useContext5, useRef as useRef6 } from "react";
 import { DismissButton, Overlay as Overlay2, usePopover } from "@react-aria/overlays";
-import styled13 from "styled-components";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import styled3 from "styled-components";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var _empty = () => null;
 function Popover(props) {
   const defaultPopoverRef = useRef6(null);
@@ -1092,29 +805,29 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = useContext6(ModalBackgroundContext);
+  const modalBackground = useContext5(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__ */ jsxs8(Overlay2, { portalContainer: document.body, children: [
+    /* @__PURE__ */ jsx18("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__ */ jsxs8(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
+      /* @__PURE__ */ jsx18(DismissButton, { onDismiss: () => props.onClose() }),
       props.children,
-      /* @__PURE__ */ jsx17(DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ jsx18(DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
-var DropdownPopoverDiv = styled13.div.withConfig({
+var DropdownPopoverDiv = styled3.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 jsx19 } from "react/jsx-runtime";
 function DropdownPopover({
   children,
   ...props
@@ -1134,16 +847,16 @@ function DropdownPopover({
       window.scrollTo(windowScrollX, windowScrollY);
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ jsx18(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
+  return /* @__PURE__ */ jsx19(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 React14 from "react";
 function findPreviewRecursive(children, value) {
-  const childArray = React12.Children.toArray(children);
+  const childArray = React14.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React12.isValidElement(child)) {
+    if (React14.isValidElement(child)) {
       if ("value" in child.props) {
         const childValue = child.props.value;
         if (childValue === value && "children" in child.props) {
@@ -1162,12 +875,12 @@ 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";
+import styled4 from "styled-components";
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-import { createContext as createContext6 } from "react";
-var MenuListContext = createContext6({
+import { createContext as createContext5 } from "react";
+var MenuListContext = createContext5({
   root: void 0,
   value: "",
   propsArray: [],
@@ -1176,13 +889,13 @@ var MenuListContext = createContext6({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-import * as React13 from "react";
+import * as React15 from "react";
 function getValuesRecursive(children) {
-  const childArray = React13.Children.toArray(children);
+  const childArray = React15.Children.toArray(children);
   const propsArray = [];
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React13.isValidElement(child)) {
+    if (React15.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
         propsArray.push({
@@ -1199,11 +912,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } 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__ */ jsx20(StyledUl, { ref: root, children: /* @__PURE__ */ jsx20(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -1212,14 +925,14 @@ function MenuList(props) {
     }
   }, children: props.children }) });
 }
-var StyledUl = styled14.ul.withConfig({
+var StyledUl = styled4.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 { focusVisibleFocusRingCss } from "@charcoal-ui/styled";
 import { useVisuallyHidden as useVisuallyHidden3 } from "@react-aria/visually-hidden";
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector({
   onChange,
@@ -1228,7 +941,7 @@ function DropdownSelector({
   const triggerRef = useRef9(null);
   const [isOpen, setIsOpen] = useState3(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
@@ -1236,73 +949,65 @@ function DropdownSelector({
   const handleChange = useCallback6((e) => {
     onChange(e.target.value);
   }, [onChange]);
-  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, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ jsx20("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+  return /* @__PURE__ */ jsxs9(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
+    props.showLabel === true && /* @__PURE__ */ jsx21(FieldLabel_default, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
+    /* @__PURE__ */ jsx21("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx21("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ jsx21("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
-    /* @__PURE__ */ jsxs10(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
+    /* @__PURE__ */ jsxs9(DropdownButton, { invalid: props.invalid, 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" })
+      /* @__PURE__ */ jsx21(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
+      /* @__PURE__ */ jsx21(DropdownButtonIcon, { name: "16/Menu" })
     ] }),
-    isOpen && /* @__PURE__ */ jsx20(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx20(MenuList, { value: props.value, onChange: (v) => {
+    isOpen && /* @__PURE__ */ jsx21(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx21(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__ */ jsx21(AssistiveText, { invalid: props.invalid === true, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = styled15.div.withConfig({
+var DropdownSelectorRoot = styled5.div.withConfig({
   componentId: "ccl__sc-1vnxmc8-0"
-})(["display:inline-block;width:100%;", "{cursor:default;opacity:0.32;}"], disabledSelector2);
-var DropdownFieldLabel = styled15(FieldLabel_default).withConfig({
+})(["display:grid;grid-template-columns:1fr;grid-gap:4px;width:100%;", "{cursor:default;opacity:0.32;}"], disabledSelector);
+var DropdownButton = styled5.button.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, ({
+})(["display:grid;grid-template-columns:1fr auto;justify-content:space-between;align-items:center;height:40px;width:100%;box-sizing:border-box;border:none;cursor:pointer;gap:4px;", "{cursor:default;}padding-right:8px;padding-left:8px;background-color:var(--charcoal-surface3);border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " ", "}", ""], disabledSelector, focusVisibleFocusRingCss, ({
   $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);}"]), ({
+}) => $active === true ? css3(["background-color:var(--charcoal-surface3-press);"]) : css3(["&: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"
+}) => invalid === true && css3(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
+var DropdownButtonText = styled5.span.withConfig({
+  componentId: "ccl__sc-1vnxmc8-2"
 })(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-", ");overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], (p) => p.$isText3 ? "text3" : "text2");
-var DropdownButtonIcon = styled15(Icon_default).withConfig({
-  componentId: "ccl__sc-1vnxmc8-4"
+var DropdownButtonIcon = styled5(Icon_default).withConfig({
+  componentId: "ccl__sc-1vnxmc8-3"
 })(["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";
+import styled7 from "styled-components";
 
 // src/components/DropdownSelector/ListItem/index.tsx
-import styled16 from "styled-components";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import styled6 from "styled-components";
+import { jsx as jsx22 } 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 }) });
+  return /* @__PURE__ */ jsx22(StyledLi, { role: "option", children: /* @__PURE__ */ jsx22(ItemDiv, { ...rest, children: props.children }) });
 }
-var StyledLi = styled16.li.withConfig({
+var StyledLi = styled6.li.withConfig({
   componentId: "ccl__sc-p1vs75-0"
 })(["list-style:none;"]);
-var ItemDiv = styled16.div.withConfig({
+var ItemDiv = styled6.div.withConfig({
   componentId: "ccl__sc-p1vs75-1"
 })(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;transition:background-color 0.2s;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{&:not(disabled):not([aria-disabled='true']){background-color:var(--charcoal-surface3);}}"]);
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-import { useCallback as useCallback7, useContext as useContext7 } from "react";
+import { useCallback as useCallback7, useContext as useContext6 } from "react";
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1339,7 +1044,7 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = useContext7(MenuListContext);
+  } = useContext6(MenuListContext);
   const setContextValue = useCallback7(() => {
     if (value !== void 0)
       setValue(value);
@@ -1379,7 +1084,7 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function MenuItem(props) {
   const {
     children,
@@ -1387,81 +1092,81 @@ function MenuItem(props) {
     ...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 });
+  return /* @__PURE__ */ jsx23(ListItem, { ...rest, as, "data-key": props.value, onKeyDown: handleKeyDown, onClick: props.disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": props.disabled, children: props.children });
 }
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-import { useContext as useContext8 } from "react";
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useContext as useContext7 } from "react";
+import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = useContext8(MenuListContext);
+  } = useContext7(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__ */ jsxs10(MenuItem, { ...rest, children: [
+    isSelected && /* @__PURE__ */ jsx24(Text2ColorIcon, { name: "16/Check" }),
+    /* @__PURE__ */ jsx24(StyledSpan, { isSelected, children: props.children })
   ] });
 }
-var StyledSpan = styled17.span.withConfig({
+var StyledSpan = styled7.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({
+var Text2ColorIcon = styled7(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 styled8 from "styled-components";
+import { jsx as jsx25, jsxs as jsxs11 } 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__ */ jsxs11(StyledLi2, { role: "presentation", children: [
+    /* @__PURE__ */ jsx25(TextSpan, { children: props.text }),
+    /* @__PURE__ */ jsx25(StyledUl2, { role: "group", children: props.children })
   ] });
 }
-var TextSpan = styled18.span.withConfig({
+var TextSpan = styled8.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({
+var StyledUl2 = styled8.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({
+var StyledLi2 = styled8.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";
+import { forwardRef as forwardRef16, memo as memo6, useMemo as useMemo8, 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 createContext6, useContext as useContext8 } from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var RadioContext = createContext6(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx25(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx26(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = useContext9(RadioContext);
+  const state = useContext8(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 jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
+var SegmentedControl = forwardRef16(function SegmentedControlInner(props, ref) {
+  const className = useClassNames("charcoal-segmented-control", props.className);
+  const ariaRadioGroupProps = useMemo8(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1472,19 +1177,19 @@ var SegmentedControl = forwardRef15(function SegmentedControlInner(props, ref) {
   const {
     radioGroupProps
   } = useRadioGroup(ariaRadioGroupProps, state);
-  const segmentedControlItems = useMemo6(() => {
+  const segmentedControlItems = useMemo8(() => {
     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__ */ jsx27("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ jsx27(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx27(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
 var SegmentedControl_default = memo6(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
   const ref = useRef10(null);
-  const ariaRadioProps = useMemo6(() => ({
+  const ariaRadioProps = useMemo8(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1494,180 +1199,103 @@ 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__ */ jsxs12("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
+    /* @__PURE__ */ jsx27("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 forwardRef17, memo as memo8 } from "react";
-import { useId } from "@react-aria/utils";
+import { forwardRef as forwardRef18, memo as memo8 } from "react";
+import { useId as useId4 } from "@react-aria/utils";
 
-// src/components/CheckboxInput/index.tsx
-import { forwardRef as forwardRef16, memo as memo7, useCallback as useCallback8 } from "react";
-import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
-var CheckboxInput = forwardRef16(function CheckboxInput2({
+// src/components/Checkbox/CheckboxInput/index.tsx
+import { forwardRef as forwardRef17, memo as memo7, useCallback as useCallback8 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var CheckboxInput = forwardRef17(function CheckboxInput2({
   onChange,
   checked,
   invalid,
+  className,
+  rounded,
   ...props
 }, ref) {
   const handleChange = useCallback8((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
-  const classNames = useClassNames("charcoal-checkbox-input__root", props.className);
-  return /* @__PURE__ */ jsxs14("div", { className: classNames, children: [
-    /* @__PURE__ */ jsx27("input", { ref, className: "charcoal-checkbox-input__input", type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, ...props }),
-    /* @__PURE__ */ jsx27("div", { className: "charcoal-checkbox-input__overlay", "aria-hidden": true, "data-checked": checked, children: /* @__PURE__ */ jsx27(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
-  ] });
+  const classNames = useClassNames("charcoal-checkbox-input", className);
+  return /* @__PURE__ */ jsx28("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
 });
 var CheckboxInput_default = memo7(CheckboxInput);
 
+// src/components/Checkbox/CheckboxWithLabel.tsx
+import React17 from "react";
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+var CheckboxWithLabel = React17.memo(function CheckboxWithLabel2({
+  className,
+  children,
+  input,
+  id,
+  disabled
+}) {
+  const classNames = useClassNames("charcoal-checkbox__label", className);
+  return /* @__PURE__ */ jsxs13("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
+    input,
+    /* @__PURE__ */ jsx29("div", { className: "charcoal-checkbox__label_div", children })
+  ] });
+});
+
 // src/components/Checkbox/index.tsx
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
-var Checkbox = forwardRef17(function CheckboxInner({
+import { jsx as jsx30 } from "react/jsx-runtime";
+var Checkbox = forwardRef18(function Checkbox2({
   disabled,
   className,
   id,
   children,
   ...props
 }, ref) {
-  const classNames = useClassNames("charcoal-checkbox__label", className);
-  const htmlId = useId(id);
-  const input = /* @__PURE__ */ jsx28(CheckboxInput_default, { ...props, id: htmlId, disabled, ref });
-  if (children === void 0) {
+  const htmlId = useId4(id);
+  const noChildren = children === void 0;
+  const input = /* @__PURE__ */ jsx30(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ jsxs15("label", { htmlFor: htmlId, "aria-disabled": disabled, className: classNames, children: [
-    input,
-    /* @__PURE__ */ jsx28("div", { className: "charcoal-checkbox__text", children })
-  ] });
+  return /* @__PURE__ */ jsx30(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
 var Checkbox_default = memo8(Checkbox);
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef18, memo as memo9, useMemo as useMemo7 } from "react";
-import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
-import styled20, { css as css10 } from "styled-components";
-import { px as px2 } from "@charcoal-ui/utils";
-import { useButton } from "@react-aria/button";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss6 } from "@charcoal-ui/styled";
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
-var sizeMap = {
-  S: 32,
-  M: 40
-};
-var TagItem = forwardRef18(function TagItemInner({
+import { forwardRef as forwardRef19, memo as memo9, useMemo as useMemo9 } from "react";
+import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
+import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
+var TagItem = forwardRef19(function TagItemInner({
+  as,
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
   bgImage,
   size = "M",
-  disabled,
   status = "default",
-  className,
   ...props
 }, _ref) {
-  const ref = useObjectRef3(_ref);
-  const ariaButtonProps = useMemo7(() => ({
-    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__ */ jsxs16(TagItemRoot, { ref, size: hasTranslatedLabel ? "M" : size, status, ...buttonProps, className, children: [
-    /* @__PURE__ */ jsx29(Background, { bgColor, bgImage, status }),
-    /* @__PURE__ */ jsxs16(Inner, { children: [
-      /* @__PURE__ */ jsxs16(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
-        hasTranslatedLabel && /* @__PURE__ */ jsx29(TranslatedLabel, { children: /* @__PURE__ */ jsx29(Label3, { children: translatedLabel }) }),
-        /* @__PURE__ */ jsx29(Label3, { children: label })
-      ] }),
-      status === "active" && /* @__PURE__ */ jsx29(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 = useMemo9(() => as ?? "button", [as]);
+  return /* @__PURE__ */ jsxs14(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
+    "--charcoal-tag-item-bg": bg
+  }, children: [
+    /* @__PURE__ */ jsxs14("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
+      hasTranslatedLabel && /* @__PURE__ */ jsx31("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
+      /* @__PURE__ */ jsx31("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+    ] }),
+    status === "active" && /* @__PURE__ */ jsx31(Icon_default, { name: "16/Remove" })
   ] });
 });
 var TagItem_default = memo9(TagItem);
-var horizontalPadding = ({
-  left,
-  right
-}) => css10(["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 = styled20.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)", focusVisibleFocusRingCss6);
-var Background = styled20.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" && css10(["background-color:var(--charcoal-surface3);"]), ({
-  bgImage
-}) => bgImage !== void 0 && css10(["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 = styled20.div.withConfig({
-  componentId: "ccl__sc-11j9pu2-2"
-})(["display:inline-flex;gap:8px;align-items:center;z-index:2;"]);
-var labelCSS = css10(["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 = css10(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
-var LabelWrapper = styled20.div.withConfig({
-  componentId: "ccl__sc-11j9pu2-3"
-})(["", ""], ({
-  isTranslate
-}) => isTranslate ?? false ? translateLabelCSS : labelCSS);
-var Label3 = styled20.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 = styled20.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;}"]);
 export {
   Button_default as Button,
   CharcoalProvider,
@@ -1685,9 +1313,8 @@ export {
   ModalAlign,
   ModalBody,
   ModalButtons,
+  ModalCloseButton,
   ModalHeader,
-  MultiSelect_default as MultiSelect,
-  MultiSelectGroup,
   OverlayProvider,
   Radio_default as Radio,
   RadioGroup,