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

package/dist/index.cjs.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -18,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -48,10 +53,20 @@ __export(src_exports, {
   RadioGroup: () => RadioGroup,
   SSRProvider: () => SSRProvider,
   SegmentedControl: () => SegmentedControl_default,
+  SetThemeScript: () => SetThemeScript,
   Switch: () => Switch_default,
   TagItem: () => TagItem_default,
   TextArea: () => TextArea_default,
-  TextField: () => TextField_default
+  TextField: () => TextField_default,
+  getThemeSync: () => getThemeSync,
+  makeSetThemeScriptCode: () => makeSetThemeScriptCode,
+  prefersColorScheme: () => prefersColorScheme,
+  themeSelector: () => themeSelector,
+  themeSetter: () => themeSetter,
+  useLocalStorage: () => useLocalStorage,
+  useMedia: () => useMedia,
+  useTheme: () => useTheme,
+  useThemeSetter: () => useThemeSetter
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -75,18 +90,176 @@ function CharcoalProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SSRProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_overlays.OverlayProvider, { children }) });
 }
 
+// src/core/themeHelper.ts
+var import_react2 = require("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);
+  (0, import_react2.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] = (0, import_react2.useState)(false);
+  const [state, setState] = (0, import_react2.useState)();
+  const defaultValueMemo = (0, import_react2.useMemo)(() => defaultValue?.(), [defaultValue]);
+  (0, import_react2.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] = (0, import_react2.useState)();
+  (0, import_react2.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
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)("script", { dangerouslySetInnerHTML: {
+    __html: src
+  } });
+}
+var defaultProps = {
+  localStorageKey: LOCAL_STORAGE_KEY,
+  rootAttribute: DEFAULT_ROOT_ATTRIBUTE
+};
+
 // src/components/Button/index.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/_lib/useClassNames.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 function useClassNames(...classNames) {
