@charcoal-ui/react 4.0.0-beta.7 → 4.0.0-beta.8

package/dist/index.cjs.js

@@ -196,11 +196,43 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-var import_react7 = require("react");
-var React5 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_warning = __toESM(require("warning"));
+
+// src/components/Radio/RadioGroupContext.ts
+var React5 = __toESM(require("react"));
+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> ?");
+  }
+});
+
+// src/components/Radio/RadioInput/index.tsx
+var import_react7 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Radio = (0, import_react7.forwardRef)(function RadioInner({
+var RadioInput = (0, import_react7.forwardRef)(function RadioInput2({
+  onChange,
+  invalid,
+  className,
+  ...props
+}, ref) {
+  const handleChange = (0, import_react7.useCallback)((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.value);
+  }, [onChange]);
+  const classNames = useClassNames("charcoal-radio-input", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { className: classNames, ref, type: "radio", onChange: handleChange, "aria-invalid": invalid, ...props });
+});
+var RadioInput_default = (0, import_react7.memo)(RadioInput);
+
+// src/components/Radio/index.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Radio = (0, import_react8.forwardRef)(function RadioInner({
   value,
   disabled = false,
   children,
@@ -213,7 +245,7 @@ var Radio = (0, import_react7.forwardRef)(function RadioInner({
     readonly,
     invalid,
     onChange
-  } = (0, import_react7.useContext)(RadioGroupContext);
+  } = (0, import_react8.useContext)(RadioGroupContext);
   const classNames = useClassNames("charcoal-radio__label", props.className);
   (0, import_warning.default)(
     name !== void 0,
@@ -222,40 +254,33 @@ var Radio = (0, import_react7.forwardRef)(function RadioInner({
   const isSelected = value === selected;
   const isDisabled = disabled || isParentDisabled;
   const isReadonly = readonly && !isSelected;
-  const handleChange = (0, import_react7.useCallback)((e) => {
-    onChange(e.currentTarget.value);
-  }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "radio", className: "charcoal-radio__input", name, value, checked: isSelected, "aria-invalid": invalid, onChange: handleChange, disabled: isDisabled || isReadonly, ref }),
-    children != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "charcoal-radio__label_div", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadioInput_default, { name, value, checked: isSelected, "aria-invalid": invalid, onChange, disabled: isDisabled || isReadonly, ref }),
+    children != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "charcoal-radio__label_div", children })
   ] });
 });
