@charcoal-ui/react 4.2.1 → 4.3.0-beta.0

package/dist/index.esm.js

@@ -1,3 +1,5 @@
+"use client";
+
 // src/core/SSRProvider.tsx
 import { SSRProvider as OriginSSRProvider } from "@react-aria/ssr";
 import { version, Fragment } from "react";
@@ -18,17 +20,175 @@ function CharcoalProvider({
   return /* @__PURE__ */ jsx(SSRProvider, { children: /* @__PURE__ */ jsx(OverlayProvider, { children }) });
 }
 
+// src/core/themeHelper.ts
+import { useEffect, useMemo, useState } from "react";
+var LOCAL_STORAGE_KEY = "charcoal-theme";
+var DEFAULT_ROOT_ATTRIBUTE = "theme";
+var keyStringRegExp = new RegExp(/^(\w|-)+$/);
+function assertKeyString(key) {
+  if (!keyStringRegExp.test(key)) {
+    throw new Error(`Unexpected key :${key}, expect: /^(\\w|-)+$/`);
+  }
+}
+var themeSetter = (attr = DEFAULT_ROOT_ATTRIBUTE) => (theme) => {
+  assertKeyString(attr);
+  if (theme !== void 0) {
+    document.documentElement.dataset[attr] = theme;
+  } else {
+    delete document.documentElement.dataset[attr];
+  }
+};
+function themeSelector(theme, attr) {
+  return `:root[data-${attr ?? DEFAULT_ROOT_ATTRIBUTE}='${theme}']`;
+}
+function prefersColorScheme(theme) {
+  return `@media (prefers-color-scheme: ${theme})`;
+}
+function useThemeSetter({
+  key = LOCAL_STORAGE_KEY,
+  setter = themeSetter()
+} = {}) {
+  const [theme, , system] = useTheme(key);
+  useEffect(() => {
+    if (theme === void 0) {
+      return;
+    }
+    setter(system ? void 0 : theme);
+  }, [setter, system, theme]);
+}
+function getThemeSync(key = LOCAL_STORAGE_KEY) {
+  const theme = localStorage.getItem(key);
+  return theme;
+}
+var useTheme = (localStorageKey = LOCAL_STORAGE_KEY) => {
+  assertKeyString(localStorageKey);
+  const isDark = useMedia("(prefers-color-scheme: dark)");
+  const media = isDark !== void 0 ? isDark ? "dark" : "light" : void 0;
+  const [local, setTheme, ready] = useLocalStorage(localStorageKey);
+  const theme = !ready || media === void 0 ? void 0 : local ?? media;
+  const system = local === void 0;
+  return [theme, setTheme, system];
+};
+function useLocalStorage(key, defaultValue) {
+  const [ready, setReady] = useState(false);
+  const [state, setState] = useState();
+  const defaultValueMemo = useMemo(() => defaultValue?.(), [defaultValue]);
+  useEffect(() => {
+    fetch();
+    window.addEventListener("storage", handleStorage);
+    return () => {
+      window.removeEventListener("storage", handleStorage);
+    };
+  });
+  const handleStorage = (e) => {
+    if (e.storageArea !== localStorage) {
+      return;
+    }
+    if (e.key !== key) {
+      return;
+    }
+    fetch();
+  };
+  const fetch = () => {
+    const raw = localStorage.getItem(key);
+    setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo);
+    setReady(true);
+  };
+  const set = (value) => {
+    if (value === void 0) {
+      localStorage.removeItem(key);
+    } else {
+      const raw = serialize(value);
+      localStorage.setItem(key, raw);
+    }
+    const event = new StorageEvent("storage", {
+      bubbles: true,
+      cancelable: false,
+      key,
+      url: location.href,
+      storageArea: localStorage
+    });
+    dispatchEvent(event);
+  };
+  return [state ?? defaultValueMemo, set, ready];
+}
+function deserialize(raw) {
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+function serialize(value) {
+  if (typeof value === "string") {
+    return value;
+  } else {
+    return JSON.stringify(value);
+  }
+}
+function useMedia(query) {
+  const [match, setState] = useState();
+  useEffect(() => {
+    const matcher = window.matchMedia(query);
+    const onChange = () => {
+      setState(matcher.matches);
+    };
+    matcher.addEventListener("change", onChange);
+    setState(matcher.matches);
+    return () => {
+      matcher.removeEventListener("change", onChange);
+    };
+  }, [query]);
+  return match;
+}
+
+// src/core/SetThemeScript.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function makeSetThemeScriptCode({
+  localStorageKey = defaultProps.localStorageKey,
+  rootAttribute = defaultProps.rootAttribute
+} = defaultProps) {
+  assertKeyString(localStorageKey);
+  assertKeyString(rootAttribute);
+  return `'use strict';
+(function () {
+    var localStorageKey = '${localStorageKey}'
+    var rootAttribute = '${rootAttribute}'
+    var currentTheme = localStorage.getItem(localStorageKey);
+    if (currentTheme) {
+        document.documentElement.dataset[rootAttribute] = currentTheme;
+    }
+})();
+`;
+}
+function SetThemeScript({
+  localStorageKey = defaultProps.localStorageKey,
+  rootAttribute = defaultProps.rootAttribute
+}) {
+  const src = makeSetThemeScriptCode({
+    localStorageKey,
+    rootAttribute
+  });
+  return /* @__PURE__ */ jsx2("script", { dangerouslySetInnerHTML: {
+    __html: src
+  } });
+}
+var defaultProps = {
+  localStorageKey: LOCAL_STORAGE_KEY,
+  rootAttribute: DEFAULT_ROOT_ATTRIBUTE
+};
+
 // src/components/Button/index.tsx