-  return (0, import_react2.useMemo)(() => classNames.filter((v) => v).join(" "), [classNames]);
+  return (0, import_react3.useMemo)(() => classNames.filter((v) => v).join(" "), [classNames]);
 }
 
 // src/components/Button/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Button = (0, import_react3.forwardRef)(function Button2({
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Button = (0, import_react4.forwardRef)(function Button2({
   variant,
   fullWidth,
   size,
@@ -95,29 +268,29 @@ var Button = (0, import_react3.forwardRef)(function Button2({
   isActive,
   ...props
 }, ref) {
-  const Component = (0, import_react3.useMemo)(() => component ?? "button", [component]);
+  const Component = (0, import_react4.useMemo)(() => component ?? "button", [component]);
   const classNames = useClassNames("charcoal-button", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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
-var import_react4 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Clickable = (0, import_react4.forwardRef)(function Clickable2({
+var import_react5 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Clickable = (0, import_react5.forwardRef)(function Clickable2({
   component,
   ...props
 }, ref) {
   const className = useClassNames("charcoal-clickable", props.className);
-  const Component = (0, import_react4.useMemo)(() => component ?? "button", [component]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, ref, className });
+  const Component = (0, import_react5.useMemo)(() => component ?? "button", [component]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...props, ref, className });
 });
 var Clickable_default = Clickable;
 
 // src/components/IconButton/index.tsx
-var import_react5 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var IconButton = (0, import_react5.forwardRef)(function IconButtonInner({
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var IconButton = (0, import_react6.forwardRef)(function IconButtonInner({
   variant = "Default",
   size = "M",
   icon,
@@ -126,9 +299,9 @@ var IconButton = (0, import_react5.forwardRef)(function IconButtonInner({
   ...rest
 }, ref) {
   validateIconSize(size, icon);
-  const Component = (0, import_react5.useMemo)(() => component ?? "button", [component]);
+  const Component = (0, import_react6.useMemo)(() => component ?? "button", [component]);
   const classNames = useClassNames("charcoal-icon-button", rest.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...rest, ref, className: classNames, "data-size": size, "data-active": isActive, "data-variant": variant, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pixiv-icon", { name: icon }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { ...rest, ref, className: classNames, "data-size": size, "data-active": isActive, "data-variant": variant, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon }) });
 });
 var IconButton_default = IconButton;
 function validateIconSize(size, icon) {
@@ -153,7 +326,7 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_warning = __toESM(require("warning"));
 
 // src/components/Radio/RadioGroupContext.ts
@@ -170,26 +343,26 @@ var RadioGroupContext = React4.createContext({
 });
 
 // src/components/Radio/RadioInput/index.tsx
-var import_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var RadioInput = (0, import_react6.forwardRef)(function RadioInput2({
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var RadioInput = (0, import_react7.forwardRef)(function RadioInput2({
   onChange,
   invalid,
   className,
   ...props
 }, ref) {
-  const handleChange = (0, import_react6.useCallback)((e) => {
+  const handleChange = (0, import_react7.useCallback)((e) => {
     const el = e.currentTarget;
     onChange?.(el.value);
   }, [onChange]);
   const classNames = useClassNames("charcoal-radio-input", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { className: classNames, ref, type: "radio", onChange: handleChange, "aria-invalid": invalid, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { className: classNames, ref, type: "radio", onChange: handleChange, "aria-invalid": invalid, ...props });
 });
-var RadioInput_default = (0, import_react6.memo)(RadioInput);
+var RadioInput_default = (0, import_react7.memo)(RadioInput);
 
 // src/components/Radio/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Radio = (0, import_react7.forwardRef)(function RadioInner({
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Radio = (0, import_react8.forwardRef)(function RadioInner({
   value,
   disabled = false,
   children,
@@ -202,26 +375,27 @@ var Radio = (0, import_react7.forwardRef)(function RadioInner({
     readonly,
     invalid,
     onChange
-  } = (0, import_react7.useContext)(RadioGroupContext);
+  } = (0, import_react8.useContext)(RadioGroupContext);
   const classNames = useClassNames("charcoal-radio__label", props.className);
   (0, import_warning.default)(
+    // 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> ?`
   );
   const isSelected = value === selected;
   const isDisabled = disabled || isParentDisabled;
   const isReadonly = readonly && !isSelected;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioInput_default, { name, value, checked: isSelected, "aria-invalid": invalid, onChange, disabled: isDisabled || isReadonly, ref }),
-    children != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "charcoal-radio__label_div", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { "aria-disabled": isDisabled || isReadonly, className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadioInput_default, { name, value, checked: isSelected, "aria-invalid": invalid, onChange, disabled: isDisabled || isReadonly, ref }),
+    children != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "charcoal-radio__label_div", children })
   ] });
 });
-var Radio_default = (0, import_react7.memo)(Radio);
+var Radio_default = (0, import_react8.memo)(Radio);
 
 // src/components/Radio/RadioGroup/index.tsx
-var import_react8 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var RadioGroup = (0, import_react8.forwardRef)(function RadioGroupInner({
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react9.forwardRef)(function RadioGroupInner({
   value,
   label,
   name,
@@ -234,10 +408,10 @@ var RadioGroup = (0, import_react8.forwardRef)(function RadioGroupInner({
   ...props
 }, ref) {
   const classNames = useClassNames("charcoal-radio-group", props.className);
-  const handleChange = (0, import_react8.useCallback)((next) => {
+  const handleChange = (0, import_react9.useCallback)((next) => {
     onChange(next);
   }, [onChange]);
-  const contextValue = (0, import_react8.useMemo)(() => ({
+  const contextValue = (0, import_react9.useMemo)(() => ({
     name,
     selected: value,
     disabled: disabled ?? false,
@@ -245,33 +419,33 @@ var RadioGroup = (0, import_react8.forwardRef)(function RadioGroupInner({
     invalid: invalid ?? false,
     onChange: handleChange
   }), [disabled, handleChange, invalid, name, readonly, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { role: "radiogroup", "aria-disabled": disabled, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": props["aria-labelledby"], "aria-orientation": ariaOrientation, className: classNames, ref, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "radiogroup", "aria-disabled": disabled, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": props["aria-labelledby"], "aria-orientation": ariaOrientation, className: classNames, ref, children }) });
 });
 
 // src/components/Switch/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_utils = require("@react-aria/utils");
 
 // src/components/Switch/SwitchInput/index.tsx
-var import_react9 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var SwitchInput = (0, import_react9.forwardRef)(function SwitchInput2({
+var import_react10 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SwitchInput = (0, import_react10.forwardRef)(function SwitchInput2({
   onChange,
   className,
   ...props
 }, ref) {
-  const handleChange = (0, import_react9.useCallback)((e) => {
+  const handleChange = (0, import_react10.useCallback)((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-switch-input", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
 });
 var SwitchInput_default = SwitchInput;
 
 // src/components/Switch/SwitchWithLabel.tsx
 var React5 = __toESM(require("react"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SwitchWithLabel = React5.memo(function SwitchWithLabel2({
   children,
   className,
@@ -280,15 +454,15 @@ var SwitchWithLabel = React5.memo(function SwitchWithLabel2({
   input
 }) {
   const classNames = useClassNames("charcoal-switch__label", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
     input,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "charcoal-switch__label_div", children })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-switch__label_div", children })
   ] });
 });
 
 // src/components/Switch/index.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Switch = (0, import_react10.forwardRef)(function Switch2({
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Switch = (0, import_react11.forwardRef)(function Switch2({
   children,
   onChange,
   disabled,
@@ -298,22 +472,22 @@ var Switch = (0, import_react10.forwardRef)(function Switch2({
 }, ref) {
   const htmlId = (0, import_utils.useId)(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
+  const input = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SwitchInput_default, { ...props, disabled, className: noChildren ? className : void 0, id: htmlId, onChange, ref, role: "switch", type: "checkbox" });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Switch_default = (0, import_react10.memo)(Switch);
+var Switch_default = (0, import_react11.memo)(Switch);
 
 // src/components/TextField/index.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react13 = require("react");
+var import_react14 = require("react");
 var React7 = __toESM(require("react"));
 
 // src/components/FieldLabel/index.tsx
 var React6 = __toESM(require("react"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FieldLabel = React6.forwardRef(function FieldLabel2({
   style,
   className,
@@ -324,10 +498,10 @@ var FieldLabel = React6.forwardRef(function FieldLabel2({
   ...labelProps
 }, ref) {
   const classNames = useClassNames("charcoal-field-label-root", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style, className: classNames, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
-    required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "charcoal-field-label-required-text", children: requiredText }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: subLabel }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style, className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
+    required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "charcoal-field-label-required-text", children: requiredText }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: subLabel }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
@@ -350,9 +524,9 @@ function countCodePointsInString(string) {
 }
 
 // src/components/TextField/useFocusWithClick.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useFocusWithClick(containerRef, inputRef) {
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const el = containerRef.current;
     if (el) {
       const handleDown = (e) => {
@@ -372,15 +546,15 @@ function useFocusWithClick(containerRef, inputRef) {
 var import_utils2 = require("@react-aria/utils");
 
 // src/_lib/createDivComponent.tsx
-var import_react12 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function createDivComponent(mainClassName) {
-  return (0, import_react12.forwardRef)(function DivComponent({
+  return (0, import_react13.forwardRef)(function DivComponent({
     className,
     ...props
   }, ref) {
     const classNames = useClassNames(mainClassName, className);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: classNames, ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: classNames, ref, ...props });
   });
 }
 
@@ -388,7 +562,7 @@ function createDivComponent(mainClassName) {
 var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
 
 // src/components/TextField/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   assistiveText,
   className,
@@ -409,12 +583,12 @@ var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   getCount = countCodePointsInString,
   ...props
 }, forwardRef23) {
-  const inputRef = (0, import_react13.useRef)(null);
+  const inputRef = (0, import_react14.useRef)(null);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden.useVisuallyHidden)();
-  const [count, setCount] = (0, import_react13.useState)(getCount(value ?? ""));
-  const handleChange = (0, import_react13.useCallback)((e) => {
+  const [count, setCount] = (0, import_react14.useState)(getCount(value ?? ""));
+  const handleChange = (0, import_react14.useCallback)((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -423,37 +597,37 @@ var TextField = React7.forwardRef(function SingleLineTextFieldInner({
     setCount(count2);
     onChange?.(value2);
   }, [getCount, maxLength, onChange]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  const containerRef = (0, import_react13.useRef)(null);
+  const containerRef = (0, import_react14.useRef)(null);
   useFocusWithClick(containerRef, inputRef);
   const inputId = (0, import_utils2.useId)(props.id);
   const describedbyId = (0, import_utils2.useId)();
   const labelledbyId = (0, import_utils2.useId)();
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
   const classNames = useClassNames("charcoal-text-field-root", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
-      prefix && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "charcoal-text-field-prefix", children: prefix }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: (0, import_utils2.mergeRefs)(forwardRef23, inputRef), type, value, ...props }),
-      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "charcoal-text-field-suffix", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "charcoal-text-field-container", "aria-disabled": disabled === true ? true : void 0, "data-invalid": invalid === true, ref: containerRef, children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "charcoal-text-field-prefix", children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: (0, import_utils2.mergeRefs)(forwardRef23, inputRef), type, value, ...props }),
+      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "charcoal-text-field-suffix", children: [
         suffix,
-        showCount && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
 
 // src/components/TextArea/index.tsx
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_utils3 = require("@react-aria/utils");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var TextArea = (0, import_react14.forwardRef)(function TextAreaInner({
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TextArea = (0, import_react15.forwardRef)(function TextAreaInner({
   onChange,
   className,
   value,
@@ -475,16 +649,16 @@ var TextArea = (0, import_react14.forwardRef)(function TextAreaInner({
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden2.useVisuallyHidden)();
-  const textareaRef = (0, import_react14.useRef)(null);
-  const [count, setCount] = (0, import_react14.useState)(getCount(value ?? ""));
-  const [rows, setRows] = (0, import_react14.useState)(initialRows);
-  const syncHeight = (0, import_react14.useCallback)((textarea) => {
+  const textareaRef = (0, import_react15.useRef)(null);
+  const [count, setCount] = (0, import_react15.useState)(getCount(value ?? ""));
+  const [rows, setRows] = (0, import_react15.useState)(initialRows);
+  const syncHeight = (0, import_react15.useCallback)((textarea) => {
     const rows2 = (`${textarea.value}
 `.match(/\n/gu)?.length ?? 0) || 1;
     setRows(initialRows <= rows2 ? rows2 : initialRows);
   }, [initialRows]);
   const nonControlled = value === void 0;
-  const handleChange = (0, import_react14.useCallback)((e) => {
+  const handleChange = (0, import_react15.useCallback)((e) => {
     const value2 = e.target.value;
     const count2 = getCount(value2);
     if (maxLength !== void 0 && count2 > maxLength) {
@@ -498,30 +672,30 @@ var TextArea = (0, import_react14.forwardRef)(function TextAreaInner({
     }
     onChange?.(value2);
   }, [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setCount(getCount(value ?? ""));
   }, [getCount, value]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (autoHeight && textareaRef.current !== null) {
       syncHeight(textareaRef.current);
     }
   }, [autoHeight, syncHeight]);
-  const containerRef = (0, import_react14.useRef)(null);
+  const containerRef = (0, import_react15.useRef)(null);
   useFocusWithClick(containerRef, textareaRef);
   const textAreaId = (0, import_utils3.useId)(props.id);
   const describedbyId = (0, import_utils3.useId)();
   const labelledbyId = (0, import_utils3.useId)();
   const classNames = useClassNames("charcoal-text-area-root", className);
   const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "charcoal-text-area-container", "aria-disabled": disabled === true ? "true" : void 0, "aria-invalid": invalid === true, ref: containerRef, style: {
       "--charcoal-text-area-rows": `${showCount ? rows + 1 : rows}`
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef23, textareaRef), rows, value, disabled, ...props }),
-      showCount && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef23, textareaRef), rows, value, disabled, ...props }),
+      showCount && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
+    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
@@ -529,7 +703,7 @@ var TextArea_default = TextArea;
 // src/components/Icon/index.tsx
 var React8 = __toESM(require("react"));
 var import_icons = require("@charcoal-ui/icons");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Icon = React8.forwardRef(function IconInner({
   name,
   scale,
@@ -537,19 +711,19 @@ var Icon = React8.forwardRef(function IconInner({
   className,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
 });
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var React12 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
 var import_react_spring = require("react-spring");
 var import_utils4 = require("@react-aria/utils");
 
 // src/components/Modal/Dialog/index.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_dialog = require("@react-aria/dialog");
 
 // src/_lib/useForwardedRef.tsx
@@ -569,8 +743,8 @@ function useForwardedRef(ref) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Dialog = (0, import_react15.forwardRef)(function Dialog2({
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Dialog = (0, import_react16.forwardRef)(function Dialog2({
   size,
   bottomSheet,
   className,
@@ -583,7 +757,7 @@ var Dialog = (0, import_react15.forwardRef)(function Dialog2({
     role: "dialog"
   }, ref);
   const classNames = useClassNames("charcoal-modal-dialog", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, role: dialogProps.role, "data-bottom-sheet": bottomSheet, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, "data-size": size, ref, ...props });
 });
 
 // src/components/Modal/ModalBackgroundContext.tsx
@@ -595,9 +769,9 @@ var React11 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 function usePreventScroll(element, isOpen) {
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -652,9 +826,9 @@ function useWindowWidth() {
 }
 
 // src/components/Modal/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react17.forwardRef)(function ModalInner({
+var Modal = (0, import_react18.forwardRef)(function ModalInner({
   children,
   zIndex = DEFAULT_Z_INDEX,
   portalContainer,
@@ -719,15 +893,15 @@ var Modal = (0, import_react17.forwardRef)(function ModalInner({
     backgroundColor,
     overflow,
     transform
-  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_spring.animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
+  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_spring.animated.div, { className: "charcoal-modal-background", ref: bgRef, ...underlayProps, style: transitionEnabled ? {
     backgroundColor,
     overflow,
     zIndex
   } : {
     zIndex
-  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
+  }, "data-bottom-sheet": bottomSheet, onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
     transform
-  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ModalContext.Provider, { value: {
+  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ModalContext.Provider, { value: {
     titleProps: {},
     title,
     close: onClose,
@@ -735,11 +909,11 @@ var Modal = (0, import_react17.forwardRef)(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var AnimatedDialog = (0, import_react_spring.animated)(Dialog);
-var Modal_default = (0, import_react17.memo)(Modal);
+var Modal_default = (0, import_react18.memo)(Modal);
 var ModalContext = React12.createContext({
   titleProps: {},
   title: "",
@@ -748,41 +922,41 @@ var ModalContext = React12.createContext({
   bottomSheet: false
 });
 function ModalCloseButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
 }
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_react18 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react18.useContext)(ModalContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
+  const modalCtx = (0, import_react19.useContext)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "charcoal-modal-header-title", children: modalCtx.title }) });
 }
 var ModalAlign = createDivComponent("charcoal-modal-align");
 var ModalBody = createDivComponent("charcoal-modal-body");
 var ModalButtons = createDivComponent("charcoal-modal-buttons");
 
 // src/components/LoadingSpinner/index.tsx
-var import_react19 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react19.forwardRef)(function LoadingSpinnerInner({
+var import_react20 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var LoadingSpinner = (0, import_react20.forwardRef)(function LoadingSpinnerInner({
   size = 48,
   padding = 16,
   transparent = false,
   ...props
 }, ref) {
   const classNames = useClassNames("charcoal-loading-spinner", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "progressbar", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "progressbar", style: {
     "--charcoal-loading-spinner-size": `${size}px`,
     "--charcoal-loading-spinner-padding": `${padding}px`
-  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LoadingSpinnerIcon, {}) });
+  }, "data-transparent": transparent, className: classNames, ref, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LoadingSpinnerIcon, {}) });
 });
-var LoadingSpinner_default = (0, import_react19.memo)(LoadingSpinner);
-var LoadingSpinnerIcon = (0, import_react19.forwardRef)(function LoadingSpinnerIcon2({
+var LoadingSpinner_default = (0, import_react20.memo)(LoadingSpinner);
+var LoadingSpinnerIcon = (0, import_react20.forwardRef)(function LoadingSpinnerIcon2({
   once = false
 }, ref) {
-  const iconRef = (0, import_react19.useRef)(null);
-  (0, import_react19.useImperativeHandle)(ref, () => ({
+  const iconRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useImperativeHandle)(ref, () => ({
     restart: () => {
       if (!iconRef.current) {
         return;
@@ -792,22 +966,22 @@ var LoadingSpinnerIcon = (0, import_react19.forwardRef)(function LoadingSpinnerI
       delete iconRef.current.dataset.resetAnimation;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
 });
 
 // src/components/DropdownSelector/index.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_overlays4 = require("@react-aria/overlays");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = (0, import_react20.useRef)(null);
+  const defaultPopoverRef = (0, import_react21.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const {
     popoverProps,
@@ -819,43 +993,44 @@ function Popover(props) {
   }, {
     close: props.onClose,
     isOpen: props.isOpen,
+    // never used
     open: _empty,
     setOpen: _empty,
     toggle: _empty
   });
-  const modalBackground = (0, import_react20.useContext)(ModalBackgroundContext);
+  const modalBackground = (0, import_react21.useContext)(ModalBackgroundContext);
   usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...underlayProps, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...underlayProps, style: {
       position: "fixed",
       zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
       inset: 0
     } }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
       props.children,
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
     ] })
   ] });
 }
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function DropdownPopover({
   children,
   ...props
 }) {
-  const ref = (0, import_react21.useRef)(null);
-  (0, import_react21.useEffect)(() => {
+  const ref = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (props.isOpen) {
       if (props.value !== void 0 && props.value !== "") {
         const windowScrollY = window.scrollY;
@@ -871,7 +1046,7 @@ function DropdownPopover({
       }
     }
   }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
@@ -899,11 +1074,11 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react22 = require("react");
-var MenuListContext = (0, import_react22.createContext)({
+var import_react23 = require("react");
+var MenuListContext = (0, import_react23.createContext)({
   root: void 0,
   value: "",
   propsArray: [],
@@ -935,11 +1110,11 @@ function getValuesRecursive(children) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function MenuList(props) {
-  const root = (0, import_react23.useRef)(null);
-  const propsArray = (0, import_react23.useMemo)(() => getValuesRecursive(props.children), [props.children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MenuListContext.Provider, { value: {
+  const root = (0, import_react24.useRef)(null);
+  const propsArray = (0, import_react24.useMemo)(() => getValuesRecursive(props.children), [props.children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
     propsArray,
@@ -952,66 +1127,66 @@ function MenuList(props) {
 // src/components/DropdownSelector/index.tsx
 var import_visually_hidden3 = require("@react-aria/visually-hidden");
 var import_utils5 = require("@react-aria/utils");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function DropdownSelector({
   onChange,
   showLabel = false,
   ...props
 }) {
-  const triggerRef = (0, import_react24.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
+  const triggerRef = (0, import_react25.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = (0, import_react24.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const isPlaceholder = (0, import_react25.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
   const propsArray = getValuesRecursive(props.children);
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden3.useVisuallyHidden)();
-  const handleChange = (0, import_react24.useCallback)((e) => {
+  const handleChange = (0, import_react25.useCallback)((e) => {
     onChange(e.target.value);
   }, [onChange]);
   const labelId = (0, import_utils5.useId)();
   const describedbyId = (0, import_utils5.useId)();
   const classNames = useClassNames("charcoal-dropdown-selector-root", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: classNames, "aria-disabled": props.disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: classNames, "aria-disabled": props.disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: "charcoal-dropdown-selector-button", "aria-labelledby": labelId, "aria-invalid": props.invalid, "aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0, disabled: props.disabled, onClick: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { className: "charcoal-dropdown-selector-button", "aria-labelledby": labelId, "aria-invalid": props.invalid, "aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0, disabled: props.disabled, onClick: () => {
       if (props.disabled === true)
         return;
       setIsOpen(true);
     }, ref: triggerRef, type: "button", "data-active": isOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MenuList, { value: props.value, onChange: (v) => {
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuList, { value: props.value, onChange: (v) => {
       onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
-    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
+    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
   ] });
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/DropdownSelector/ListItem/index.tsx
-var import_react25 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var ListItem = (0, import_react25.forwardRef)(function ListItem2({
+var import_react26 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ListItem = (0, import_react26.forwardRef)(function ListItem2({
   as,
   className,
   ...props
 }, ref) {
-  const Component = (0, import_react25.useMemo)(() => as ?? "li", [as]);
+  const Component = (0, import_react26.useMemo)(() => as ?? "li", [as]);
   const classNames = useClassNames("charcoal-list-item", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Component, { className: classNames, ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Component, { className: classNames, ref, ...props });
 });
 var ListItem_default = ListItem;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1048,12 +1223,12 @@ function useMenuItemHandleKeyDown(value) {
     setValue,
     root,
     propsArray
-  } = (0, import_react26.useContext)(MenuListContext);
-  const setContextValue = (0, import_react26.useCallback)(() => {
+  } = (0, import_react27.useContext)(MenuListContext);
+  const setContextValue = (0, import_react27.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react26.useCallback)((e) => {
+  const handleKeyDown = (0, import_react27.useCallback)((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1066,7 +1241,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") {
@@ -1088,72 +1269,72 @@ function useMenuItemHandleKeyDown(value) {
 }
 
 // src/components/DropdownSelector/MenuItem/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var MenuItem = (0, import_react27.forwardRef)(function MenuItem2({
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var MenuItem = (0, import_react28.forwardRef)(function MenuItem2({
   className,
   value,
   disabled,
   ...props
 }, ref) {
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ListItem_default, { ...props, ref, "data-key": value, onKeyDown: handleKeyDown, onClick: disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": disabled, role: "option", children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ListItem_default, { ...props, ref, "data-key": value, onKeyDown: handleKeyDown, onClick: disabled === true ? void 0 : setContextValue, tabIndex: -1, "aria-disabled": disabled, role: "option", children: props.children });
 });
 var MenuItem_default = MenuItem;
 
 // src/components/DropdownSelector/DropdownMenuItem/index.tsx
-var import_react28 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
   const {
     value: ctxValue
-  } = (0, import_react28.useContext)(MenuListContext);
+  } = (0, import_react29.useContext)(MenuListContext);
   const isSelected = props.value === ctxValue;
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
   ] });
 }
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function MenuItemGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: props.text }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { role: "group", children: props.children })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: props.text }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { role: "group", children: props.children })
   ] });
 }
 
 // src/components/SegmentedControl/index.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_radio = require("@react-stately/radio");
 var import_radio2 = require("@react-aria/radio");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react29 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var RadioContext = (0, import_react29.createContext)(null);
+var import_react30 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var RadioContext = (0, import_react30.createContext)(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadioContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react29.useContext)(RadioContext);
+  const state = (0, import_react30.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react30.forwardRef)(function SegmentedControlInner(props, ref) {
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var SegmentedControl = (0, import_react31.forwardRef)(function SegmentedControlInner(props, ref) {
   const className = useClassNames("charcoal-segmented-control", props.className);
-  const ariaRadioGroupProps = (0, import_react30.useMemo)(() => ({
+  const ariaRadioGroupProps = (0, import_react31.useMemo)(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1164,19 +1345,19 @@ var SegmentedControl = (0, import_react30.forwardRef)(function SegmentedControlI
   const {
     radioGroupProps
   } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react30.useMemo)(() => {
+  const segmentedControlItems = (0, import_react31.useMemo)(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
     } : d);
   }, [props.data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
 });
-var SegmentedControl_default = (0, import_react30.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react31.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react30.useRef)(null);
-  const ariaRadioProps = (0, import_react30.useMemo)(() => ({
+  const ref = (0, import_react31.useRef)(null);
+  const ariaRadioProps = (0, import_react31.useMemo)(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1186,20 +1367,20 @@ var Segmented = (props) => {
     isDisabled,
     isSelected
   } = (0, import_radio2.useRadio)(ariaRadioProps, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
     props.children
   ] });
 };
 
 // src/components/Checkbox/index.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_utils6 = require("@react-aria/utils");
 
 // src/components/Checkbox/CheckboxInput/index.tsx
-var import_react31 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var CheckboxInput = (0, import_react31.forwardRef)(function CheckboxInput2({
+var import_react32 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var CheckboxInput = (0, import_react32.forwardRef)(function CheckboxInput2({
   onChange,
   checked,
   invalid,
@@ -1207,19 +1388,19 @@ var CheckboxInput = (0, import_react31.forwardRef)(function CheckboxInput2({
   rounded,
   ...props
 }, ref) {
-  const handleChange = (0, import_react31.useCallback)((e) => {
+  const handleChange = (0, import_react32.useCallback)((e) => {
     const el = e.currentTarget;
     onChange?.(el.checked);
   }, [onChange]);
   const classNames = useClassNames("charcoal-checkbox-input", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
 });
-var CheckboxInput_default = (0, import_react31.memo)(CheckboxInput);
+var CheckboxInput_default = (0, import_react32.memo)(CheckboxInput);
 
 // src/components/Checkbox/CheckboxWithLabel.tsx
-var import_react32 = __toESM(require("react"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var CheckboxWithLabel = import_react32.default.memo(function CheckboxWithLabel2({
+var import_react33 = __toESM(require("react"));
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var CheckboxWithLabel = import_react33.default.memo(function CheckboxWithLabel2({
   className,
   children,
   input,
@@ -1227,15 +1408,15 @@ var CheckboxWithLabel = import_react32.default.memo(function CheckboxWithLabel2(
   disabled
 }) {
   const classNames = useClassNames("charcoal-checkbox__label", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
     input,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "charcoal-checkbox__label_div", children })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "charcoal-checkbox__label_div", children })
   ] });
 });
 
 // src/components/Checkbox/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var Checkbox = (0, import_react33.forwardRef)(function Checkbox2({
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Checkbox = (0, import_react34.forwardRef)(function Checkbox2({
   disabled,
   className,
   id,
@@ -1244,19 +1425,19 @@ var Checkbox = (0, import_react33.forwardRef)(function Checkbox2({
 }, ref) {
   const htmlId = (0, import_utils6.useId)(id);
   const noChildren = children === void 0;
-  const input = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
+  const input = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
   if (noChildren) {
     return input;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
 });
-var Checkbox_default = (0, import_react33.memo)(Checkbox);
+var Checkbox_default = (0, import_react34.memo)(Checkbox);
 
 // src/components/TagItem/index.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_utils7 = require("@react-aria/utils");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var TagItem = (0, import_react34.forwardRef)(function TagItemInner({
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var TagItem = (0, import_react35.forwardRef)(function TagItemInner({
   component,
   label,
   translatedLabel,
@@ -1271,18 +1452,18 @@ var TagItem = (0, import_react34.forwardRef)(function TagItemInner({
   const className = useClassNames("charcoal-tag-item", "charcoal-tag-item__bg", props.className);
   const bgVariant = bgImage !== void 0 && bgImage.length > 0 ? "image" : "color";
   const bg = bgVariant === "color" ? bgColor : `url(${bgImage ?? ""})`;
-  const Component = (0, import_react34.useMemo)(() => component ?? "button", [component]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
+  const Component = (0, import_react35.useMemo)(() => component ?? "button", [component]);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Component, { ...props, ref, className, "data-state": status, "data-bg-variant": bgVariant, "data-size": hasTranslatedLabel ? "M" : size, style: {
     "--charcoal-tag-item-bg": bg
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
-      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
+      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
     ] }),
-    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon_default, { name: "16/Remove" })
+    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon_default, { name: "16/Remove" })
   ] });
 });
-var TagItem_default = (0, import_react34.memo)(TagItem);
+var TagItem_default = (0, import_react35.memo)(TagItem);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
@@ -1307,9 +1488,19 @@ var TagItem_default = (0, import_react34.memo)(TagItem);
   RadioGroup,
   SSRProvider,
   SegmentedControl,
+  SetThemeScript,
   Switch,
   TagItem,
   TextArea,
-  TextField
+  TextField,
+  getThemeSync,
+  makeSetThemeScriptCode,
+  prefersColorScheme,
+  themeSelector,
+  themeSetter,
+  useLocalStorage,
+  useMedia,
+  useTheme,
+  useThemeSetter
 });
 //# sourceMappingURL=index.cjs.js.map