-var Radio_default = (0, import_react7.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 = (0, import_react7.forwardRef)(function RadioGroupInner({
+var Radio_default = (0, import_react8.memo)(Radio);
+
+// src/components/Radio/RadioGroup/index.tsx
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react9.forwardRef)(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 = (0, import_react7.useCallback)((next) => {
+  const handleChange = (0, import_react9.useCallback)((next) => {
     onChange(next);
   }, [onChange]);
-  const contextValue = (0, import_react7.useMemo)(() => ({
+  const contextValue = (0, import_react9.useMemo)(() => ({
     name,
     selected: value,
     disabled: disabled ?? false,
@@ -263,34 +288,34 @@ var RadioGroup = (0, import_react7.forwardRef)(function RadioGroupInner({
     invalid: invalid ?? false,
     onChange: handleChange
   }), [disabled, handleChange, invalid, name, readonly, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "radiogroup", "aria-orientation": "vertical", "aria-invalid": invalid, className: classNames, ref, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "radiogroup", "aria-disabled": disabled, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": props["aria-labelledby"], "aria-orientation": ariaOrientation, className: classNames, ref, children }) });
 });
 
 // src/components/Switch/index.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_utils = require("@react-aria/utils");
 
 // src/components/Switch/SwitchInput/index.tsx
-var import_react8 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var SwitchInput = (0, import_react8.forwardRef)(function SwitchInput2({
+var import_react10 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SwitchInput = (0, import_react10.forwardRef)(function SwitchInput2({
   onChange,
   className,
   ...props
 }, ref) {
-  const handleChange = (0, import_react8.useCallback)((e) => {
+  const handleChange = (0, import_react10.useCallback)((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
   props.children;
   const classNames = useClassNames("charcoal-switch-input", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
 });
 var SwitchInput_default = SwitchInput;
 
 // src/components/Switch/SwitchWithLabel.tsx
 var React6 = __toESM(require("react"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SwitchWithLabel = React6.memo(function SwitchWithLabel2({
   children,
   className,
@@ -299,15 +324,15 @@ var SwitchWithLabel = React6.memo(function SwitchWithLabel2({
   input
 }) {
   const classNames = useClassNames("charcoal-switch__label", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
     input,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "charcoal-switch__label_div", children })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-switch__label_div", children })
   ] });
 });
 
 // src/components/Switch/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Switch = (0, import_react9.forwardRef)(function Switch2({
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Switch = (0, import_react11.forwardRef)(function Switch2({
   children,
   onChange,
   disabled,
@@ -317,22 +342,22 @@ var Switch = (0, import_react9.forwardRef)(function Switch2({
 }, ref) {
   const htmlId = (0, import_utils.useId)(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
+  const input = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Switch_default = (0, import_react9.memo)(Switch);
+var Switch_default = (0, import_react11.memo)(Switch);
 
 // src/components/TextField/index.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react12 = require("react");
+var import_react14 = require("react");
 var React8 = __toESM(require("react"));
 
 // src/components/FieldLabel/index.tsx
 var React7 = __toESM(require("react"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FieldLabel = React7.forwardRef(function FieldLabel2({
   style,
   className,
@@ -343,10 +368,10 @@ var FieldLabel = React7.forwardRef(function FieldLabel2({
   ...labelProps
 }, ref) {
   const classNames = useClassNames("charcoal-field-label-root", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style, className: classNames, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
-    required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-field-label-required-text", children: requiredText }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: subLabel }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style, className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
+    required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "charcoal-field-label-required-text", children: requiredText }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: subLabel }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
@@ -369,9 +394,9 @@ function countCodePointsInString(string) {
 }
 
 // src/components/TextField/useFocusWithClick.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 function useFocusWithClick(containerRef, inputRef) {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const el = containerRef.current;
     if (el) {
       const handleDown = (e) => {
@@ -391,15 +416,15 @@ function useFocusWithClick(containerRef, inputRef) {
 var import_utils2 = require("@react-aria/utils");
 
 // src/_lib/createDivComponent.tsx
-var import_react11 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function createDivComponent(mainClassName) {
-  return (0, import_react11.forwardRef)(function DivComponent({
+  return (0, import_react13.forwardRef)(function DivComponent({
     className,
     ...props
   }, ref) {
     const classNames = useClassNames(mainClassName, className);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: classNames, ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: classNames, ref, ...props });
   });
 }
 
@@ -407,7 +432,7 @@ function createDivComponent(mainClassName) {
 var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
 
 // src/components/TextField/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var TextField = React8.forwardRef(function SingleLineTextFieldInner({
   assistiveText,
   className,
@@ -427,13 +452,13 @@ var TextField = React8.forwardRef(function SingleLineTextFieldInner({
   value,
   getCount = countCodePointsInString,
   ...props
-}, forwardRef20) {
-  const inputRef = (0, import_react12.useRef)(null);
+}, forwardRef24) {
+  const inputRef = (0, import_react14.useRef)(null);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden.useVisuallyHidden)();
-  const [count, setCount] = (0, import_react12.useState)(getCount(value ?? ""));
-  const handleChange = (0, import_react12.useCallback)((e) => {
+  const [count, setCount] = (0, import_react14.useState)(getCount(value ?? ""));
+  const handleChange = (0, import_react14.useCallback)((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -442,37 +467,37 @@ var TextField = React8.forwardRef(function SingleLineTextFieldInner({
     setCount(count2);
     onChange?.(value2);
   }, [getCount, maxLength, onChange]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  const containerRef = (0, import_react12.useRef)(null);
+  const containerRef = (0, import_react14.useRef)(null);
   useFocusWithClick(containerRef, inputRef);
   const inputId = (0, import_utils2.useId)(props.id);
   const describedbyId = (0, import_utils2.useId)();
   const labelledbyId = (0, import_utils2.useId)();
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
   const classNames = useClassNames("charcoal-text-field-root");
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
-      prefix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "charcoal-text-field-prefix", children: prefix }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: (0, import_utils2.mergeRefs)(forwardRef20, inputRef), type, value, ...props }),
-      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "charcoal-text-field-suffix", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "charcoal-text-field-prefix", children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: (0, import_utils2.mergeRefs)(forwardRef24, inputRef), type, value, ...props }),
+      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "charcoal-text-field-suffix", children: [
         suffix,
-        showCount && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
 
 // src/components/TextArea/index.tsx
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_utils3 = require("@react-aria/utils");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var TextArea = (0, import_react13.forwardRef)(function TextAreaInner({
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TextArea = (0, import_react15.forwardRef)(function TextAreaInner({
   onChange,
   className,
   value,
@@ -490,20 +515,20 @@ var TextArea = (0, import_react13.forwardRef)(function TextAreaInner({
   invalid,
   getCount = countCodePointsInString,
   ...props
-}, forwardRef20) {
+}, forwardRef24) {
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden2.useVisuallyHidden)();
-  const textareaRef = (0, import_react13.useRef)(null);
-  const [count, setCount] = (0, import_react13.useState)(getCount(value ?? ""));
-  const [rows, setRows] = (0, import_react13.useState)(initialRows);
-  const syncHeight = (0, import_react13.useCallback)((textarea) => {
+  const textareaRef = (0, import_react15.useRef)(null);
+  const [count, setCount] = (0, import_react15.useState)(getCount(value ?? ""));
+  const [rows, setRows] = (0, import_react15.useState)(initialRows);
+  const syncHeight = (0, import_react15.useCallback)((textarea) => {
     const rows2 = (`${textarea.value}
 `.match(/\n/gu)?.length ?? 0) || 1;
     setRows(initialRows <= rows2 ? rows2 : initialRows);
   }, [initialRows]);
   const nonControlled = value === void 0;
-  const handleChange = (0, import_react13.useCallback)((e) => {
+  const handleChange = (0, import_react15.useCallback)((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -517,30 +542,30 @@ var TextArea = (0, import_react13.forwardRef)(function TextAreaInner({
     }
     onChange?.(value2);
   }, [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
   }, [autoHeight, syncHeight]);
-  const containerRef = (0, import_react13.useRef)(null);
+  const containerRef = (0, import_react15.useRef)(null);
   useFocusWithClick(containerRef, textareaRef);
   const textAreaId = (0, import_utils3.useId)(props.id);
   const describedbyId = (0, import_utils3.useId)();
   const labelledbyId = (0, import_utils3.useId)();
   const classNames = useClassNames("charcoal-text-area-root", className);
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
       "--charcoal-text-area-rows": `${showCount ? rows + 1 : rows}`
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef20, textareaRef), rows, value, disabled, ...props }),
-      showCount && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef24, textareaRef), rows, value, disabled, ...props }),
+      showCount && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
@@ -548,7 +573,7 @@ var TextArea_default = TextArea;
 // src/components/Icon/index.tsx
 var React9 = __toESM(require("react"));
 var import_icons = require("@charcoal-ui/icons");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Icon = React9.forwardRef(function IconInner({
   name,
   scale,
@@ -556,12 +581,12 @@ var Icon = React9.forwardRef(function IconInner({
   className,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
 });
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var React13 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
 var import_styled_components2 = require("styled-components");
@@ -571,7 +596,7 @@ var import_react_spring = require("react-spring");
 var import_utils5 = require("@react-aria/utils");
 
 // src/components/Modal/Dialog/index.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_dialog = require("@react-aria/dialog");
 
 // src/_lib/useForwardedRef.tsx
@@ -591,22 +616,22 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Dialog = (0, import_react14.forwardRef)(function Dialog2({
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Dialog = (0, import_react16.forwardRef)(function Dialog2({
   size,
   bottomSheet,
-  css: css2,
+  css,
   className,
   ...props
-}, forwardRef20) {
-  const ref = useForwardedRef(forwardRef20);
+}, forwardRef24) {
+  const ref = useForwardedRef(forwardRef24);
   const {
     dialogProps
   } = (0, import_dialog.useDialog)({
     role: "dialog"
   }, ref);
   const classNames = useClassNames("charcoal-modal-dialog", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, ref, ...props });
 });
 
 // src/components/Modal/ModalBackgroundContext.tsx
@@ -618,9 +643,9 @@ var React12 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 function usePreventScroll(element, isOpen) {
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -659,9 +684,9 @@ function useCharcoalModalOverlay(props, state, ref) {
 }
 
 // src/components/Modal/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react16.forwardRef)(function ModalInner({
+var Modal = (0, import_react18.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -727,15 +752,15 @@ var Modal = (0, import_react16.forwardRef)(function ModalInner({
     backgroundColor,
     overflow,
     transform
-  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_spring.animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
+  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_spring.animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
     backgroundColor,
     overflow,
     zIndex
   } : {
     zIndex
-  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
+  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
     transform
-  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ModalContext.Provider, { value: {
+  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ModalContext.Provider, { value: {
     titleProps: {},
     title,
     close: onClose,
@@ -743,11 +768,11 @@ var Modal = (0, import_react16.forwardRef)(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var AnimatedDialog = (0, import_react_spring.animated)(Dialog);
-var Modal_default = (0, import_react16.memo)(Modal);
+var Modal_default = (0, import_react18.memo)(Modal);
 var ModalContext = React13.createContext({
   titleProps: {},
   title: "",
@@ -756,41 +781,41 @@ var ModalContext = React13.createContext({
   bottomSheet: false
 });
 function ModalCloseButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
 }
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_react17 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react17.useContext)(ModalContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
+  const modalCtx = (0, import_react19.useContext)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
 }
 var ModalAlign = createDivComponent("charcoal-modal-align");
 var ModalBody = createDivComponent("charcoal-modal-body");
 var ModalButtons = createDivComponent("charcoal-modal-buttons");
 
 // src/components/LoadingSpinner/index.tsx
-var import_react18 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react18.forwardRef)(function LoadingSpinnerInner({
+var import_react20 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var LoadingSpinner = (0, import_react20.forwardRef)(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
   ...props
 }, ref) {
   const classNames = useClassNames("charcoal-loading-spinner", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { role: "progressbar", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "progressbar", style: {
     "--charcoal-loading-spinner-size": `${size}px`,
     "--charcoal-loading-spinner-padding": `${padding}px`
-  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LoadingSpinnerIcon, {}) });
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = (0, import_react18.memo)(LoadingSpinner);
-var LoadingSpinnerIcon = (0, import_react18.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinner_default = (0, import_react20.memo)(LoadingSpinner);
+var LoadingSpinnerIcon = (0, import_react20.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -800,25 +825,22 @@ var LoadingSpinnerIcon = (0, import_react18.forwardRef)(function LoadingSpinnerI
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
 });
 
 // src/components/DropdownSelector/index.tsx
-var import_react23 = require("react");
-var import_styled_components5 = __toESM(require("styled-components"));
-var import_utils6 = require("@charcoal-ui/utils");
+var import_react25 = require("react");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_overlays4 = require("@react-aria/overlays");
-var import_styled_components3 = __toESM(require("styled-components"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = (0, import_react19.useRef)(null);
+  const defaultPopoverRef = (0, import_react21.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const {
     popoverProps,
@@ -834,49 +856,55 @@ function Popover(props) {
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = (0, import_react19.useContext)(ModalBackgroundContext);
+  const modalBackground = (0, import_react21.useContext)(ModalBackgroundContext);
   usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ...underlayProps, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...underlayProps, style: {
       position: "fixed",
       zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
       inset: 0
     } }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownPopoverDiv, { ...popoverProps, ref: finalPopoverRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
       props.children,
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
-var DropdownPopoverDiv = import_styled_components3.default.div.withConfig({
-  componentId: "ccl__sc-jwnoy6-0"
-})(["margin:4px 0;list-style:none;overflow:auto;max-height:inherit;background-color:var(--charcoal-background1);border:solid 1px var(--charcoal-border-default);border-radius:8px;padding-top:8px;padding-bottom:8px;"]);
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function DropdownPopover({
   children,
   ...props
 }) {
-  const ref = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const ref = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  (0, import_react20.useEffect)(() => {
-    if (props.isOpen && props.value !== void 0) {
-      const windowScrollY = window.scrollY;
-      const windowScrollX = window.scrollX;
-      const selectedElement = document.querySelector(`[data-key="${props.value.toString()}"]`);
-      selectedElement?.focus();
-      window.scrollTo(windowScrollX, windowScrollY);
+  (0, import_react22.useEffect)(() => {
+    if (props.isOpen) {
+      if (props.value !== void 0 && props.value !== "") {
+        const windowScrollY = window.scrollY;
+        const windowScrollX = window.scrollX;
+        const selectedElement = document.querySelector(`[data-key="${props.value.toString()}"]`);
+        selectedElement?.focus();
+        window.scrollTo(windowScrollX, windowScrollY);
+      } else {
+        const el = ref.current?.querySelector("[role='option']");
+        if (el instanceof HTMLElement) {
+          el.focus();
+        }
+      }
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
@@ -904,12 +932,11 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react22 = require("react");
-var import_styled_components4 = __toESM(require("styled-components"));
+var import_react24 = require("react");
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react21 = require("react");
-var MenuListContext = (0, import_react21.createContext)({
+var import_react23 = require("react");
+var MenuListContext = (0, import_react23.createContext)({
   root: void 0,
   value: "",
   propsArray: [],
@@ -941,11 +968,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function MenuList(props) {
-  const root = (0, import_react22.useRef)(null);
-  const propsArray = (0, import_react22.useMemo)(() => getValuesRecursive(props.children), [props.children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuListContext.Provider, { value: {
+  const root = (0, import_react24.useRef)(null);
+  const propsArray = (0, import_react24.useMemo)(() => getValuesRecursive(props.children), [props.children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -954,89 +981,70 @@ function MenuList(props) {
     }
   }, children: props.children }) });
 }
-var StyledUl = import_styled_components4.default.ul.withConfig({
-  componentId: "ccl__sc-1y72v02-0"
-})(["padding:0;margin:0;"]);
 
 // src/components/DropdownSelector/index.tsx
-var import_styled3 = require("@charcoal-ui/styled");
 var import_visually_hidden3 = require("@react-aria/visually-hidden");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var defaultRequiredText = "*\u5FC5\u9808";
+var import_utils6 = require("@react-aria/utils");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function DropdownSelector({
   onChange,
+  showLabel = false,
   ...props
 }) {
-  const triggerRef = (0, import_react23.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react23.useState)(false);
+  const triggerRef = (0, import_react25.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = (0, import_react23.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const isPlaceholder = (0, import_react25.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
   const propsArray = getValuesRecursive(props.children);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden3.useVisuallyHidden)();
-  const handleChange = (0, import_react23.useCallback)((e) => {
+  const handleChange = (0, import_react25.useCallback)((e) => {
     onChange(e.target.value);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
-    props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldLabel_default, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+  const labelId = (0, import_utils6.useId)();
+  const describedbyId = (0, import_utils6.useId)();
+  const classNames = useClassNames("charcoal-dropdown-selector-root", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: classNames, "aria-disabled": props.disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { className: "charcoal-dropdown-selector-button", "aria-labelledby": labelId, "aria-invalid": props.invalid, "aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0, disabled: props.disabled, onClick: () => {
       if (props.disabled === true)
         return;
       setIsOpen(true);
-    }, ref: triggerRef, type: "button", $active: isOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownButtonIcon, { name: "16/Menu" })
+    }, ref: triggerRef, type: "button", "data-active": isOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MenuList, { value: props.value, onChange: (v) => {
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuList, { value: props.value, onChange: (v) => {
       onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
-    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AssistiveText, { "data-invalid": props.invalid === true, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = import_styled_components5.default.div.withConfig({
-  componentId: "ccl__sc-1vnxmc8-0"
-})(["display:grid;grid-template-columns:1fr;grid-gap:4px;width:100%;", "{cursor:default;opacity:0.32;}"], import_utils6.disabledSelector);
-var DropdownButton = import_styled_components5.default.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']{", " ", "}", ""], import_utils6.disabledSelector, import_styled3.focusVisibleFocusRingCss, ({
-  $active
-}) => $active === true ? (0, import_styled_components5.css)(["background-color:var(--charcoal-surface3-press);"]) : (0, import_styled_components5.css)(["&:hover{background-color:var(--charcoal-surface3-hover);}&:active{background-color:var(--charcoal-surface3-press);}"]), ({
-  invalid
-}) => invalid === true && (0, import_styled_components5.css)(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
-var DropdownButtonText = import_styled_components5.default.span.withConfig({
-  componentId: "ccl__sc-1vnxmc8-2"
-})(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-", ");overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], (p) => p.$isText3 ? "text3" : "text2");
-var DropdownButtonIcon = (0, import_styled_components5.default)(Icon_default).withConfig({
-  componentId: "ccl__sc-1vnxmc8-3"
-})(["color:var(--charcoal-text2);"]);
-
-// src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_styled_components7 = __toESM(require("styled-components"));
+
+// src/components/DropdownSelector/MenuItem/index.tsx
+var import_react28 = require("react");
 
 // src/components/DropdownSelector/ListItem/index.tsx
-var import_styled_components6 = __toESM(require("styled-components"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function ListItem(props) {
-  const {
-    children,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ItemDiv, { ...rest, children: props.children }) });
-}
-var StyledLi = import_styled_components6.default.li.withConfig({
-  componentId: "ccl__sc-p1vs75-0"
-})(["list-style:none;"]);
-var ItemDiv = import_styled_components6.default.div.withConfig({
-  componentId: "ccl__sc-p1vs75-1"
-})(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;transition:background-color 0.2s;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{&:not(disabled):not([aria-disabled='true']){background-color:var(--charcoal-surface3);}}"]);
+var import_react26 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ListItem = (0, import_react26.forwardRef)(function ListItem2({
+  as,
+  className,
+  ...props
+}, ref) {
+  const Component = (0, import_react26.useMemo)(() => as ?? "li", [as]);
+  const classNames = useClassNames("charcoal-list-item", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Component, { className: classNames, ref, ...props });
+});
+var ListItem_default = ListItem;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-var import_react24 = require("react");
+var import_react27 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1073,12 +1081,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = (0, import_react24.useContext)(MenuListContext);
-  const setContextValue = (0, import_react24.useCallback)(() => {
+  } = (0, import_react27.useContext)(MenuListContext);
+  const setContextValue = (0, import_react27.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react24.useCallback)((e) => {
+  const handleKeyDown = (0, import_react27.useCallback)((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1113,89 +1121,72 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function MenuItem(props) {
-  const {
-    children,
-    as,
-    ...rest
-  } = props;
-  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ListItem, { ...rest, as, "data-key": props.value, onKeyDown: handleKeyDown, onClick: props.disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": props.disabled, children: props.children });
-}
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var MenuItem = (0, import_react28.forwardRef)(function MenuItem2({
+  className,
+  value,
+  disabled,
+  ...props
+}, ref) {
+  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ListItem_default, { ...props, ref, "data-key": value, onKeyDown: handleKeyDown, onClick: disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": disabled, role: "option", children: props.children });
+});
+var MenuItem_default = MenuItem;
 
-// src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_react25 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+// src/components/DropdownSelector/DropdownMenuItem/index.tsx
+var import_react29 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = (0, import_react25.useContext)(MenuListContext);
+  } = (0, import_react29.useContext)(MenuListContext);
   const isSelected = props.value === ctxValue;
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MenuItem, { ...rest, children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2ColorIcon, { name: "16/Check" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledSpan, { isSelected, children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
   ] });
 }
-var StyledSpan = import_styled_components7.default.span.withConfig({
-  componentId: "ccl__sc-108wg2j-0"
-})(["font-size:14px;line-height:22px;color:var(--charcoal-text2);padding:9px 0;display:flex;align-items:center;width:100%;margin-left:", "px;"], ({
-  isSelected
-}) => isSelected === true ? 0 : 20);
-var Text2ColorIcon = (0, import_styled_components7.default)(Icon_default).withConfig({
-  componentId: "ccl__sc-108wg2j-1"
-})(["color:var(--charcoal-text2);padding-right:4px;"]);
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-var import_styled_components8 = __toESM(require("styled-components"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function MenuItemGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledLi2, { role: "presentation", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TextSpan, { children: props.text }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledUl2, { role: "group", children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: props.text }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { role: "group", children: props.children })
   ] });
 }
-var TextSpan = import_styled_components8.default.span.withConfig({
-  componentId: "ccl__sc-1ubjfz7-0"
-})(["display:block;color:var(--charcoal-text3);font-size:12px;font-weight:bold;padding:12px 0 8px 16px;"]);
-var StyledUl2 = import_styled_components8.default.ul.withConfig({
-  componentId: "ccl__sc-1ubjfz7-1"
-})(["padding-left:0;margin:0;box-sizing:border-box;list-style:none;overflow:hidden;"]);
-var StyledLi2 = import_styled_components8.default.li.withConfig({
-  componentId: "ccl__sc-1ubjfz7-2"
-})(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-var import_react27 = require("react");
+var import_react31 = require("react");
 var import_radio = require("@react-stately/radio");
 var import_radio2 = require("@react-aria/radio");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react26 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var RadioContext = (0, import_react26.createContext)(null);
+var import_react30 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var RadioContext = (0, import_react30.createContext)(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react26.useContext)(RadioContext);
+  const state = (0, import_react30.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react27.forwardRef)(function SegmentedControlInner(props, ref) {
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var SegmentedControl = (0, import_react31.forwardRef)(function SegmentedControlInner(props, ref) {
   const className = useClassNames("charcoal-segmented-control", props.className);
-  const ariaRadioGroupProps = (0, import_react27.useMemo)(() => ({
+  const ariaRadioGroupProps = (0, import_react31.useMemo)(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1206,19 +1197,19 @@ var SegmentedControl = (0, import_react27.forwardRef)(function SegmentedControlI
   const {
     radioGroupProps
   } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react27.useMemo)(() => {
+  const segmentedControlItems = (0, import_react31.useMemo)(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
     } : d);
   }, [props.data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = (0, import_react27.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react31.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react27.useRef)(null);
-  const ariaRadioProps = (0, import_react27.useMemo)(() => ({
+  const ref = (0, import_react31.useRef)(null);
+  const ariaRadioProps = (0, import_react31.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1228,20 +1219,20 @@ var Segmented = (props) => {
     isDisabled,
     isSelected
   } = (0, import_radio2.useRadio)(ariaRadioProps, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
     props.children
   ] });
 };
 
 // src/components/Checkbox/index.tsx
-var import_react30 = require("react");
+var import_react34 = require("react");
 var import_utils7 = require("@react-aria/utils");
 
 // src/components/Checkbox/CheckboxInput/index.tsx
-var import_react28 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var CheckboxInput = (0, import_react28.forwardRef)(function CheckboxInput2({
+var import_react32 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var CheckboxInput = (0, import_react32.forwardRef)(function CheckboxInput2({
   onChange,
   checked,
   invalid,
@@ -1249,19 +1240,19 @@ var CheckboxInput = (0, import_react28.forwardRef)(function CheckboxInput2({
   rounded,
   ...props
 }, ref) {
-  const handleChange = (0, import_react28.useCallback)((e) => {
+  const handleChange = (0, import_react32.useCallback)((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-checkbox-input", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
 });
-var CheckboxInput_default = (0, import_react28.memo)(CheckboxInput);
+var CheckboxInput_default = (0, import_react32.memo)(CheckboxInput);
 
 // src/components/Checkbox/CheckboxWithLabel.tsx
-var import_react29 = __toESM(require("react"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var CheckboxWithLabel = import_react29.default.memo(function CheckboxWithLabel2({
+var import_react33 = __toESM(require("react"));
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var CheckboxWithLabel = import_react33.default.memo(function CheckboxWithLabel2({
   className,
   children,
   input,
@@ -1269,15 +1260,15 @@ var CheckboxWithLabel = import_react29.default.memo(function CheckboxWithLabel2(
   disabled
 }) {
   const classNames = useClassNames("charcoal-checkbox__label", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
     input,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "charcoal-checkbox__label_div", children })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
 
 // src/components/Checkbox/index.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Checkbox = (0, import_react30.forwardRef)(function Checkbox2({
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Checkbox = (0, import_react34.forwardRef)(function Checkbox2({
   disabled,
   className,
   id,
@@ -1286,19 +1277,19 @@ var Checkbox = (0, import_react30.forwardRef)(function Checkbox2({
 }, ref) {
   const htmlId = (0, import_utils7.useId)(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  const input = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Checkbox_default = (0, import_react30.memo)(Checkbox);
+var Checkbox_default = (0, import_react34.memo)(Checkbox);
 
 // src/components/TagItem/index.tsx
-var import_react31 = require("react");
+var import_react35 = require("react");
 var import_utils8 = require("@react-aria/utils");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var TagItem = (0, import_react31.forwardRef)(function TagItemInner({
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var TagItem = (0, import_react35.forwardRef)(function TagItemInner({
   as,
   label,
   translatedLabel,
@@ -1313,18 +1304,18 @@ var TagItem = (0, import_react31.forwardRef)(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 = (0, import_react31.useMemo)(() => as ?? "button", [as]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
+  const Component = (0, import_react35.useMemo)(() => as ?? "button", [as]);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
     "--charcoal-tag-item-bg": bg
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
-      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
+      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
     ] }),
-    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: "16/Remove" })
+    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon_default, { name: "16/Remove" })
   ] });
 });
-var TagItem_default = (0, import_react31.memo)(TagItem);
+var TagItem_default = (0, import_react35.memo)(TagItem);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,