@charcoal-ui/react 4.0.0-beta.8 → 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,12 +96,12 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-import { memo as memo2, forwardRef as forwardRef6, useContext as useContext2 } from "react";
+import { memo as memo2, forwardRef as forwardRef5, useContext } from "react";
 import warning from "warning";
 
 // src/components/Radio/RadioGroupContext.ts
-import * as React5 from "react";
-var RadioGroupContext = React5.createContext({
+import * as React4 from "react";
+var RadioGroupContext = React4.createContext({
   name: void 0,
   selected: void 0,
   disabled: false,
@@ -154,9 +113,9 @@ var RadioGroupContext = React5.createContext({
 });
 
 // src/components/Radio/RadioInput/index.tsx
-import { forwardRef as forwardRef5, memo, useCallback } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var RadioInput = forwardRef5(function RadioInput2({
+import { forwardRef as forwardRef4, memo, useCallback } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var RadioInput = forwardRef4(function RadioInput2({
   onChange,
   invalid,
   className,
@@ -167,13 +126,13 @@ var RadioInput = forwardRef5(function RadioInput2({
     onChange?.(el.value);
   }, [onChange]);
   const classNames = useClassNames("charcoal-radio-input", className);
-  return /* @__PURE__ */ jsx6("input", { className: classNames, ref, type: "radio", onChange: handleChange, "aria-invalid": invalid, ...props });
+  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 jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-var Radio = forwardRef6(function RadioInner({
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var Radio = forwardRef5(function RadioInner({
   value,
   disabled = false,
   children,
@@ -186,7 +145,7 @@ var Radio = forwardRef6(function RadioInner({
     readonly,
     invalid,
     onChange
-  } = useContext2(RadioGroupContext);
+  } = useContext(RadioGroupContext);
   const classNames = useClassNames("charcoal-radio__label", props.className);
   warning(
     name !== void 0,
@@ -195,17 +154,17 @@ var Radio = forwardRef6(function RadioInner({
   const isSelected = value === selected;
   const isDisabled = disabled || isParentDisabled;
   const isReadonly = readonly && !isSelected;
-  return /* @__PURE__ */ jsxs2("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
-    /* @__PURE__ */ jsx7(RadioInput_default, { name, value, checked: isSelected, "aria-invalid": invalid, onChange, disabled: isDisabled || isReadonly, ref }),
-    children != null && /* @__PURE__ */ jsx7("div", { className: "charcoal-radio__label_div", children })
+  return /* @__PURE__ */ jsxs("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
+    /* @__PURE__ */ jsx6(RadioInput_default, { name, value, checked: isSelected, "aria-invalid": invalid, onChange, disabled: isDisabled || isReadonly, ref }),
+    children != null && /* @__PURE__ */ jsx6("div", { className: "charcoal-radio__label_div", children })
   ] });
 });
 var Radio_default = memo2(Radio);
 
 // src/components/Radio/RadioGroup/index.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback2, useMemo as useMemo5 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var RadioGroup = forwardRef7(function RadioGroupInner({
+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,
@@ -229,17 +188,17 @@ var RadioGroup = forwardRef7(function RadioGroupInner({
     invalid: invalid ?? false,
     onChange: handleChange
   }), [disabled, handleChange, invalid, name, readonly, value]);
-  return /* @__PURE__ */ jsx8(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx8("div", { role: "radiogroup", "aria-disabled": disabled, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": props["aria-labelledby"], "aria-orientation": ariaOrientation, 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 memo4, forwardRef as forwardRef9 } 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 forwardRef8, useCallback as useCallback3 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var SwitchInput = forwardRef8(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
@@ -250,14 +209,14 @@ var SwitchInput = forwardRef8(function SwitchInput2({
   }, [onChange]);
   props.children;
   const classNames = useClassNames("charcoal-switch-input", className);
-  return /* @__PURE__ */ jsx9("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 jsx10, 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,
@@ -265,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__ */ jsx10("div", { className: "charcoal-switch__label_div", children })
+    /* @__PURE__ */ jsx9("div", { className: "charcoal-switch__label_div", children })
   ] });
 });
 
 // src/components/Switch/index.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Switch = forwardRef9(function Switch2({
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Switch = forwardRef8(function Switch2({
   children,
   onChange,
   disabled,
@@ -283,23 +242,23 @@ var Switch = forwardRef9(function Switch2({
 }, ref) {
   const htmlId = useId(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ jsx11(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__ */ jsx11(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ jsx10(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
 });
 var Switch_default = memo4(Switch);
 
 // src/components/TextField/index.tsx
 import { useVisuallyHidden } from "@react-aria/visually-hidden";
 import { useCallback as useCallback4, useEffect as useEffect2, useRef, useState } from "react";
-import * as React8 from "react";
+import * as React7 from "react";
 
 // src/components/FieldLabel/index.tsx
-import * as React7 from "react";
-import { jsx as jsx12, 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,
@@ -309,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__ */ jsx12("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
-    required && /* @__PURE__ */ jsx12("div", { className: "charcoal-field-label-required-text", children: requiredText }),
-    /* @__PURE__ */ jsx12("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ jsx12("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;
@@ -357,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 forwardRef11 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function createDivComponent(mainClassName) {
-  return forwardRef11(function DivComponent({
+  return forwardRef10(function DivComponent({
     className,
     ...props
   }, ref) {
     const classNames = useClassNames(mainClassName, className);
-    return /* @__PURE__ */ jsx13("div", { className: classNames, ref, ...props });
+    return /* @__PURE__ */ jsx12("div", { className: classNames, ref, ...props });
   });
 }
 
@@ -373,8 +332,8 @@ function createDivComponent(mainClassName) {
 var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
 
 // src/components/TextField/index.tsx
-import { jsx as jsx14, 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,
@@ -393,7 +352,7 @@ var TextField = React8.forwardRef(function SingleLineTextFieldInner({
   value,
   getCount = countCodePointsInString,
   ...props
-}, forwardRef24) {
+}, forwardRef23) {
   const inputRef = useRef(null);
   const {
     visuallyHiddenProps
@@ -417,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__ */ jsx14(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__ */ jsx14("div", { className: "charcoal-text-field-prefix", children: prefix }),
-      /* @__PURE__ */ jsx14("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(forwardRef24, 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__ */ jsx14("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__ */ jsx14(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 forwardRef13, useCallback as useCallback5, 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 jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
-var TextArea = forwardRef13(function TextAreaInner({
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var TextArea = forwardRef12(function TextAreaInner({
   onChange,
   className,
   value,
@@ -456,7 +415,7 @@ var TextArea = forwardRef13(function TextAreaInner({
   invalid,
   getCount = countCodePointsInString,
   ...props
-}, forwardRef24) {
+}, forwardRef23) {
   const {
     visuallyHiddenProps
   } = useVisuallyHidden2();
@@ -498,53 +457,50 @@ var TextArea = forwardRef13(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__ */ jsx15(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__ */ jsx15("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__ */ jsx15("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__ */ jsx15(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 jsx16 } 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__ */ jsx16("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 forwardRef16, memo as memo5 } 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 forwardRef15 } 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") {
@@ -557,30 +513,29 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Dialog = forwardRef15(function Dialog2({
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Dialog = forwardRef14(function Dialog2({
   size,
   bottomSheet,
-  css,
   className,
   ...props
-}, forwardRef24) {
-  const ref = useForwardedRef(forwardRef24);
+}, forwardRef23) {
+  const ref = useForwardedRef(forwardRef23);
   const {
     dialogProps
   } = useDialog({
     role: "dialog"
   }, ref);
   const classNames = useClassNames("charcoal-modal-dialog", className);
-  return /* @__PURE__ */ jsx17("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
@@ -613,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]);
     }
@@ -623,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 jsx18, 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 = forwardRef16(function ModalInner({
+var Modal = forwardRef15(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -654,8 +625,7 @@ var Modal = forwardRef16(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, {
@@ -683,8 +653,8 @@ var Modal = forwardRef16(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();
     }
@@ -693,15 +663,15 @@ var Modal = forwardRef16(function ModalInner({
     backgroundColor,
     overflow,
     transform
-  }, item) => item && /* @__PURE__ */ jsx18(Overlay, { portalContainer, children: /* @__PURE__ */ jsx18(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__ */ jsx18(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx18(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,
@@ -709,12 +679,12 @@ var Modal = forwardRef16(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ jsx18(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ jsx17(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var AnimatedDialog = animated(Dialog);
 var Modal_default = memo5(Modal);
-var ModalContext = React13.createContext({
+var ModalContext = React12.createContext({
   titleProps: {},
   title: "",
   close: void 0,
@@ -722,37 +692,37 @@ var ModalContext = React13.createContext({
   bottomSheet: false
 });
 function ModalCloseButton(props) {
-  return /* @__PURE__ */ jsx18(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 jsx19 } 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__ */ jsx19("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ jsx19("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 forwardRef17, useImperativeHandle, useRef as useRef5, memo as memo6 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var LoadingSpinner = forwardRef17(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__ */ jsx20("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__ */ jsx20(LoadingSpinnerIcon, {}) });
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ jsx19(LoadingSpinnerIcon, {}) });
 });
 var LoadingSpinner_default = memo6(LoadingSpinner);
-var LoadingSpinnerIcon = forwardRef17(function LoadingSpinnerIcon2({
+var LoadingSpinnerIcon = forwardRef16(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
   const iconRef = useRef5(null);
@@ -766,19 +736,19 @@ var LoadingSpinnerIcon = forwardRef17(function LoadingSpinnerIcon2({
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ jsx20("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 useCallback7 } from "react";
+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 { jsx as jsx21, 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);
@@ -797,28 +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__ */ jsx21("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("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
-      /* @__PURE__ */ jsx21(DismissButton, { onDismiss: () => props.onClose() }),
-      /* @__PURE__ */ jsx21("div", { tabIndex: 0, onFocus: 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__ */ jsx21("div", { tabIndex: 0, onFocus: props.onClose }),
-      /* @__PURE__ */ jsx21(DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ jsx20("div", { tabIndex: 0, onFocus: props.onClose }),
+      /* @__PURE__ */ jsx20(DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function DropdownPopover({
   children,
   ...props
@@ -845,16 +815,16 @@ function DropdownPopover({
       }
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ jsx22(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) {
@@ -876,8 +846,8 @@ function findPreviewRecursive(children, value) {
 import { useMemo as useMemo6, useRef as useRef8 } from "react";
 
 // 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: [],
@@ -886,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({
@@ -909,11 +879,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { jsx as jsx23 } 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__ */ jsx23("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ jsx23(MenuListContext.Provider, { value: {
+  return /* @__PURE__ */ jsx22("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ jsx22(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -926,14 +896,14 @@ function MenuList(props) {
 // src/components/DropdownSelector/index.tsx
 import { useVisuallyHidden as useVisuallyHidden3 } from "@react-aria/visually-hidden";
 import { useId as useId4 } from "@react-aria/utils";
-import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
+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);
@@ -946,46 +916,46 @@ function DropdownSelector({
   const labelId = useId4();
   const describedbyId = useId4();
   const classNames = useClassNames("charcoal-dropdown-selector-root", props.className);
-  return /* @__PURE__ */ jsxs9("div", { className: classNames, "aria-disabled": props.disabled, children: [
-    /* @__PURE__ */ jsx24(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ jsx24("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx24("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ jsx24("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+  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("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: () => {
+    /* @__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", "data-active": isOpen, children: [
-      /* @__PURE__ */ jsx24("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
-      /* @__PURE__ */ jsx24(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
+      /* @__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__ */ jsx24(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx24(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__ */ jsx24(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ jsx23(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
   ] });
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 
 // src/components/DropdownSelector/ListItem/index.tsx
-import { forwardRef as forwardRef18, useMemo as useMemo8 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var ListItem = forwardRef18(function ListItem2({
+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__ */ jsx25(Component, { className: classNames, ref, ...props });
+  return /* @__PURE__ */ jsx24(Component, { className: classNames, ref, ...props });
 });
 var ListItem_default = ListItem;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-import { useCallback as useCallback8, 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) {
@@ -1022,7 +992,7 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = useContext6(MenuListContext);
+  } = useContext5(MenuListContext);
   const setContextValue = useCallback8(() => {
     if (value !== void 0)
       setValue(value);
@@ -1062,70 +1032,70 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-var MenuItem = forwardRef19(function MenuItem2({
+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__ */ jsx26(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 });
+  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/index.tsx
-import { useContext as useContext7 } from "react";
-import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+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_default, { ...rest, "aria-selected": isSelected, children: [
-    isSelected && /* @__PURE__ */ jsx27(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
-    /* @__PURE__ */ jsx27("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": 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 })
   ] });
 }
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 function MenuItemGroup(props) {
-  return /* @__PURE__ */ jsxs11("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
-    /* @__PURE__ */ jsx28("span", { children: props.text }),
-    /* @__PURE__ */ jsx28("ul", { 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 })
   ] });
 }
 
 // src/components/SegmentedControl/index.tsx
-import { forwardRef as forwardRef20, memo as memo7, useMemo as useMemo9, 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 jsx29 } 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__ */ jsx29(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 jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
-var SegmentedControl = forwardRef20(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 = useMemo9(() => ({
     ...props,
@@ -1144,7 +1114,7 @@ var SegmentedControl = forwardRef20(function SegmentedControlInner(props, ref) {
       label: d
     } : d);
   }, [props.data]);
-  return /* @__PURE__ */ jsx30("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ jsx30(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ jsx30(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 = memo7(SegmentedControl);
 var Segmented = (props) => {
@@ -1160,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__ */ jsx30("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 forwardRef22, memo as memo9 } from "react";
+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 forwardRef21, memo as memo8, useCallback as useCallback9 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var CheckboxInput = forwardRef21(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,
@@ -1186,14 +1156,14 @@ var CheckboxInput = forwardRef21(function CheckboxInput2({
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-checkbox-input", className);
-  return /* @__PURE__ */ jsx31("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 = memo8(CheckboxInput);
 
 // src/components/Checkbox/CheckboxWithLabel.tsx
-import React17 from "react";
-import { jsx as jsx32, 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,
@@ -1201,15 +1171,15 @@ 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__ */ jsx32("div", { className: "charcoal-checkbox__label_div", children })
+    /* @__PURE__ */ jsx31("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
 
 // src/components/Checkbox/index.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Checkbox = forwardRef22(function Checkbox2({
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Checkbox = forwardRef21(function Checkbox2({
   disabled,
   className,
   id,
@@ -1218,20 +1188,20 @@ var Checkbox = forwardRef22(function Checkbox2({
 }, ref) {
   const htmlId = useId5(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ jsx33(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__ */ jsx33(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ jsx32(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
 var Checkbox_default = memo9(Checkbox);
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef23, memo as memo10, useMemo as useMemo10 } 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 jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
-var TagItem = forwardRef23(function TagItemInner({
-  as,
+import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+var TagItem = forwardRef22(function TagItemInner({
+  component,
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
@@ -1245,15 +1215,15 @@ var TagItem = forwardRef23(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 = useMemo10(() => 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__ */ jsx34("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
-      /* @__PURE__ */ jsx34("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__ */ jsx34(Icon_default, { name: "16/Remove" })
+    status === "active" && /* @__PURE__ */ jsx33(Icon_default, { name: "16/Remove" })
   ] });
 });
 var TagItem_default = memo10(TagItem);
@@ -1262,7 +1232,6 @@ export {
   CharcoalProvider,
   Checkbox_default as Checkbox,
   Clickable_default as Clickable,
-  ComponentAbstraction,
   DropdownMenuItem,
   DropdownSelector,
   Icon_default as Icon,
@@ -1284,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