-import { forwardRef, useMemo as useMemo2 } from "react";
+import { forwardRef, useMemo as useMemo3 } from "react";
 
 // src/_lib/useClassNames.ts
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 function useClassNames(...classNames) {
-  return useMemo(() => classNames.filter((v) => v).join(" "), [classNames]);
+  return useMemo2(() => classNames.filter((v) => v).join(" "), [classNames]);
 }
 
 // src/components/Button/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var Button = forwardRef(function Button2({
   variant,
   fullWidth,
@@ -38,28 +198,28 @@ var Button = forwardRef(function Button2({
   isActive,
   ...props
 }, ref) {
-  const Component = useMemo2(() => component ?? "button", [component]);
+  const Component = useMemo3(() => component ?? "button", [component]);
   const classNames = useClassNames("charcoal-button", className);
-  return /* @__PURE__ */ jsx2(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
+  return /* @__PURE__ */ jsx3(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 forwardRef2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { useMemo as useMemo4, forwardRef as forwardRef2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Clickable = forwardRef2(function Clickable2({
   component,
   ...props
 }, ref) {
   const className = useClassNames("charcoal-clickable", props.className);
-  const Component = useMemo3(() => component ?? "button", [component]);
-  return /* @__PURE__ */ jsx3(Component, { ...props, ref, className });
+  const Component = useMemo4(() => component ?? "button", [component]);
+  return /* @__PURE__ */ jsx4(Component, { ...props, ref, className });
 });
 var Clickable_default = Clickable;
 
 // src/components/IconButton/index.tsx
-import { forwardRef as forwardRef3, useMemo as useMemo4 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { forwardRef as forwardRef3, useMemo as useMemo5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var IconButton = forwardRef3(function IconButtonInner({
   variant = "Default",
   size = "M",
@@ -69,9 +229,9 @@ var IconButton = forwardRef3(function IconButtonInner({
   ...rest
 }, ref) {
   validateIconSize(size, icon);
-  const Component = useMemo4(() => component ?? "button", [component]);
+  const Component = useMemo5(() => component ?? "button", [component]);
   const classNames = useClassNames("charcoal-icon-button", rest.className);
-  return /* @__PURE__ */ jsx4(Component, { ...rest, ref, className: classNames, "data-size": size, "data-active": isActive, "data-variant": variant, children: /* @__PURE__ */ jsx4("pixiv-icon", { name: icon }) });
+  return /* @__PURE__ */ jsx5(Component, { ...rest, ref, className: classNames, "data-size": size, "data-active": isActive, "data-variant": variant, children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon }) });
 });
 var IconButton_default = IconButton;
 function validateIconSize(size, icon) {
@@ -114,7 +274,7 @@ var RadioGroupContext = React4.createContext({
 
 // src/components/Radio/RadioInput/index.tsx
 import { forwardRef as forwardRef4, memo, useCallback } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var RadioInput = forwardRef4(function RadioInput2({
   onChange,
   invalid,
@@ -126,12 +286,12 @@ var RadioInput = forwardRef4(function RadioInput2({
     onChange?.(el.value);
   }, [onChange]);
   const classNames = useClassNames("charcoal-radio-input", className);
-  return /* @__PURE__ */ jsx5("input", { className: classNames, ref, type: "radio", onChange: handleChange, "aria-invalid": invalid, ...props });
+  return /* @__PURE__ */ jsx6("input", { className: classNames, ref, type: "radio", onChange: handleChange, "aria-invalid": invalid, ...props });
 });
 var RadioInput_default = memo(RadioInput);
 
 // src/components/Radio/index.tsx
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
 var Radio = forwardRef5(function RadioInner({
   value,
   disabled = false,
@@ -148,6 +308,7 @@ var Radio = forwardRef5(function RadioInner({
   } = useContext(RadioGroupContext);
   const classNames = useClassNames("charcoal-radio__label", props.className);
   warning(
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     name !== void 0,
     `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`
   );
@@ -155,15 +316,15 @@ var Radio = forwardRef5(function RadioInner({
   const isDisabled = disabled || isParentDisabled;
   const isReadonly = readonly && !isSelected;
   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 })
+    /* @__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 })
   ] });
 });
 var Radio_default = memo2(Radio);
 
 // src/components/Radio/RadioGroup/index.tsx
-import { forwardRef as forwardRef6, useCallback as useCallback2, useMemo as useMemo5 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { forwardRef as forwardRef6, useCallback as useCallback2, useMemo as useMemo6 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var RadioGroup = forwardRef6(function RadioGroupInner({
   value,
   label,
@@ -180,7 +341,7 @@ var RadioGroup = forwardRef6(function RadioGroupInner({
   const handleChange = useCallback2((next) => {
     onChange(next);
   }, [onChange]);
-  const contextValue = useMemo5(() => ({
+  const contextValue = useMemo6(() => ({
     name,
     selected: value,
     disabled: disabled ?? false,
@@ -188,7 +349,7 @@ var RadioGroup = forwardRef6(function RadioGroupInner({
     invalid: invalid ?? false,
     onChange: handleChange
   }), [disabled, handleChange, invalid, name, readonly, value]);
-  return /* @__PURE__ */ jsx7(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7("div", { role: "radiogroup", "aria-disabled": disabled, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": props["aria-labelledby"], "aria-orientation": ariaOrientation, className: classNames, ref, children }) });
+  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 }) });
 });
 
 // src/components/Switch/index.tsx
@@ -197,7 +358,7 @@ import { useId } from "@react-aria/utils";
 
 // src/components/Switch/SwitchInput/index.tsx
 import { forwardRef as forwardRef7, useCallback as useCallback3 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var SwitchInput = forwardRef7(function SwitchInput2({
   onChange,
   className,
@@ -208,13 +369,13 @@ var SwitchInput = forwardRef7(function SwitchInput2({
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-switch-input", className);
-  return /* @__PURE__ */ jsx8("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
+  return /* @__PURE__ */ jsx9("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
 });
 var SwitchInput_default = SwitchInput;
 
 // src/components/Switch/SwitchWithLabel.tsx
 import * as React5 from "react";
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var SwitchWithLabel = React5.memo(function SwitchWithLabel2({
   children,
   className,
@@ -225,12 +386,12 @@ var SwitchWithLabel = React5.memo(function SwitchWithLabel2({
   const classNames = useClassNames("charcoal-switch__label", className);
   return /* @__PURE__ */ jsxs2("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
     input,
-    /* @__PURE__ */ jsx9("div", { className: "charcoal-switch__label_div", children })
+    /* @__PURE__ */ jsx10("div", { className: "charcoal-switch__label_div", children })
   ] });
 });
 
 // src/components/Switch/index.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Switch = forwardRef8(function Switch2({
   children,
   onChange,
@@ -241,22 +402,22 @@ var Switch = forwardRef8(function Switch2({
 }, ref) {
   const htmlId = useId(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ jsx10(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
+  const input = /* @__PURE__ */ jsx11(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ jsx10(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ jsx11(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 { useCallback as useCallback4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
 import * as React7 from "react";
 
 // src/components/FieldLabel/index.tsx
 import * as React6 from "react";
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
 var FieldLabel = React6.forwardRef(function FieldLabel2({
   style,
   className,
@@ -268,9 +429,9 @@ var FieldLabel = React6.forwardRef(function FieldLabel2({
 }, ref) {
   const classNames = useClassNames("charcoal-field-label-root", className);
   return /* @__PURE__ */ jsxs3("div", { style, className: classNames, children: [
-    /* @__PURE__ */ jsx11("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
-    required && /* @__PURE__ */ jsx11("div", { className: "charcoal-field-label-required-text", children: requiredText }),
-    /* @__PURE__ */ jsx11("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ jsx11("span", { children: subLabel }) })
+    /* @__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 }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
@@ -293,9 +454,9 @@ function countCodePointsInString(string) {
 }
 
 // src/components/TextField/useFocusWithClick.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 function useFocusWithClick(containerRef, inputRef) {
-  useEffect(() => {
+  useEffect2(() => {
     const el = containerRef.current;
     if (el) {
       const handleDown = (e) => {
@@ -316,14 +477,14 @@ import { mergeRefs as mergeRefs2, useId as useId2 } from "@react-aria/utils";
 
 // src/_lib/createDivComponent.tsx
 import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function createDivComponent(mainClassName) {
   return forwardRef10(function DivComponent({
     className,
     ...props
   }, ref) {
     const classNames = useClassNames(mainClassName, className);
-    return /* @__PURE__ */ jsx12("div", { className: classNames, ref, ...props });
+    return /* @__PURE__ */ jsx13("div", { className: classNames, ref, ...props });
   });
 }
 
@@ -331,7 +492,7 @@ function createDivComponent(mainClassName) {
 var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
 
 // src/components/TextField/index.tsx
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   assistiveText,
   className,
@@ -356,7 +517,7 @@ var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   const {
     visuallyHiddenProps
   } = useVisuallyHidden();
-  const [count, setCount] = useState(getCount(value ?? ""));
+  const [count, setCount] = useState2(getCount(value ?? ""));
   const handleChange = useCallback4((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
@@ -366,7 +527,7 @@ var TextField = React7.forwardRef(function SingleLineTextFieldInner({
     setCount(count2);
     onChange?.(value2);
   }, [getCount, maxLength, onChange]);
-  useEffect2(() => {
+  useEffect3(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
   const containerRef = useRef(null);
@@ -377,25 +538,25 @@ var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
   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__ */ jsx14(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 }),
+      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(forwardRef23, inputRef), type, value, ...props }),
       (suffix || showCount) && /* @__PURE__ */ jsxs4("div", { className: "charcoal-text-field-suffix", children: [
         suffix,
-        showCount && /* @__PURE__ */ jsx13("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ jsx14("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    showAssistiveText && /* @__PURE__ */ jsx13(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ jsx14(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
 
 // src/components/TextArea/index.tsx
 import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
-import { forwardRef as forwardRef12, useCallback as useCallback5, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback5, useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
 import { useId as useId3 } from "@react-aria/utils";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 var TextArea = forwardRef12(function TextAreaInner({
   onChange,
   className,
@@ -419,8 +580,8 @@ var TextArea = forwardRef12(function TextAreaInner({
     visuallyHiddenProps
   } = useVisuallyHidden2();
   const textareaRef = useRef2(null);
-  const [count, setCount] = useState2(getCount(value ?? ""));
-  const [rows, setRows] = useState2(initialRows);
+  const [count, setCount] = useState3(getCount(value ?? ""));
+  const [rows, setRows] = useState3(initialRows);
   const syncHeight = useCallback5((textarea) => {
     const rows2 = (`${textarea.value}
 `.match(/\n/gu)?.length ?? 0) || 1;
@@ -441,10 +602,10 @@ var TextArea = forwardRef12(function TextAreaInner({
     }
     onChange?.(value2);
   }, [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]);
-  useEffect3(() => {
+  useEffect4(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
@@ -457,14 +618,14 @@ var TextArea = forwardRef12(function TextAreaInner({
   const classNames = useClassNames("charcoal-text-area-root", className);
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
   return /* @__PURE__ */ jsxs5("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsx14(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsx15(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
     /* @__PURE__ */ jsxs5("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
       "--charcoal-text-area-rows": `${showCount ? rows + 1 : rows}`
     }, children: [
-      /* @__PURE__ */ jsx14("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef23, textareaRef), rows, value, disabled, ...props }),
-      showCount && /* @__PURE__ */ jsx14("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+      /* @__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(forwardRef23, textareaRef), rows, value, disabled, ...props }),
+      showCount && /* @__PURE__ */ jsx15("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    showAssistiveText && /* @__PURE__ */ jsx14(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ jsx15(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
@@ -472,7 +633,7 @@ var TextArea_default = TextArea;
 // src/components/Icon/index.tsx
 import * as React8 from "react";
 import "@charcoal-ui/icons";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Icon = React8.forwardRef(function IconInner({
   name,
   scale,
@@ -480,7 +641,7 @@ var Icon = React8.forwardRef(function IconInner({
   className,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx15("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+  return /* @__PURE__ */ jsx16("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
 });
 var Icon_default = Icon;
 
@@ -512,7 +673,7 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Dialog = forwardRef14(function Dialog2({
   size,
   bottomSheet,
@@ -526,7 +687,7 @@ var Dialog = forwardRef14(function Dialog2({
     role: "dialog"
   }, ref);
   const classNames = useClassNames("charcoal-modal-dialog", className);
-  return /* @__PURE__ */ jsx16("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, "data-size": size, ref, ...props });
+  return /* @__PURE__ */ jsx17("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
@@ -538,9 +699,9 @@ import * as React11 from "react";
 import { ariaHideOutside, useOverlay, useOverlayFocusContain } from "@react-aria/overlays";
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 function usePreventScroll(element, isOpen) {
-  useEffect5(() => {
+  useEffect6(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -595,7 +756,7 @@ function useWindowWidth() {
 }
 
 // src/components/Modal/index.tsx
-import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_Z_INDEX = 10;
 var Modal = forwardRef15(function ModalInner({
   children,
@@ -662,13 +823,13 @@ var Modal = forwardRef15(function ModalInner({
     backgroundColor,
     overflow,
     transform
-  }, item) => item && /* @__PURE__ */ jsx17(Overlay, { portalContainer, children: /* @__PURE__ */ jsx17(animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
+  }, item) => item && /* @__PURE__ */ jsx18(Overlay, { portalContainer, children: /* @__PURE__ */ jsx18(animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
     backgroundColor,
     overflow,
     zIndex
   } : {
     zIndex
-  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ jsx17(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx17(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
+  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ jsx18(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ jsx18(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
     transform
   } : {}, size, bottomSheet, className, children: /* @__PURE__ */ jsxs6(ModalContext.Provider, { value: {
     titleProps: {},
@@ -678,7 +839,7 @@ var Modal = forwardRef15(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ jsx17(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ jsx18(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var AnimatedDialog = animated(Dialog);
@@ -691,15 +852,15 @@ var ModalContext = React12.createContext({
   bottomSheet: false
 });
 function ModalCloseButton(props) {
-  return /* @__PURE__ */ jsx17(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
+  return /* @__PURE__ */ jsx18(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
 }
 
 // src/components/Modal/ModalPlumbing.tsx
 import { useContext as useContext3 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function ModalHeader() {
   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 }) });
+  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 }) });
 }
 var ModalAlign = createDivComponent("charcoal-modal-align");
 var ModalBody = createDivComponent("charcoal-modal-body");
@@ -707,7 +868,7 @@ var ModalButtons = createDivComponent("charcoal-modal-buttons");
 
 // src/components/LoadingSpinner/index.tsx
 import { forwardRef as forwardRef16, useImperativeHandle, useRef as useRef5, memo as memo6 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var LoadingSpinner = forwardRef16(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
@@ -715,10 +876,10 @@ var LoadingSpinner = forwardRef16(function LoadingSpinnerInner({
   ...props
 }, ref) {
   const classNames = useClassNames("charcoal-loading-spinner", props.className);
-  return /* @__PURE__ */ jsx19("div", { role: "progressbar", style: {
+  return /* @__PURE__ */ jsx20("div", { role: "progressbar", style: {
     "--charcoal-loading-spinner-size": `${size}px`,
     "--charcoal-loading-spinner-padding": `${padding}px`
-  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ jsx19(LoadingSpinnerIcon, {}) });
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ jsx20(LoadingSpinnerIcon, {}) });
 });
 var LoadingSpinner_default = memo6(LoadingSpinner);
 var LoadingSpinnerIcon = forwardRef16(function LoadingSpinnerIcon2({
@@ -735,19 +896,19 @@ var LoadingSpinnerIcon = forwardRef16(function LoadingSpinnerIcon2({
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ jsx19("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
+  return /* @__PURE__ */ jsx20("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
 });
 
 // src/components/DropdownSelector/index.tsx
-import { useState as useState4, useRef as useRef9, useMemo as useMemo7, useCallback as useCallback7 } from "react";
+import { useState as useState5, useRef as useRef9, useMemo as useMemo8, useCallback as useCallback7 } from "react";
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-import { useEffect as useEffect7, useRef as useRef7 } from "react";
+import { useEffect as useEffect8, useRef as useRef7 } from "react";
 
 // src/components/DropdownSelector/Popover/index.tsx
 import { useContext as useContext4, useRef as useRef6 } from "react";
 import { DismissButton, Overlay as Overlay2, usePopover } from "@react-aria/overlays";
-import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
 var _empty = () => null;
 function Popover(props) {
   const defaultPopoverRef = useRef6(null);
@@ -762,6 +923,7 @@ function Popover(props) {
   }, {
     close: props.onClose,
     isOpen: props.isOpen,
+    // never used
     open: _empty,
     setOpen: _empty,
     toggle: _empty
@@ -771,34 +933,34 @@ function Popover(props) {
   if (!props.isOpen)
     return null;
   return /* @__PURE__ */ jsxs7(Overlay2, { portalContainer: document.body, children: [
-    /* @__PURE__ */ jsx20("div", { ...underlayProps, style: {
+    /* @__PURE__ */ jsx21("div", { ...underlayProps, style: {
       position: "fixed",
       zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
       inset: 0
     } }),
     /* @__PURE__ */ jsxs7("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
-      /* @__PURE__ */ jsx20(DismissButton, { onDismiss: () => props.onClose() }),
-      /* @__PURE__ */ jsx20("div", { tabIndex: 0, onFocus: props.onClose }),
+      /* @__PURE__ */ jsx21(DismissButton, { onDismiss: () => props.onClose() }),
+      /* @__PURE__ */ jsx21("div", { tabIndex: 0, onFocus: props.onClose }),
       props.children,
-      /* @__PURE__ */ jsx20("div", { tabIndex: 0, onFocus: props.onClose }),
-      /* @__PURE__ */ jsx20(DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ jsx21("div", { tabIndex: 0, onFocus: props.onClose }),
+      /* @__PURE__ */ jsx21(DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function DropdownPopover({
   children,
   ...props
 }) {
   const ref = useRef7(null);
-  useEffect7(() => {
+  useEffect8(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (props.isOpen) {
       if (props.value !== void 0 && props.value !== "") {
         const windowScrollY = window.scrollY;
@@ -814,7 +976,7 @@ function DropdownPopover({
       }
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ jsx21(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
+  return /* @__PURE__ */ jsx22(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
@@ -842,7 +1004,7 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { useMemo as useMemo6, useRef as useRef8 } from "react";
+import { useMemo as useMemo7, useRef as useRef8 } from "react";
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
 import { createContext as createContext4 } from "react";
@@ -878,11 +1040,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function MenuList(props) {
   const root = useRef8(null);
-  const propsArray = useMemo6(() => getValuesRecursive(props.children), [props.children]);
-  return /* @__PURE__ */ jsx22("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ jsx22(MenuListContext.Provider, { value: {
+  const propsArray = useMemo7(() => getValuesRecursive(props.children), [props.children]);
+  return /* @__PURE__ */ jsx23("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ jsx23(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -895,16 +1057,16 @@ 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 jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
 function DropdownSelector({
   onChange,
   showLabel = false,
   ...props
 }) {
   const triggerRef = useRef9(null);
-  const [isOpen, setIsOpen] = useState4(false);
+  const [isOpen, setIsOpen] = useState5(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = useMemo7(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const isPlaceholder = useMemo8(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
   const propsArray = getValuesRecursive(props.children);
   const {
     visuallyHiddenProps
@@ -916,23 +1078,23 @@ function DropdownSelector({
   const describedbyId = useId4();
   const classNames = useClassNames("charcoal-dropdown-selector-root", props.className);
   return /* @__PURE__ */ jsxs8("div", { className: classNames, "aria-disabled": props.disabled, children: [
-    /* @__PURE__ */ jsx23(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ jsx23("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx23("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ jsx23("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+    /* @__PURE__ */ 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);
     }) }) }),
     /* @__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__ */ 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" })
+      /* @__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" })
     ] }),
-    isOpen && /* @__PURE__ */ jsx23(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx23(MenuList, { value: props.value, onChange: (v) => {
+    isOpen && /* @__PURE__ */ jsx24(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx24(MenuList, { value: props.value, onChange: (v) => {
       onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
-    props.assistiveText !== void 0 && /* @__PURE__ */ jsx23(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ jsx24(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
   ] });
 }
 
@@ -940,16 +1102,16 @@ function DropdownSelector({
 import { forwardRef as forwardRef18 } from "react";
 
 // src/components/DropdownSelector/ListItem/index.tsx
-import { forwardRef as forwardRef17, useMemo as useMemo8 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { forwardRef as forwardRef17, useMemo as useMemo9 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var ListItem = forwardRef17(function ListItem2({
   as,
   className,
   ...props
 }, ref) {
-  const Component = useMemo8(() => as ?? "li", [as]);
+  const Component = useMemo9(() => as ?? "li", [as]);
   const classNames = useClassNames("charcoal-list-item", className);
-  return /* @__PURE__ */ jsx24(Component, { className: classNames, ref, ...props });
+  return /* @__PURE__ */ jsx25(Component, { className: classNames, ref, ...props });
 });
 var ListItem_default = ListItem;
 
@@ -1009,7 +1171,13 @@ function useMenuItemHandleKeyDown(value) {
       if (index === -1)
         return;
       for (let n = 0; n < values.length; n++) {
-        const focusValue = isForward ? index + 1 >= values.length ? values[0] : values[index + 1] : index - 1 < 0 ? values[values.length - 1] : values[index - 1];
+        const focusValue = isForward ? (
+          // prev or last
+          index + 1 >= values.length ? values[0] : values[index + 1]
+        ) : (
+          // next or first
+          index - 1 < 0 ? values[values.length - 1] : values[index - 1]
+        );
         const next = root?.current?.querySelector(`[data-key='${focusValue}']`);
         if (next instanceof HTMLElement) {
           if (next.ariaDisabled === "true") {
@@ -1031,7 +1199,7 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var MenuItem = forwardRef18(function MenuItem2({
   className,
   value,
@@ -1039,13 +1207,13 @@ var MenuItem = forwardRef18(function MenuItem2({
   ...props
 }, ref) {
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
-  return /* @__PURE__ */ jsx25(ListItem_default, { ...props, ref, "data-key": value, onKeyDown: handleKeyDown, onClick: disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": disabled, role: "option", children: props.children });
+  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 });
 });
 var MenuItem_default = MenuItem;
 
 // src/components/DropdownSelector/DropdownMenuItem/index.tsx
 import { useContext as useContext6 } from "react";
-import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
@@ -1056,34 +1224,34 @@ function DropdownMenuItem(props) {
     ...rest
   } = props;
   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 })
+    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 })
   ] });
 }
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
 function MenuItemGroup(props) {
   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 })
+    /* @__PURE__ */ jsx28("span", { children: props.text }),
+    /* @__PURE__ */ jsx28("ul", { role: "group", children: props.children })
   ] });
 }
 
 // src/components/SegmentedControl/index.tsx
-import { forwardRef as forwardRef19, memo as memo7, useMemo as useMemo9, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef19, memo as memo7, useMemo as useMemo10, 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 createContext5, useContext as useContext7 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var RadioContext = createContext5(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx28(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx29(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
   const state = useContext7(RadioContext);
@@ -1093,10 +1261,10 @@ var useRadioContext = () => {
 };
 
 // src/components/SegmentedControl/index.tsx
-import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx30, 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(() => ({
+  const ariaRadioGroupProps = useMemo10(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1107,19 +1275,19 @@ var SegmentedControl = forwardRef19(function SegmentedControlInner(props, ref) {
   const {
     radioGroupProps
   } = useRadioGroup(ariaRadioGroupProps, state);
-  const segmentedControlItems = useMemo9(() => {
+  const segmentedControlItems = useMemo10(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
     } : d);
   }, [props.data]);
-  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)) }) });
+  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)) }) });
 });
 var SegmentedControl_default = memo7(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
   const ref = useRef10(null);
-  const ariaRadioProps = useMemo9(() => ({
+  const ariaRadioProps = useMemo10(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1130,7 +1298,7 @@ var Segmented = (props) => {
     isSelected
   } = useRadio(ariaRadioProps, state, 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 }),
+    /* @__PURE__ */ jsx30("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
     props.children
   ] });
 };
@@ -1141,7 +1309,7 @@ import { useId as useId5 } from "@react-aria/utils";
 
 // src/components/Checkbox/CheckboxInput/index.tsx
 import { forwardRef as forwardRef20, memo as memo8, useCallback as useCallback9 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var CheckboxInput = forwardRef20(function CheckboxInput2({
   onChange,
   checked,
@@ -1155,13 +1323,13 @@ var CheckboxInput = forwardRef20(function CheckboxInput2({
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-checkbox-input", className);
-  return /* @__PURE__ */ jsx30("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
+  return /* @__PURE__ */ jsx31("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
 });
 var CheckboxInput_default = memo8(CheckboxInput);
 
 // src/components/Checkbox/CheckboxWithLabel.tsx
 import React16 from "react";
-import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 var CheckboxWithLabel = React16.memo(function CheckboxWithLabel2({
   className,
   children,
@@ -1172,12 +1340,12 @@ var CheckboxWithLabel = React16.memo(function CheckboxWithLabel2({
   const classNames = useClassNames("charcoal-checkbox__label", className);
   return /* @__PURE__ */ jsxs12("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
     input,
-    /* @__PURE__ */ jsx31("div", { className: "charcoal-checkbox__label_div", children })
+    /* @__PURE__ */ jsx32("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
 
 // src/components/Checkbox/index.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Checkbox = forwardRef21(function Checkbox2({
   disabled,
   className,
@@ -1187,18 +1355,18 @@ var Checkbox = forwardRef21(function Checkbox2({
 }, ref) {
   const htmlId = useId5(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ jsx32(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  const input = /* @__PURE__ */ jsx33(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ jsx32(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ jsx33(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
 var Checkbox_default = memo9(Checkbox);
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef22, memo as memo10, useMemo as useMemo10 } from "react";
+import { forwardRef as forwardRef22, memo as memo10, useMemo as useMemo11 } from "react";
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
-import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
 var TagItem = forwardRef22(function TagItemInner({
   component,
   label,
@@ -1214,15 +1382,15 @@ var TagItem = forwardRef22(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(() => component ?? "button", [component]);
+  const Component = useMemo11(() => component ?? "button", [component]);
   return /* @__PURE__ */ jsxs13(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
     "--charcoal-tag-item-bg": bg
   }, children: [
     /* @__PURE__ */ jsxs13("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
-      hasTranslatedLabel && /* @__PURE__ */ jsx33("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
-      /* @__PURE__ */ jsx33("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+      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 })
     ] }),
-    status === "active" && /* @__PURE__ */ jsx33(Icon_default, { name: "16/Remove" })
+    status === "active" && /* @__PURE__ */ jsx34(Icon_default, { name: "16/Remove" })
   ] });
 });
 var TagItem_default = memo10(TagItem);
@@ -1249,9 +1417,19 @@ export {
   RadioGroup,
   SSRProvider,
   SegmentedControl_default as SegmentedControl,
+  SetThemeScript,
   Switch_default as Switch,
   TagItem_default as TagItem,
   TextArea_default as TextArea,
-  TextField_default as TextField
+  TextField_default as TextField,
+  getThemeSync,
+  makeSetThemeScriptCode,
+  prefersColorScheme,
+  themeSelector,
+  themeSetter,
+  useLocalStorage,
+  useMedia,
+  useTheme,
+  useThemeSetter
 };
 //# sourceMappingURL=index.esm.js.map