@charcoal-ui/react 4.0.0-beta.7 → 4.0.0-rc.0

package/dist/index.esm.js

@@ -1,31 +1,3 @@
-// src/core/ComponentAbstraction.tsx
-import { useContext } from "react";
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var DefaultLink = React.forwardRef(function DefaultLink2({
-  to,
-  children,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx("a", { href: to, ref, ...rest, children });
-});
-var DefaultValue = {
-  Link: DefaultLink
-};
-var ComponentAbstractionContext = React.createContext(DefaultValue);
-function ComponentAbstraction({
-  children,
-  components
-}) {
-  return /* @__PURE__ */ jsx(ComponentAbstractionContext.Provider, { value: {
-    ...DefaultValue,
-    ...components
-  }, children });
-}
-function useComponentAbstraction() {
-  return useContext(ComponentAbstractionContext);
-}
-
 // src/core/SSRProvider.tsx
 import { SSRProvider as OriginSSRProvider } from "@react-aria/ssr";
 import { version, Fragment } from "react";
@@ -39,25 +11,15 @@ var SSRProvider = isReactVersionOver(18) ? Fragment : OriginSSRProvider;
 import { OverlayProvider } from "@react-aria/overlays";
 
 // src/core/CharcoalProvider.tsx
-import { ThemeProvider } from "styled-components";
-import { TokenInjector } from "@charcoal-ui/styled";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function CharcoalProvider({
-  themeMap,
-  defaultTheme = themeMap[":root"],
-  components = {},
-  injectTokens = true,
-  children,
-  background
+  children
 }) {
-  return /* @__PURE__ */ jsx2(SSRProvider, { children: /* @__PURE__ */ jsxs(ThemeProvider, { theme: defaultTheme, children: [
-    injectTokens && /* @__PURE__ */ jsx2(TokenInjector, { theme: themeMap, background }),
-    /* @__PURE__ */ jsx2(ComponentAbstraction, { components, children: /* @__PURE__ */ jsx2(OverlayProvider, { children }) })
-  ] }) });
+  return /* @__PURE__ */ jsx(SSRProvider, { children: /* @__PURE__ */ jsx(OverlayProvider, { children }) });
 }
 
 // src/components/Button/index.tsx
-import { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
+import { forwardRef, useMemo as useMemo2 } from "react";
 
 // src/_lib/useClassNames.ts
 import { useMemo } from "react";
@@ -66,53 +28,50 @@ function useClassNames(...classNames) {
 }
 
 // src/components/Button/index.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Button = forwardRef2(function Button2({
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button = forwardRef(function Button2({
   variant,
   fullWidth,
   size,
   className,
-  as,
+  component,
   isActive,
-  componentAs,
   ...props
 }, ref) {
-  const Component = useMemo2(() => as ?? "button", [as]);
+  const Component = useMemo2(() => component ?? "button", [component]);
   const classNames = useClassNames("charcoal-button", className);
-  return /* @__PURE__ */ jsx3(Component, { ...props, as: componentAs, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
+  return /* @__PURE__ */ jsx2(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
 });
 var Button_default = Button;
 
 // src/components/Clickable/index.tsx
-import { useMemo as useMemo3, forwardRef as forwardRef3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Clickable = forwardRef3(function Clickable2({
-  componentAs,
-  as,
+import { useMemo as useMemo3, forwardRef as forwardRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Clickable = forwardRef2(function Clickable2({
+  component,
   ...props
 }, ref) {
   const className = useClassNames("charcoal-clickable", props.className);
-  const Component = useMemo3(() => as ?? "button", [as]);
-  return /* @__PURE__ */ jsx4(Component, { ...props, ref, className, as: componentAs });
+  const Component = useMemo3(() => component ?? "button", [component]);
+  return /* @__PURE__ */ jsx3(Component, { ...props, ref, className });
 });
 var Clickable_default = Clickable;
 
 // src/components/IconButton/index.tsx
-import { forwardRef as forwardRef4, useMemo as useMemo4 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var IconButton = forwardRef4(function IconButtonInner({
+import { forwardRef as forwardRef3, useMemo as useMemo4 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var IconButton = forwardRef3(function IconButtonInner({
   variant = "Default",
   size = "M",
   icon,
   isActive = false,
-  componentAs,
-  as,
+  component,
   ...rest
 }, ref) {
   validateIconSize(size, icon);
-  const Component = useMemo4(() => as ?? "button", [as]);
+  const Component = useMemo4(() => component ?? "button", [component]);
   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 }) });
+  return /* @__PURE__ */ jsx4(Component, { ...rest, ref, className: classNames, "data-size": size, "data-active": isActive, "data-variant": variant, children: /* @__PURE__ */ jsx4("pixiv-icon", { name: icon }) });
 });
 var IconButton_default = IconButton;
 function validateIconSize(size, icon) {
@@ -137,10 +96,42 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-import { memo, forwardRef as forwardRef5, useCallback, useContext as useContext2, useMemo as useMemo5 } from "react";
-import * as React5 from "react";
+import { memo as memo2, forwardRef as forwardRef5, useContext } from "react";
 import warning from "warning";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/components/Radio/RadioGroupContext.ts
+import * as React4 from "react";
+var RadioGroupContext = React4.createContext({
+  name: void 0,
+  selected: void 0,
+  disabled: false,
+  readonly: false,
+  invalid: false,
+  onChange() {
+    throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?");
+  }
+});
+
+// src/components/Radio/RadioInput/index.tsx
+import { forwardRef as forwardRef4, memo, useCallback } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var RadioInput = forwardRef4(function RadioInput2({
+  onChange,
+  invalid,
+  className,
+  ...props
+}, ref) {
+  const handleChange = useCallback((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.value);
+  }, [onChange]);
+  const classNames = useClassNames("charcoal-radio-input", className);
+  return /* @__PURE__ */ jsx5("input", { className: classNames, ref, type: "radio", onChange: handleChange, "aria-invalid": invalid, ...props });
+});
+var RadioInput_default = memo(RadioInput);
+
+// src/components/Radio/index.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 var Radio = forwardRef5(function RadioInner({
   value,
   disabled = false,
@@ -154,7 +145,7 @@ var Radio = forwardRef5(function RadioInner({
     readonly,
     invalid,
     onChange
-  } = useContext2(RadioGroupContext);
+  } = useContext(RadioGroupContext);
   const classNames = useClassNames("charcoal-radio__label", props.className);
   warning(
     name !== void 0,
@@ -163,37 +154,30 @@ var Radio = forwardRef5(function RadioInner({
   const isSelected = value === selected;
   const isDisabled = disabled || isParentDisabled;
   const isReadonly = readonly && !isSelected;
-  const handleChange = useCallback((e) => {
-    onChange(e.currentTarget.value);
-  }, [onChange]);
-  return /* @__PURE__ */ jsxs2("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 }),
+  return /* @__PURE__ */ jsxs("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
+    /* @__PURE__ */ jsx6(RadioInput_default, { name, value, checked: isSelected, "aria-invalid": invalid, onChange, disabled: isDisabled || isReadonly, ref }),
     children != null && /* @__PURE__ */ jsx6("div", { className: "charcoal-radio__label_div", children })
   ] });
 });
-var Radio_default = memo(Radio);
-var RadioGroupContext = React5.createContext({
-  name: void 0,
-  selected: void 0,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  onChange() {
-    throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?");
-  }
-});
-var RadioGroup = forwardRef5(function RadioGroupInner({
+var Radio_default = memo2(Radio);
+
+// src/components/Radio/RadioGroup/index.tsx
+import { forwardRef as forwardRef6, useCallback as useCallback2, useMemo as useMemo5 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var RadioGroup = forwardRef6(function RadioGroupInner({
   value,
+  label,
   name,
   onChange,
   disabled,
   readonly,
   invalid,
   children,
+  "aria-orientation": ariaOrientation = "vertical",
   ...props
 }, ref) {
   const classNames = useClassNames("charcoal-radio-group", props.className);
-  const handleChange = useCallback((next) => {
+  const handleChange = useCallback2((next) => {
     onChange(next);
   }, [onChange]);
   const contextValue = useMemo5(() => ({
@@ -204,35 +188,35 @@ var RadioGroup = forwardRef5(function RadioGroupInner({
     invalid: invalid ?? false,
     onChange: handleChange
   }), [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 }) });
+  return /* @__PURE__ */ jsx7(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7("div", { role: "radiogroup", "aria-disabled": disabled, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": props["aria-labelledby"], "aria-orientation": ariaOrientation, className: classNames, ref, children }) });
 });
 
 // src/components/Switch/index.tsx
-import { memo as memo3, forwardRef as forwardRef7 } from "react";
+import { memo as memo4, forwardRef as forwardRef8 } from "react";
 import { useId } from "@react-aria/utils";
 
 // src/components/Switch/SwitchInput/index.tsx
-import { forwardRef as forwardRef6, useCallback as useCallback2 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var SwitchInput = forwardRef6(function SwitchInput2({
+import { forwardRef as forwardRef7, useCallback as useCallback3 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SwitchInput = forwardRef7(function SwitchInput2({
   onChange,
   className,
   ...props
 }, ref) {
-  const handleChange = useCallback2((e) => {
+  const handleChange = useCallback3((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 });
+  return /* @__PURE__ */ jsx8("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
 });
 var SwitchInput_default = SwitchInput;
 
 // src/components/Switch/SwitchWithLabel.tsx
-import * as React6 from "react";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
-var SwitchWithLabel = React6.memo(function SwitchWithLabel2({
+import * as React5 from "react";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var SwitchWithLabel = React5.memo(function SwitchWithLabel2({
   children,
   className,
   disabled,
@@ -240,15 +224,15 @@ var SwitchWithLabel = React6.memo(function SwitchWithLabel2({
   input
 }) {
   const classNames = useClassNames("charcoal-switch__label", className);
-  return /* @__PURE__ */ jsxs3("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
+  return /* @__PURE__ */ jsxs2("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
     input,
-    /* @__PURE__ */ jsx8("div", { className: "charcoal-switch__label_div", children })
+    /* @__PURE__ */ jsx9("div", { className: "charcoal-switch__label_div", children })
   ] });
 });
 
 // src/components/Switch/index.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Switch = forwardRef7(function Switch2({
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Switch = forwardRef8(function Switch2({
   children,
   onChange,
   disabled,
@@ -258,23 +242,23 @@ var Switch = forwardRef7(function Switch2({
 }, 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" });
+  const input = /* @__PURE__ */ jsx10(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ jsx9(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ jsx10(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Switch_default = memo3(Switch);
+var Switch_default = memo4(Switch);
 
 // src/components/TextField/index.tsx
 import { useVisuallyHidden } from "@react-aria/visually-hidden";
-import { useCallback as useCallback3, useEffect as useEffect2, useRef, useState } from "react";
-import * as React8 from "react";
+import { useCallback as useCallback4, useEffect as useEffect2, useRef, useState } from "react";
+import * as React7 from "react";
 
 // src/components/FieldLabel/index.tsx
-import * as React7 from "react";
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-var FieldLabel = React7.forwardRef(function FieldLabel2({
+import * as React6 from "react";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var FieldLabel = React6.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -284,10 +268,10 @@ var FieldLabel = React7.forwardRef(function FieldLabel2({
   ...labelProps
 }, ref) {
   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 }) })
+  return /* @__PURE__ */ jsxs3("div", { style, className: classNames, children: [
+    /* @__PURE__ */ jsx11("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
+    required && /* @__PURE__ */ jsx11("div", { className: "charcoal-field-label-required-text", children: requiredText }),
+    /* @__PURE__ */ jsx11("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ jsx11("span", { children: subLabel }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
@@ -332,15 +316,15 @@ function useFocusWithClick(containerRef, inputRef) {
 import { mergeRefs as mergeRefs2, useId as useId2 } from "@react-aria/utils";
 
 // src/_lib/createDivComponent.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function createDivComponent(mainClassName) {
-  return forwardRef9(function DivComponent({
+  return forwardRef10(function DivComponent({
     className,
     ...props
   }, ref) {
     const classNames = useClassNames(mainClassName, className);
-    return /* @__PURE__ */ jsx11("div", { className: classNames, ref, ...props });
+    return /* @__PURE__ */ jsx12("div", { className: classNames, ref, ...props });
   });
 }
 
@@ -348,8 +332,8 @@ function createDivComponent(mainClassName) {
 var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
 
 // src/components/TextField/index.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
-var TextField = React8.forwardRef(function SingleLineTextFieldInner({
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   assistiveText,
   className,
   disabled = false,
@@ -368,13 +352,13 @@ var TextField = React8.forwardRef(function SingleLineTextFieldInner({
   value,
   getCount = countCodePointsInString,
   ...props
-}, forwardRef20) {
+}, forwardRef23) {
   const inputRef = useRef(null);
   const {
     visuallyHiddenProps
   } = useVisuallyHidden();
   const [count, setCount] = useState(getCount(value ?? ""));
-  const handleChange = useCallback3((e) => {
+  const handleChange = useCallback4((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -392,28 +376,28 @@ var TextField = React8.forwardRef(function SingleLineTextFieldInner({
   const describedbyId = useId2();
   const labelledbyId = useId2();
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
-  const classNames = useClassNames("charcoal-text-field-root");
-  return /* @__PURE__ */ jsxs5("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsx12(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ jsxs5("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
-      prefix && /* @__PURE__ */ jsx12("div", { className: "charcoal-text-field-prefix", children: prefix }),
-      /* @__PURE__ */ jsx12("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: mergeRefs2(forwardRef20, inputRef), type, value, ...props }),
-      (suffix || showCount) && /* @__PURE__ */ jsxs5("div", { className: "charcoal-text-field-suffix", children: [
+  const classNames = useClassNames("charcoal-text-field-root", className);
+  return /* @__PURE__ */ jsxs4("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ jsx13(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsxs4("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
+      prefix && /* @__PURE__ */ jsx13("div", { className: "charcoal-text-field-prefix", children: prefix }),
+      /* @__PURE__ */ jsx13("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: mergeRefs2(forwardRef23, inputRef), type, value, ...props }),
+      (suffix || showCount) && /* @__PURE__ */ jsxs4("div", { className: "charcoal-text-field-suffix", children: [
         suffix,
-        showCount && /* @__PURE__ */ jsx12("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ jsx13("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    showAssistiveText && /* @__PURE__ */ jsx12(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ jsx13(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
 
 // src/components/TextArea/index.tsx
 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 { forwardRef as forwardRef12, useCallback as useCallback5, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 import { useId as useId3 } from "@react-aria/utils";
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
-var TextArea = forwardRef11(function TextAreaInner({
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var TextArea = forwardRef12(function TextAreaInner({
   onChange,
   className,
   value,
@@ -431,20 +415,20 @@ var TextArea = forwardRef11(function TextAreaInner({
   invalid,
   getCount = countCodePointsInString,
   ...props
-}, forwardRef20) {
+}, forwardRef23) {
   const {
     visuallyHiddenProps
   } = useVisuallyHidden2();
   const textareaRef = useRef2(null);
   const [count, setCount] = useState2(getCount(value ?? ""));
   const [rows, setRows] = useState2(initialRows);
-  const syncHeight = useCallback4((textarea) => {
+  const syncHeight = useCallback5((textarea) => {
     const rows2 = (`${textarea.value}
 `.match(/\n/gu)?.length ?? 0) || 1;
     setRows(initialRows <= rows2 ? rows2 : initialRows);
   }, [initialRows]);
   const nonControlled = value === void 0;
-  const handleChange = useCallback4((e) => {
+  const handleChange = useCallback5((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -473,53 +457,50 @@ var TextArea = forwardRef11(function TextAreaInner({
   const labelledbyId = useId3();
   const classNames = useClassNames("charcoal-text-area-root", className);
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
-  return /* @__PURE__ */ jsxs6("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsx13(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ jsxs6("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
+  return /* @__PURE__ */ jsxs5("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ jsx14(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsxs5("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
       "--charcoal-text-area-rows": `${showCount ? rows + 1 : rows}`
     }, children: [
-      /* @__PURE__ */ jsx13("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef20, textareaRef), rows, value, disabled, ...props }),
-      showCount && /* @__PURE__ */ jsx13("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+      /* @__PURE__ */ jsx14("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef23, textareaRef), rows, value, disabled, ...props }),
+      showCount && /* @__PURE__ */ jsx14("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    showAssistiveText && /* @__PURE__ */ jsx13(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ jsx14(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
 
 // src/components/Icon/index.tsx
-import * as React9 from "react";
+import * as React8 from "react";
 import "@charcoal-ui/icons";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Icon = React9.forwardRef(function IconInner({
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Icon = React8.forwardRef(function IconInner({
   name,
   scale,
   unsafeNonGuidelineScale,
   className,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx14("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+  return /* @__PURE__ */ jsx15("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
 });
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-import { useContext as useContext3, forwardRef as forwardRef14, memo as memo4 } from "react";
-import * as React13 from "react";
+import { useContext as useContext2, forwardRef as forwardRef15, memo as memo5 } from "react";
+import * as React12 from "react";
 import { Overlay } from "@react-aria/overlays";
-import { useTheme } from "styled-components";
-import { maxWidth } from "@charcoal-ui/utils";
-import { useMedia } from "@charcoal-ui/styled";
 import { animated, useTransition, easings } from "react-spring";
 import { useObjectRef } from "@react-aria/utils";
 
 // src/components/Modal/Dialog/index.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import { useDialog } from "@react-aria/dialog";
 
 // src/_lib/useForwardedRef.tsx
-import * as React10 from "react";
+import * as React9 from "react";
 function useForwardedRef(ref) {
-  const innerRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const innerRef = React9.useRef(null);
+  React9.useEffect(() => {
     if (!ref)
       return;
     if (typeof ref === "function") {
@@ -532,30 +513,29 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Dialog = forwardRef13(function Dialog2({
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Dialog = forwardRef14(function Dialog2({
   size,
   bottomSheet,
-  css: css2,
   className,
   ...props
-}, forwardRef20) {
-  const ref = useForwardedRef(forwardRef20);
+}, forwardRef23) {
+  const ref = useForwardedRef(forwardRef23);
   const {
     dialogProps
   } = useDialog({
     role: "dialog"
   }, ref);
   const classNames = useClassNames("charcoal-modal-dialog", className);
-  return /* @__PURE__ */ jsx15("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, ref, ...props });
+  return /* @__PURE__ */ jsx16("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, "data-size": size, ref, ...props });
 });
 
 // src/components/Modal/ModalBackgroundContext.tsx
-import * as React11 from "react";
-var ModalBackgroundContext = React11.createContext(null);
+import * as React10 from "react";
+var ModalBackgroundContext = React10.createContext(null);
 
 // src/components/Modal/useCustomModalOverlay.tsx
-import * as React12 from "react";
+import * as React11 from "react";
 import { ariaHideOutside, useOverlay, useOverlayFocusContain } from "@react-aria/overlays";
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
@@ -588,7 +568,7 @@ function useCharcoalModalOverlay(props, state, ref) {
   }, ref);
   usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen);
   useOverlayFocusContain();
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     if (state.isOpen && ref.current) {
       return ariaHideOutside([ref.current]);
     }
@@ -598,11 +578,27 @@ function useCharcoalModalOverlay(props, state, ref) {
     underlayProps
   };
 }
+function isWindowDefined() {
+  return typeof window !== "undefined";
+}
+function useWindowWidth() {
+  const [width, setWidth] = React11.useState(isWindowDefined() ? window.innerWidth : null);
+  React11.useEffect(() => {
+    const handleResize = () => {
+      setWidth(window.innerWidth);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  });
+  return width;
+}
 
 // src/components/Modal/index.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_Z_INDEX = 10;
-var Modal = forwardRef14(function ModalInner({
+var Modal = forwardRef15(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -629,8 +625,7 @@ var Modal = forwardRef14(function ModalInner({
     onClose,
     isOpen
   }, ref);
-  const theme = useTheme();
-  const isMobile = useMedia(maxWidth(theme.breakpoint.screen1)) ?? false;
+  const isMobile = (useWindowWidth() ?? Infinity) < 744;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const showDismiss = !isMobile || bottomSheet !== true;
   const transition = useTransition(isOpen, {
@@ -658,8 +653,8 @@ var Modal = forwardRef14(function ModalInner({
       duration: 0
     }
   });
-  const bgRef = React13.useRef(null);
-  const handleClick = React13.useCallback((e) => {
+  const bgRef = React12.useRef(null);
+  const handleClick = React12.useCallback((e) => {
     if (e.currentTarget === e.target) {
       onClose();
     }
@@ -668,15 +663,15 @@ var Modal = forwardRef14(function ModalInner({
     backgroundColor,
     overflow,
     transform
-  }, item) => item && /* @__PURE__ */ jsx16(Overlay, { portalContainer, children: /* @__PURE__ */ jsx16(animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
+  }, item) => item && /* @__PURE__ */ jsx17(Overlay, { portalContainer, children: /* @__PURE__ */ jsx17(animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
     backgroundColor,
     overflow,
     zIndex
   } : {
     zIndex
-  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ jsx16(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx16(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
+  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ jsx17(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx17(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
     transform
-  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ jsxs7(ModalContext.Provider, { value: {
+  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ jsxs6(ModalContext.Provider, { value: {
     titleProps: {},
     title,
     close: onClose,
@@ -684,12 +679,12 @@ var Modal = forwardRef14(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ jsx16(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ jsx17(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var AnimatedDialog = animated(Dialog);
-var Modal_default = memo4(Modal);
-var ModalContext = React13.createContext({
+var Modal_default = memo5(Modal);
+var ModalContext = React12.createContext({
   titleProps: {},
   title: "",
   close: void 0,
@@ -697,37 +692,37 @@ var ModalContext = React13.createContext({
   bottomSheet: false
 });
 function ModalCloseButton(props) {
-  return /* @__PURE__ */ jsx16(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
+  return /* @__PURE__ */ jsx17(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
 }
 
 // src/components/Modal/ModalPlumbing.tsx
-import { useContext as useContext4 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { useContext as useContext3 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function ModalHeader() {
-  const modalCtx = useContext4(ModalContext);
-  return /* @__PURE__ */ jsx17("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ jsx17("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
+  const modalCtx = useContext3(ModalContext);
+  return /* @__PURE__ */ jsx18("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ jsx18("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
 }
 var ModalAlign = createDivComponent("charcoal-modal-align");
 var ModalBody = createDivComponent("charcoal-modal-body");
 var ModalButtons = createDivComponent("charcoal-modal-buttons");
 
 // src/components/LoadingSpinner/index.tsx
-import { forwardRef as forwardRef15, useImperativeHandle, useRef as useRef5, memo as memo5 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var LoadingSpinner = forwardRef15(function LoadingSpinnerInner({
+import { forwardRef as forwardRef16, useImperativeHandle, useRef as useRef5, memo as memo6 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var LoadingSpinner = forwardRef16(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
   ...props
 }, ref) {
   const classNames = useClassNames("charcoal-loading-spinner", props.className);
-  return /* @__PURE__ */ jsx18("div", { role: "progressbar", style: {
+  return /* @__PURE__ */ jsx19("div", { role: "progressbar", style: {
     "--charcoal-loading-spinner-size": `${size}px`,
     "--charcoal-loading-spinner-padding": `${padding}px`
-  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ jsx18(LoadingSpinnerIcon, {}) });
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ jsx19(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = memo5(LoadingSpinner);
-var LoadingSpinnerIcon = forwardRef15(function LoadingSpinnerIcon2({
+var LoadingSpinner_default = memo6(LoadingSpinner);
+var LoadingSpinnerIcon = forwardRef16(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
   const iconRef = useRef5(null);
@@ -741,22 +736,19 @@ var LoadingSpinnerIcon = forwardRef15(function LoadingSpinnerIcon2({
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ jsx18("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
+  return /* @__PURE__ */ jsx19("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
 });
 
 // src/components/DropdownSelector/index.tsx
-import { useState as useState3, useRef as useRef9, useMemo as useMemo7, useCallback as useCallback6 } from "react";
-import styled3, { css } from "styled-components";
-import { disabledSelector } from "@charcoal-ui/utils";
+import { useState as useState4, useRef as useRef9, useMemo as useMemo7, useCallback as useCallback7 } from "react";
 
 // src/components/DropdownSelector/DropdownPopover.tsx
 import { useEffect as useEffect7, useRef as useRef7 } from "react";
 
 // src/components/DropdownSelector/Popover/index.tsx
-import { useContext as useContext5, useRef as useRef6 } from "react";
+import { useContext as useContext4, useRef as useRef6 } from "react";
 import { DismissButton, Overlay as Overlay2, usePopover } from "@react-aria/overlays";
-import styled from "styled-components";
-import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
 var _empty = () => null;
 function Popover(props) {
   const defaultPopoverRef = useRef6(null);
@@ -775,29 +767,28 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = useContext5(ModalBackgroundContext);
+  const modalBackground = useContext4(ModalBackgroundContext);
   usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
-  return /* @__PURE__ */ jsxs8(Overlay2, { portalContainer: document.body, children: [
-    /* @__PURE__ */ jsx19("div", { ...underlayProps, style: {
+  return /* @__PURE__ */ jsxs7(Overlay2, { portalContainer: document.body, children: [
+    /* @__PURE__ */ jsx20("div", { ...underlayProps, style: {
       position: "fixed",
       zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
       inset: 0
     } }),
-    /* @__PURE__ */ jsxs8(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
-      /* @__PURE__ */ jsx19(DismissButton, { onDismiss: () => props.onClose() }),
+    /* @__PURE__ */ jsxs7("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
+      /* @__PURE__ */ jsx20(DismissButton, { onDismiss: () => props.onClose() }),
+      /* @__PURE__ */ jsx20("div", { tabIndex: 0, onFocus: props.onClose }),
       props.children,
-      /* @__PURE__ */ jsx19(DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ jsx20("div", { tabIndex: 0, onFocus: props.onClose }),
+      /* @__PURE__ */ jsx20(DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
-var DropdownPopoverDiv = styled.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 jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function DropdownPopover({
   children,
   ...props
@@ -809,24 +800,31 @@ function DropdownPopover({
     }
   }, [props.triggerRef, props.isOpen]);
   useEffect7(() => {
-    if (props.isOpen && props.value !== void 0) {
-      const windowScrollY = window.scrollY;
-      const windowScrollX = window.scrollX;
-      const selectedElement = document.querySelector(`[data-key="${props.value.toString()}"]`);
-      selectedElement?.focus();
-      window.scrollTo(windowScrollX, windowScrollY);
+    if (props.isOpen) {
+      if (props.value !== void 0 && props.value !== "") {
+        const windowScrollY = window.scrollY;
+        const windowScrollX = window.scrollX;
+        const selectedElement = document.querySelector(`[data-key="${props.value.toString()}"]`);
+        selectedElement?.focus();
+        window.scrollTo(windowScrollX, windowScrollY);
+      } else {
+        const el = ref.current?.querySelector("[role='option']");
+        if (el instanceof HTMLElement) {
+          el.focus();
+        }
+      }
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ jsx20(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
+  return /* @__PURE__ */ jsx21(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
-import * as React14 from "react";
+import * as React13 from "react";
 function findPreviewRecursive(children, value) {
-  const childArray = React14.Children.toArray(children);
+  const childArray = React13.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React14.isValidElement(child)) {
+    if (React13.isValidElement(child)) {
       if ("value" in child.props) {
         const childValue = child.props.value;
         if (childValue === value && "children" in child.props) {
@@ -846,11 +844,10 @@ function findPreviewRecursive(children, value) {
 
 // src/components/DropdownSelector/MenuList/index.tsx
 import { useMemo as useMemo6, useRef as useRef8 } from "react";
-import styled2 from "styled-components";
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-import { createContext as createContext5 } from "react";
-var MenuListContext = createContext5({
+import { createContext as createContext4 } from "react";
+var MenuListContext = createContext4({
   root: void 0,
   value: "",
   propsArray: [],
@@ -859,13 +856,13 @@ var MenuListContext = createContext5({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-import * as React15 from "react";
+import * as React14 from "react";
 function getValuesRecursive(children) {
-  const childArray = React15.Children.toArray(children);
+  const childArray = React14.Children.toArray(children);
   const propsArray = [];
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React15.isValidElement(child)) {
+    if (React14.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
         propsArray.push({
@@ -882,11 +879,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function MenuList(props) {
   const root = useRef8(null);
   const propsArray = useMemo6(() => getValuesRecursive(props.children), [props.children]);
-  return /* @__PURE__ */ jsx21(StyledUl, { ref: root, children: /* @__PURE__ */ jsx21(MenuListContext.Provider, { value: {
+  return /* @__PURE__ */ jsx22("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ jsx22(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -895,89 +892,70 @@ function MenuList(props) {
     }
   }, children: props.children }) });
 }
-var StyledUl = styled2.ul.withConfig({
-  componentId: "ccl__sc-1y72v02-0"
-})(["padding:0;margin:0;"]);
 
 // src/components/DropdownSelector/index.tsx
-import { focusVisibleFocusRingCss } from "@charcoal-ui/styled";
 import { useVisuallyHidden as useVisuallyHidden3 } from "@react-aria/visually-hidden";
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
-var defaultRequiredText = "*\u5FC5\u9808";
+import { useId as useId4 } from "@react-aria/utils";
+import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
 function DropdownSelector({
   onChange,
+  showLabel = false,
   ...props
 }) {
   const triggerRef = useRef9(null);
-  const [isOpen, setIsOpen] = useState3(false);
+  const [isOpen, setIsOpen] = useState4(false);
   const preview = findPreviewRecursive(props.children, props.value);
   const isPlaceholder = useMemo7(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
   const propsArray = getValuesRecursive(props.children);
   const {
     visuallyHiddenProps
   } = useVisuallyHidden3();
-  const handleChange = useCallback6((e) => {
+  const handleChange = useCallback7((e) => {
     onChange(e.target.value);
   }, [onChange]);
-  return /* @__PURE__ */ jsxs9(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
-    props.showLabel === true && /* @__PURE__ */ jsx22(FieldLabel_default, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
-    /* @__PURE__ */ jsx22("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx22("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ jsx22("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+  const labelId = useId4();
+  const describedbyId = useId4();
+  const classNames = useClassNames("charcoal-dropdown-selector-root", props.className);
+  return /* @__PURE__ */ jsxs8("div", { className: classNames, "aria-disabled": props.disabled, children: [
+    /* @__PURE__ */ jsx23(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsx23("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx23("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ jsx23("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
-    /* @__PURE__ */ jsxs9(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
+    /* @__PURE__ */ jsxs8("button", { className: "charcoal-dropdown-selector-button", "aria-labelledby": labelId, "aria-invalid": props.invalid, "aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0, disabled: props.disabled, onClick: () => {
       if (props.disabled === true)
         return;
       setIsOpen(true);
-    }, ref: triggerRef, type: "button", $active: isOpen, children: [
-      /* @__PURE__ */ jsx22(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
-      /* @__PURE__ */ jsx22(DropdownButtonIcon, { name: "16/Menu" })
+    }, ref: triggerRef, type: "button", "data-active": isOpen, children: [
+      /* @__PURE__ */ jsx23("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
+      /* @__PURE__ */ jsx23(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
     ] }),
-    isOpen && /* @__PURE__ */ jsx22(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx22(MenuList, { value: props.value, onChange: (v) => {
+    isOpen && /* @__PURE__ */ jsx23(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx23(MenuList, { value: props.value, onChange: (v) => {
       onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
-    props.assistiveText !== void 0 && /* @__PURE__ */ jsx22(AssistiveText, { "data-invalid": props.invalid === true, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ jsx23(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = styled3.div.withConfig({
-  componentId: "ccl__sc-1vnxmc8-0"
-})(["display:grid;grid-template-columns:1fr;grid-gap:4px;width:100%;", "{cursor:default;opacity:0.32;}"], disabledSelector);
-var DropdownButton = styled3.button.withConfig({
-  componentId: "ccl__sc-1vnxmc8-1"
-})(["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 ? css(["background-color:var(--charcoal-surface3-press);"]) : css(["&:hover{background-color:var(--charcoal-surface3-hover);}&:active{background-color:var(--charcoal-surface3-press);}"]), ({
-  invalid
-}) => invalid === true && css(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
-var DropdownButtonText = styled3.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 = styled3(Icon_default).withConfig({
-  componentId: "ccl__sc-1vnxmc8-3"
-})(["color:var(--charcoal-text2);"]);
 
-// src/components/DropdownSelector/DropdownMenuItem.tsx
-import styled5 from "styled-components";
+// src/components/DropdownSelector/MenuItem/index.tsx
+import { forwardRef as forwardRef18 } from "react";
 
 // src/components/DropdownSelector/ListItem/index.tsx
-import styled4 from "styled-components";
-import { jsx as jsx23 } from "react/jsx-runtime";
-function ListItem(props) {
-  const {
-    children,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsx23(StyledLi, { role: "option", children: /* @__PURE__ */ jsx23(ItemDiv, { ...rest, children: props.children }) });
-}
-var StyledLi = styled4.li.withConfig({
-  componentId: "ccl__sc-p1vs75-0"
-})(["list-style:none;"]);
-var ItemDiv = styled4.div.withConfig({
-  componentId: "ccl__sc-p1vs75-1"
-})(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;transition:background-color 0.2s;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{&:not(disabled):not([aria-disabled='true']){background-color:var(--charcoal-surface3);}}"]);
+import { forwardRef as forwardRef17, useMemo as useMemo8 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var ListItem = forwardRef17(function ListItem2({
+  as,
+  className,
+  ...props
+}, ref) {
+  const Component = useMemo8(() => as ?? "li", [as]);
+  const classNames = useClassNames("charcoal-list-item", className);
+  return /* @__PURE__ */ jsx24(Component, { className: classNames, ref, ...props });
+});
+var ListItem_default = ListItem;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-import { useCallback as useCallback7, useContext as useContext6 } from "react";
+import { useCallback as useCallback8, useContext as useContext5 } from "react";
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1014,12 +992,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = useContext6(MenuListContext);
-  const setContextValue = useCallback7(() => {
+  } = useContext5(MenuListContext);
+  const setContextValue = useCallback8(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = useCallback7((e) => {
+  const handleKeyDown = useCallback8((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1054,89 +1032,72 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
-function MenuItem(props) {
-  const {
-    children,
-    as,
-    ...rest
-  } = props;
-  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value);
-  return /* @__PURE__ */ jsx24(ListItem, { ...rest, as, "data-key": props.value, onKeyDown: handleKeyDown, onClick: props.disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": props.disabled, children: props.children });
-}
+import { jsx as jsx25 } from "react/jsx-runtime";
+var MenuItem = forwardRef18(function MenuItem2({
+  className,
+  value,
+  disabled,
+  ...props
+}, ref) {
+  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
+  return /* @__PURE__ */ jsx25(ListItem_default, { ...props, ref, "data-key": value, onKeyDown: handleKeyDown, onClick: disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": disabled, role: "option", children: props.children });
+});
+var MenuItem_default = MenuItem;
 
-// src/components/DropdownSelector/DropdownMenuItem.tsx
-import { useContext as useContext7 } from "react";
-import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
+// src/components/DropdownSelector/DropdownMenuItem/index.tsx
+import { useContext as useContext6 } from "react";
+import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = useContext7(MenuListContext);
+  } = useContext6(MenuListContext);
   const isSelected = props.value === ctxValue;
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxs10(MenuItem, { ...rest, children: [
-    isSelected && /* @__PURE__ */ jsx25(Text2ColorIcon, { name: "16/Check" }),
-    /* @__PURE__ */ jsx25(StyledSpan, { isSelected, children: props.children })
+  return /* @__PURE__ */ jsxs9(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
+    isSelected && /* @__PURE__ */ jsx26(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
+    /* @__PURE__ */ jsx26("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
   ] });
 }
-var StyledSpan = styled5.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 = styled5(Icon_default).withConfig({
-  componentId: "ccl__sc-108wg2j-1"
-})(["color:var(--charcoal-text2);padding-right:4px;"]);
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-import styled6 from "styled-components";
-import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 function MenuItemGroup(props) {
-  return /* @__PURE__ */ jsxs11(StyledLi2, { role: "presentation", children: [
-    /* @__PURE__ */ jsx26(TextSpan, { children: props.text }),
-    /* @__PURE__ */ jsx26(StyledUl2, { role: "group", children: props.children })
+  return /* @__PURE__ */ jsxs10("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
+    /* @__PURE__ */ jsx27("span", { children: props.text }),
+    /* @__PURE__ */ jsx27("ul", { role: "group", children: props.children })
   ] });
 }
-var TextSpan = styled6.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 = styled6.ul.withConfig({
-  componentId: "ccl__sc-1ubjfz7-1"
-})(["padding-left:0;margin:0;box-sizing:border-box;list-style:none;overflow:hidden;"]);
-var StyledLi2 = styled6.li.withConfig({
-  componentId: "ccl__sc-1ubjfz7-2"
-})(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-import { forwardRef as forwardRef16, memo as memo6, useMemo as useMemo8, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef19, memo as memo7, useMemo as useMemo9, useRef as useRef10 } from "react";
 import { useRadioGroupState } from "@react-stately/radio";
 import { useRadio, useRadioGroup } from "@react-aria/radio";
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-import { createContext as createContext6, useContext as useContext8 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var RadioContext = createContext6(null);
+import { createContext as createContext5, useContext as useContext7 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var RadioContext = createContext5(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx27(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx28(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = useContext8(RadioContext);
+  const state = useContext7(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
-var SegmentedControl = forwardRef16(function SegmentedControlInner(props, ref) {
+import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
+var SegmentedControl = forwardRef19(function SegmentedControlInner(props, ref) {
   const className = useClassNames("charcoal-segmented-control", props.className);
-  const ariaRadioGroupProps = useMemo8(() => ({
+  const ariaRadioGroupProps = useMemo9(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1147,19 +1108,19 @@ var SegmentedControl = forwardRef16(function SegmentedControlInner(props, ref) {
   const {
     radioGroupProps
   } = useRadioGroup(ariaRadioGroupProps, state);
-  const segmentedControlItems = useMemo8(() => {
+  const segmentedControlItems = useMemo9(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
     } : d);
   }, [props.data]);
-  return /* @__PURE__ */ jsx28("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ jsx28(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx28(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
+  return /* @__PURE__ */ jsx29("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ jsx29(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx29(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = memo6(SegmentedControl);
+var SegmentedControl_default = memo7(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
   const ref = useRef10(null);
-  const ariaRadioProps = useMemo8(() => ({
+  const ariaRadioProps = useMemo9(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1169,20 +1130,20 @@ var Segmented = (props) => {
     isDisabled,
     isSelected
   } = useRadio(ariaRadioProps, state, ref);
-  return /* @__PURE__ */ jsxs12("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
-    /* @__PURE__ */ jsx28("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
+  return /* @__PURE__ */ jsxs11("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
+    /* @__PURE__ */ jsx29("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
     props.children
   ] });
 };
 
 // src/components/Checkbox/index.tsx
-import { forwardRef as forwardRef18, memo as memo8 } from "react";
-import { useId as useId4 } from "@react-aria/utils";
+import { forwardRef as forwardRef21, memo as memo9 } from "react";
+import { useId as useId5 } from "@react-aria/utils";
 
 // src/components/Checkbox/CheckboxInput/index.tsx
-import { forwardRef as forwardRef17, memo as memo7, useCallback as useCallback8 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var CheckboxInput = forwardRef17(function CheckboxInput2({
+import { forwardRef as forwardRef20, memo as memo8, useCallback as useCallback9 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var CheckboxInput = forwardRef20(function CheckboxInput2({
   onChange,
   checked,
   invalid,
@@ -1190,19 +1151,19 @@ var CheckboxInput = forwardRef17(function CheckboxInput2({
   rounded,
   ...props
 }, ref) {
-  const handleChange = useCallback8((e) => {
+  const handleChange = useCallback9((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-checkbox-input", className);
-  return /* @__PURE__ */ jsx29("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
+  return /* @__PURE__ */ jsx30("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
 });
-var CheckboxInput_default = memo7(CheckboxInput);
+var CheckboxInput_default = memo8(CheckboxInput);
 
 // src/components/Checkbox/CheckboxWithLabel.tsx
-import React17 from "react";
-import { jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
-var CheckboxWithLabel = React17.memo(function CheckboxWithLabel2({
+import React16 from "react";
+import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+var CheckboxWithLabel = React16.memo(function CheckboxWithLabel2({
   className,
   children,
   input,
@@ -1210,37 +1171,37 @@ var CheckboxWithLabel = React17.memo(function CheckboxWithLabel2({
   disabled
 }) {
   const classNames = useClassNames("charcoal-checkbox__label", className);
-  return /* @__PURE__ */ jsxs13("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
+  return /* @__PURE__ */ jsxs12("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
     input,
-    /* @__PURE__ */ jsx30("div", { className: "charcoal-checkbox__label_div", children })
+    /* @__PURE__ */ jsx31("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
 
 // src/components/Checkbox/index.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-var Checkbox = forwardRef18(function Checkbox2({
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Checkbox = forwardRef21(function Checkbox2({
   disabled,
   className,
   id,
   children,
   ...props
 }, ref) {
-  const htmlId = useId4(id);
+  const htmlId = useId5(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ jsx31(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  const input = /* @__PURE__ */ jsx32(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ jsx31(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ jsx32(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Checkbox_default = memo8(Checkbox);
+var Checkbox_default = memo9(Checkbox);
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef19, memo as memo9, useMemo as useMemo9 } from "react";
+import { forwardRef as forwardRef22, memo as memo10, useMemo as useMemo10 } from "react";
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
-import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
-var TagItem = forwardRef19(function TagItemInner({
-  as,
+import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+var TagItem = forwardRef22(function TagItemInner({
+  component,
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
@@ -1254,24 +1215,23 @@ var TagItem = forwardRef19(function TagItemInner({
   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: {
+  const Component = useMemo10(() => component ?? "button", [component]);
+  return /* @__PURE__ */ jsxs13(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
     "--charcoal-tag-item-bg": bg
   }, children: [
-    /* @__PURE__ */ jsxs14("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
-      hasTranslatedLabel && /* @__PURE__ */ jsx32("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
-      /* @__PURE__ */ jsx32("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+    /* @__PURE__ */ jsxs13("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
+      hasTranslatedLabel && /* @__PURE__ */ jsx33("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
+      /* @__PURE__ */ jsx33("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
     ] }),
-    status === "active" && /* @__PURE__ */ jsx32(Icon_default, { name: "16/Remove" })
+    status === "active" && /* @__PURE__ */ jsx33(Icon_default, { name: "16/Remove" })
   ] });
 });
-var TagItem_default = memo9(TagItem);
+var TagItem_default = memo10(TagItem);
 export {
   Button_default as Button,
   CharcoalProvider,
   Checkbox_default as Checkbox,
   Clickable_default as Clickable,
-  ComponentAbstraction,
   DropdownMenuItem,
   DropdownSelector,
   Icon_default as Icon,
@@ -1293,7 +1253,6 @@ export {
   Switch_default as Switch,
   TagItem_default as TagItem,
   TextArea_default as TextArea,
-  TextField_default as TextField,
-  useComponentAbstraction
+  TextField_default as TextField
 };
 //# sourceMappingURL=index.esm.js.map