@charcoal-ui/react 5.0.0-beta.1 → 5.0.0-beta.3

package/dist/index.cjs.js

@@ -1,1624 +0,0 @@
-"use client";
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  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
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Button: () => Button_default,
-  CharcoalProvider: () => CharcoalProvider,
-  Checkbox: () => Checkbox_default,
-  Clickable: () => Clickable_default,
-  DropdownMenuItem: () => DropdownMenuItem,
-  DropdownSelector: () => DropdownSelector,
-  HintText: () => HintText,
-  Icon: () => Icon_default,
-  IconButton: () => IconButton_default,
-  LoadingSpinner: () => LoadingSpinner_default,
-  LoadingSpinnerIcon: () => LoadingSpinnerIcon,
-  MenuItemGroup: () => MenuItemGroup,
-  Modal: () => Modal_default,
-  ModalAlign: () => ModalAlign,
-  ModalBody: () => ModalBody,
-  ModalButtons: () => ModalButtons,
-  ModalCloseButton: () => ModalCloseButton,
-  ModalHeader: () => ModalHeader,
-  MultiSelect: () => MultiSelect_default,
-  MultiSelectGroup: () => MultiSelectGroup,
-  OverlayProvider: () => import_overlays.OverlayProvider,
-  Radio: () => Radio_default,
-  RadioGroup: () => RadioGroup,
-  SSRProvider: () => SSRProvider,
-  SegmentedControl: () => SegmentedControl_default,
-  SetThemeScript: () => SetThemeScript,
-  Switch: () => Switch_default,
-  TagItem: () => TagItem_default,
-  TextArea: () => TextArea_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);
-
-// src/core/SSRProvider.tsx
-var import_ssr = require("@react-aria/ssr");
-var import_react = require("react");
-function isReactVersionOver(minVersion) {
-  const reactMajorVersion = parseInt(import_react.version.split(".")[0], 10);
-  return Number.isFinite(reactMajorVersion) ? reactMajorVersion >= minVersion : false;
-}
-var SSRProvider = isReactVersionOver(18) ? import_react.Fragment : import_ssr.SSRProvider;
-
-// src/core/OverlayProvider.tsx
-var import_overlays = require("@react-aria/overlays");
-
-// src/core/CharcoalProvider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function CharcoalProvider({
-  children
-}) {
-  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_react4 = require("react");
-
-// src/_lib/useClassNames.ts
-var import_react3 = require("react");
-function useClassNames(...classNames) {
-  return (0, import_react3.useMemo)(() => classNames.filter((v) => v).join(" "), [classNames]);
-}
-
-// src/components/Button/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Button = (0, import_react4.forwardRef)(function Button2({
-  variant,
-  fullWidth,
-  size,
-  className,
-  component,
-  isActive,
-  ...props
-}, ref) {
-  const Component = (0, import_react4.useMemo)(() => component ?? "button", [component]);
-  const classNames = useClassNames("charcoal-button", className);
-  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_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_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_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var IconButton = (0, import_react6.forwardRef)(function IconButtonInner({
-  variant = "Default",
-  size = "M",
-  icon,
-  isActive = false,
-  component,
-  ...rest
-}, ref) {
-  validateIconSize(size, icon);
-  const Component = (0, import_react6.useMemo)(() => component ?? "button", [component]);
-  const classNames = useClassNames("charcoal-icon-button", rest.className);
-  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) {
-  let requiredIconSize;
-  switch (size) {
-    case "XS":
-      requiredIconSize = "16";
-      break;
-    case "S":
-    case "M":
-      requiredIconSize = "24";
-      break;
-  }
-  const result = /^\d*/u.exec(icon);
-  if (result == null) {
-    throw new Error("Invalid icon name");
-  }
-  const [iconSize] = result;
-  if (iconSize !== requiredIconSize) {
-    console.warn(`IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`);
-  }
-}
-
-// src/components/Radio/index.tsx
-var import_react8 = require("react");
-var import_warning = __toESM(require("warning"));
-
-// src/components/Radio/RadioGroupContext.ts
-var React4 = __toESM(require("react"));
-var RadioGroupContext = React4.createContext({
-  name: void 0,
-  selected: void 0,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  onChange() {
-    throw new Error("Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?");
-  }
-});
-
-// src/components/Radio/RadioInput/index.tsx
-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_react7.useCallback)((e) => {
-    const el = e.currentTarget;
-    onChange?.(el.value);
-  }, [onChange]);
-  const classNames = useClassNames("charcoal-radio-input", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { className: classNames, ref, type: "radio", onChange: handleChange, "aria-invalid": invalid, ...props });
-});
-var RadioInput_default = (0, import_react7.memo)(RadioInput);
-
-// src/components/Radio/index.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Radio = (0, import_react8.forwardRef)(function RadioInner({
-  value,
-  disabled = false,
-  children,
-  ...props
-}, ref) {
-  const {
-    name,
-    selected,
-    disabled: isParentDisabled,
-    readonly,
-    invalid,
-    onChange
-  } = (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_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_react8.memo)(Radio);
-
-// src/components/Radio/RadioGroup/index.tsx
-var import_react9 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var RadioGroup = (0, import_react9.forwardRef)(function RadioGroupInner({
-  value,
-  label,
-  name,
-  onChange,
-  disabled,
-  readonly,
-  invalid,
-  children,
-  "aria-orientation": ariaOrientation = "vertical",
-  ...props
-}, ref) {
-  const classNames = useClassNames("charcoal-radio-group", props.className);
-  const handleChange = (0, import_react9.useCallback)((next) => {
-    onChange(next);
-  }, [onChange]);
-  const contextValue = (0, import_react9.useMemo)(() => ({
-    name,
-    selected: value,
-    disabled: disabled ?? false,
-    readonly: readonly ?? false,
-    invalid: invalid ?? false,
-    onChange: handleChange
-  }), [disabled, handleChange, invalid, name, readonly, value]);
-  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/MultiSelect/index.tsx
-var import_react11 = require("react");
-var import_warning2 = __toESM(require("warning"));
-
-// src/components/MultiSelect/context.ts
-var import_react10 = require("react");
-var MultiSelectGroupContext = (0, import_react10.createContext)({
-  name: void 0,
-  selected: [],
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  onChange() {
-    throw new Error("Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?");
-  }
-});
-
-// src/components/Icon/index.tsx
-var React5 = __toESM(require("react"));
-var import_icons = require("@charcoal-ui/icons");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Icon = React5.forwardRef(function IconInner({
-  name,
-  scale,
-  unsafeNonGuidelineScale,
-  className,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
-});
-var Icon_default = Icon;
-
-// src/components/MultiSelect/index.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react11.forwardRef)(function MultiSelectInner({
-  value,
-  disabled = false,
-  onChange,
-  variant = "default",
-  className,
-  children
-}, ref) {
-  const {
-    name,
-    selected,
-    disabled: parentDisabled,
-    readonly,
-    invalid,
-    onChange: parentOnChange
-  } = (0, import_react11.useContext)(MultiSelectGroupContext);
-  (0, import_warning2.default)(
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    name !== void 0,
-    `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
-  );
-  const isSelected = selected.includes(value);
-  const isDisabled = disabled || parentDisabled || readonly;
-  const handleChange = (0, import_react11.useCallback)((event) => {
-    if (!(event.currentTarget instanceof HTMLInputElement)) {
-      return;
-    }
-    if (onChange)
-      onChange({
-        value,
-        selected: event.currentTarget.checked
-      });
-    parentOnChange({
-      value,
-      selected: event.currentTarget.checked
-    });
-  }, [onChange, parentOnChange, value]);
-  const classNames = useClassNames("charcoal-multi-select", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { "aria-disabled": isDisabled, className: classNames, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { className: "charcoal-multi-select-input", name, value, type: "checkbox", checked: isSelected, disabled: isDisabled, onChange: handleChange, "data-overlay": variant === "overlay", "aria-invalid": invalid, ref }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-multi-select-overlay", "data-overlay": variant === "overlay", "aria-invalid": invalid, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon_default, { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
-    Boolean(children) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "charcoal-multi-select-label", children })
-  ] });
-});
-var MultiSelect_default = (0, import_react11.memo)(MultiSelect);
-function MultiSelectGroup({
-  className,
-  style,
-  name,
-  label,
-  selected,
-  onChange,
-  disabled = false,
-  readonly = false,
-  invalid = false,
-  children
-}) {
-  const handleChange = (0, import_react11.useCallback)((payload) => {
-    const index = selected.indexOf(payload.value);
-    if (payload.selected) {
-      if (index < 0) {
-        onChange([...selected, payload.value]);
-      }
-    } else {
-      if (index >= 0) {
-        onChange([...selected.slice(0, index), ...selected.slice(index + 1)]);
-      }
-    }
-  }, [onChange, selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MultiSelectGroupContext.Provider, { value: {
-    name,
-    selected: Array.from(new Set(selected)),
-    disabled,
-    readonly,
-    invalid,
-    onChange: handleChange
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, style, "aria-label": label, "data-testid": "SelectGroup", children }) });
-}
-
-// src/components/Switch/index.tsx
-var import_react13 = require("react");
-var import_utils = require("@react-aria/utils");
-
-// src/components/Switch/SwitchInput/index.tsx
-var import_react12 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var SwitchInput = (0, import_react12.forwardRef)(function SwitchInput2({
-  onChange,
-  className,
-  ...props
-}, ref) {
-  const handleChange = (0, import_react12.useCallback)((e) => {
-    const el = e.currentTarget;
-    onChange?.(el.checked);
-  }, [onChange]);
-  const classNames = useClassNames("charcoal-switch-input", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { ref, className: classNames, type: "checkbox", onChange: handleChange, ...props });
-});
-var SwitchInput_default = SwitchInput;
-
-// src/components/Switch/SwitchWithLabel.tsx
-var React6 = __toESM(require("react"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var SwitchWithLabel = React6.memo(function SwitchWithLabel2({
-  children,
-  className,
-  disabled,
-  id,
-  input
-}) {
-  const classNames = useClassNames("charcoal-switch__label", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { htmlFor: id, className: classNames, "aria-disabled": disabled, children: [
-    input,
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "charcoal-switch__label_div", children })
-  ] });
-});
-
-// src/components/Switch/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Switch = (0, import_react13.forwardRef)(function Switch2({
-  children,
-  onChange,
-  disabled,
-  className,
-  id,
-  ...props
-}, ref) {
-  const htmlId = (0, import_utils.useId)(id);
-  const noChildren = children === void 0;
-  const input = /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(SwitchWithLabel, { className, disabled, id: htmlId, input, children });
-});
-var Switch_default = (0, import_react13.memo)(Switch);
-
-// src/components/TextField/index.tsx
-var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react16 = require("react");
-var React8 = __toESM(require("react"));
-
-// src/components/FieldLabel/index.tsx
-var React7 = __toESM(require("react"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var FieldLabel = React7.forwardRef(function FieldLabel2({
-  style,
-  className,
-  label,
-  required = false,
-  requiredText,
-  subLabel,
-  ...labelProps
-}, ref) {
-  const classNames = useClassNames("charcoal-field-label-root", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style, className: classNames, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { ref, className: "charcoal-field-label", ...labelProps, children: label }),
-    required && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "charcoal-field-label-required-text", children: requiredText }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "charcoal-field-label-sub-label", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: subLabel }) })
-  ] });
-});
-var FieldLabel_default = FieldLabel;
-
-// src/_lib/index.ts
-function mergeRefs(...refs) {
-  return (value) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref !== null) {
-        ;
-        ref.current = value;
-      }
-    }
-  };
-}
-function countCodePointsInString(string) {
-  return Array.from(string).length;
-}
-
-// src/components/TextField/useFocusWithClick.tsx
-var import_react14 = require("react");
-function useFocusWithClick(containerRef, inputRef) {
-  (0, import_react14.useEffect)(() => {
-    const el = containerRef.current;
-    if (el) {
-      const handleDown = (e) => {
-        if (e.target !== inputRef.current) {
-          inputRef.current?.focus();
-        }
-      };
-      el.addEventListener("click", handleDown);
-      return () => {
-        el.removeEventListener("click", handleDown);
-      };
-    }
-  });
-}
-
-// src/components/TextField/index.tsx
-var import_utils2 = require("@react-aria/utils");
-
-// src/_lib/createDivComponent.tsx
-var import_react15 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function createDivComponent(mainClassName) {
-  return (0, import_react15.forwardRef)(function DivComponent({
-    className,
-    ...props
-  }, ref) {
-    const classNames = useClassNames(mainClassName, className);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classNames, ref, ...props });
-  });
-}
-
-// src/components/TextField/AssistiveText/index.tsx
-var AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
-
-// src/components/TextField/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var TextField = React8.forwardRef(function SingleLineTextFieldInner({
-  assistiveText,
-  className,
-  disabled = false,
-  label = "",
-  maxLength,
-  onChange,
-  prefix = null,
-  required,
-  requiredText,
-  showCount = false,
-  showLabel = false,
-  subLabel,
-  suffix = null,
-  type = "text",
-  invalid,
-  value,
-  getCount = countCodePointsInString,
-  ...props
-}, forwardRef24) {
-  const inputRef = (0, import_react16.useRef)(null);
-  const {
-    visuallyHiddenProps
-  } = (0, import_visually_hidden.useVisuallyHidden)();
-  const [count, setCount] = (0, import_react16.useState)(getCount(value ?? ""));
-  const handleChange = (0, import_react16.useCallback)((e) => {
-    const value2 = e.target.value;
-    const count2 = getCount(value2);
-    if (maxLength !== void 0 && count2 > maxLength) {
-      return;
-    }
-    setCount(count2);
-    onChange?.(value2);
-  }, [getCount, maxLength, onChange]);
-  (0, import_react16.useEffect)(() => {
-    setCount(getCount(value ?? ""));
-  }, [getCount, value]);
-  const containerRef = (0, import_react16.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_runtime16.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FieldLabel_default, { htmlFor: inputId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)("div", { className: "charcoal-text-field-prefix", children: prefix }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { className: "charcoal-text-field-input", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: inputId, "data-invalid": invalid === true, maxLength, onChange: handleChange, disabled, ref: (0, import_utils2.mergeRefs)(forwardRef24, inputRef), type, value, ...props }),
-      (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "charcoal-text-field-suffix", children: [
-        suffix,
-        showCount && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "charcoal-text-field-line-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
-      ] })
-    ] }),
-    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime16.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_react17 = require("react");
-var import_utils3 = require("@react-aria/utils");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var TextArea = (0, import_react17.forwardRef)(function TextAreaInner({
-  onChange,
-  className,
-  value,
-  showCount = false,
-  showLabel = false,
-  label = "",
-  requiredText,
-  subLabel,
-  disabled = false,
-  required,
-  assistiveText,
-  maxLength,
-  autoHeight = false,
-  rows: initialRows = 4,
-  invalid,
-  getCount = countCodePointsInString,
-  ...props
-}, forwardRef24) {
-  const {
-    visuallyHiddenProps
-  } = (0, import_visually_hidden2.useVisuallyHidden)();
-  const textareaRef = (0, import_react17.useRef)(null);
-  const [count, setCount] = (0, import_react17.useState)(getCount(value ?? ""));
-  const [rows, setRows] = (0, import_react17.useState)(initialRows);
-  const syncHeight = (0, import_react17.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_react17.useCallback)((e) => {
-    const value2 = e.target.value;
-    const count2 = getCount(value2);
-    if (maxLength !== void 0 && count2 > maxLength) {
-      return;
-    }
-    if (nonControlled) {
-      setCount(count2);
-    }
-    if (autoHeight && textareaRef.current !== null) {
-      syncHeight(textareaRef.current);
-    }
-    onChange?.(value2);
-  }, [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]);
-  (0, import_react17.useEffect)(() => {
-    setCount(getCount(value ?? ""));
-  }, [getCount, value]);
-  (0, import_react17.useEffect)(() => {
-    if (autoHeight && textareaRef.current !== null) {
-      syncHeight(textareaRef.current);
-    }
-  }, [autoHeight, syncHeight]);
-  const containerRef = (0, import_react17.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_runtime17.jsxs)("div", { className: classNames, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FieldLabel_default, { htmlFor: textAreaId, id: labelledbyId, label, required, requiredText, subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsx)("textarea", { className: "charcoal-text-area-textarea", "aria-describedby": showAssistiveText ? describedbyId : void 0, "aria-invalid": invalid, "aria-labelledby": labelledbyId, id: textAreaId, maxLength, "data-no-bottom-padding": showCount, onChange: handleChange, ref: mergeRefs(forwardRef24, textareaRef), rows, value, disabled, ...props }),
-      showCount && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "charcoal-text-area-counter", children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
-    ] }),
-    showAssistiveText && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AssistiveText, { "data-invalid": invalid === true, id: describedbyId, children: assistiveText })
-  ] });
-});
-var TextArea_default = TextArea;
-
-// src/components/Modal/index.tsx
-var import_react20 = 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_react18 = require("react");
-var import_dialog = require("@react-aria/dialog");
-
-// src/_lib/useForwardedRef.tsx
-var React9 = __toESM(require("react"));
-function useForwardedRef(ref) {
-  const innerRef = React9.useRef(null);
-  React9.useEffect(() => {
-    if (!ref)
-      return;
-    if (typeof ref === "function") {
-      ref(innerRef.current);
-    } else {
-      ref.current = innerRef.current;
-    }
-  });
-  return innerRef;
-}
-
-// src/components/Modal/Dialog/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Dialog = (0, import_react18.forwardRef)(function Dialog2({
-  size,
-  bottomSheet,
-  className,
-  ...props
-}, forwardRef24) {
-  const ref = useForwardedRef(forwardRef24);
-  const {
-    dialogProps
-  } = (0, import_dialog.useDialog)({
-    role: "dialog"
-  }, ref);
-  const classNames = useClassNames("charcoal-modal-dialog", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.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
-var React10 = __toESM(require("react"));
-var ModalBackgroundContext = React10.createContext(null);
-
-// src/components/Modal/useCustomModalOverlay.tsx
-var React11 = __toESM(require("react"));
-var import_overlays2 = require("@react-aria/overlays");
-
-// src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react19 = require("react");
-function usePreventScroll(element, isOpen, useClip = false) {
-  (0, import_react19.useEffect)(() => {
-    if (isOpen && element) {
-      const defaultPaddingRight = element.style.paddingRight;
-      const defaultOverflow = element.style.overflow;
-      element.style.paddingRight = `${window.innerWidth - element.clientWidth}px`;
-      element.style.overflow = useClip ? "clip" : "hidden";
-      return () => {
-        element.style.paddingRight = defaultPaddingRight;
-        element.style.overflow = defaultOverflow;
-      };
-    }
-  }, [element, isOpen, useClip]);
-}
-
-// src/components/Modal/useCustomModalOverlay.tsx
-function useCharcoalModalOverlay(props, state, ref) {
-  const {
-    overlayProps,
-    underlayProps
-  } = (0, import_overlays2.useOverlay)({
-    ...props,
-    isOpen: state.isOpen,
-    onClose: state.onClose,
-    shouldCloseOnInteractOutside: () => false
-  }, ref);
-  usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen, props.overflowClip);
-  (0, import_overlays2.useOverlayFocusContain)();
-  React11.useEffect(() => {
-    if (state.isOpen && ref.current) {
-      return (0, import_overlays2.ariaHideOutside)([ref.current]);
-    }
-  }, [state.isOpen, ref]);
-  return {
-    modalProps: overlayProps,
-    underlayProps
-  };
-}
-function isWindowDefined() {
-  return typeof window !== "undefined";
-}
-function useWindowWidth() {
-  const [width, setWidth] = React11.useState(isWindowDefined() ? window.innerWidth : null);
-  React11.useEffect(() => {
-    const handleResize = () => {
-      setWidth(window.innerWidth);
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  });
-  return width;
-}
-
-// src/components/Modal/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react20.forwardRef)(function ModalInner({
-  children,
-  zIndex = DEFAULT_Z_INDEX,
-  portalContainer,
-  ...props
-}, external) {
-  const {
-    title,
-    size = "M",
-    bottomSheet = false,
-    isDismissable,
-    onClose,
-    className,
-    isOpen = false,
-    closeButtonAriaLabel = "Close"
-  } = props;
-  const ref = (0, import_utils4.useObjectRef)(external);
-  const {
-    modalProps,
-    underlayProps
-  } = useCharcoalModalOverlay({
-    ...props,
-    isKeyboardDismissDisabled: isDismissable === void 0 || isDismissable === false
-  }, {
-    onClose,
-    isOpen
-  }, ref);
-  const isMobile = (useWindowWidth() ?? Infinity) < 744;
-  const transitionEnabled = isMobile && bottomSheet !== false;
-  const showDismiss = !isMobile || bottomSheet !== true;
-  const transition = (0, import_react_spring.useTransition)(isOpen, {
-    from: {
-      transform: "translateY(100%)",
-      backgroundColor: "rgba(0, 0, 0, 0)",
-      overflow: "hidden"
-    },
-    enter: {
-      transform: "translateY(0%)",
-      backgroundColor: "rgba(0, 0, 0, 0.4)"
-    },
-    update: {
-      overflow: "auto"
-    },
-    leave: {
-      transform: "translateY(100%)",
-      backgroundColor: "rgba(0, 0, 0, 0)",
-      overflow: "hidden"
-    },
-    config: transitionEnabled ? {
-      duration: 400,
-      easing: import_react_spring.easings.easeOutQuart
-    } : {
-      duration: 0
-    }
-  });
-  const bgRef = React12.useRef(null);
-  const handleClick = React12.useCallback((e) => {
-    if (e.currentTarget === e.target) {
-      onClose();
-    }
-  }, [onClose]);
-  return transition(({
-    backgroundColor,
-    overflow,
-    transform
-  }, item) => item && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_overlays3.Overlay, { portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsx)(ModalBackgroundContext.Provider, { value: bgRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AnimatedDialog, { ref, ...modalProps, style: transitionEnabled ? {
-    transform
-  } : {}, size, bottomSheet, className, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ModalContext.Provider, { value: {
-    titleProps: {},
-    title,
-    close: onClose,
-    showDismiss,
-    bottomSheet
-  }, children: [
-    children,
-    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ModalCloseButton, { "aria-label": closeButtonAriaLabel, onClick: onClose })
-  ] }) }) }) }) }));
-});
-var AnimatedDialog = (0, import_react_spring.animated)(Dialog);
-var Modal_default = (0, import_react20.memo)(Modal);
-var ModalContext = React12.createContext({
-  titleProps: {},
-  title: "",
-  close: void 0,
-  showDismiss: true,
-  bottomSheet: false
-});
-function ModalCloseButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton_default, { className: "charcoal-modal-close-button", size: "S", icon: "24/Close", type: "button", ...props });
-}
-
-// src/components/Modal/ModalPlumbing.tsx
-var import_react21 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-function ModalHeader() {
-  const modalCtx = (0, import_react21.useContext)(ModalContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "charcoal-modal-header-root", "data-bottom-sheet": modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime20.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_react22 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react22.forwardRef)(function LoadingSpinnerInner({
-  size = 48,
-  padding = 16,
-  transparent = false,
-  ...props
-}, ref) {
-  const classNames = useClassNames("charcoal-loading-spinner", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.jsx)(LoadingSpinnerIcon, {}) });
-});
-var LoadingSpinner_default = (0, import_react22.memo)(LoadingSpinner);
-var LoadingSpinnerIcon = (0, import_react22.forwardRef)(function LoadingSpinnerIcon2({
-  once = false
-}, ref) {
-  const iconRef = (0, import_react22.useRef)(null);
-  (0, import_react22.useImperativeHandle)(ref, () => ({
-    restart: () => {
-      if (!iconRef.current) {
-        return;
-      }
-      iconRef.current.dataset.resetAnimation = "true";
-      void iconRef.current.offsetWidth;
-      delete iconRef.current.dataset.resetAnimation;
-    }
-  }));
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { role: "presentation", ref: iconRef, "data-once": once, className: "charcoal-loading-spinner-icon" });
-});
-
-// src/components/DropdownSelector/index.tsx
-var import_react27 = require("react");
-
-// src/components/DropdownSelector/DropdownPopover.tsx
-var import_react24 = require("react");
-
-// src/components/DropdownSelector/Popover/index.tsx
-var import_react23 = require("react");
-var import_overlays4 = require("@react-aria/overlays");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var _empty = () => null;
-function Popover(props) {
-  const defaultPopoverRef = (0, import_react23.useRef)(null);
-  const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
-  const {
-    popoverProps,
-    underlayProps
-  } = (0, import_overlays4.usePopover)({
-    triggerRef: props.triggerRef,
-    popoverRef: finalPopoverRef,
-    containerPadding: 16
-  }, {
-    close: props.onClose,
-    isOpen: props.isOpen,
-    // never used
-    open: _empty,
-    setOpen: _empty,
-    toggle: _empty
-  });
-  const modalBackground = (0, import_react23.useContext)(ModalBackgroundContext);
-  usePreventScroll(modalBackground, props.isOpen);
-  if (!props.isOpen)
-    return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_overlays4.Overlay, { portalContainer: document.body, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...underlayProps, style: {
-      position: "fixed",
-      zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
-      inset: 0
-    } }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ...popoverProps, ref: finalPopoverRef, className: "charcoal-popover", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
-      props.children,
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { tabIndex: 0, onFocus: props.onClose }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_overlays4.DismissButton, { onDismiss: () => props.onClose() })
-    ] })
-  ] });
-}
-
-// src/components/DropdownSelector/DropdownPopover.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function DropdownPopover({
-  children,
-  ...props
-}) {
-  const ref = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(() => {
-    if (props.isOpen && ref.current && props.triggerRef.current) {
-      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
-    }
-  }, [props.triggerRef, props.isOpen]);
-  (0, import_react24.useEffect)(() => {
-    if (props.isOpen) {
-      if (props.value !== void 0 && props.value !== "") {
-        const windowScrollY = window.scrollY;
-        const windowScrollX = window.scrollX;
-        const selectedElement = document.querySelector(`[data-key="${props.value.toString()}"]`);
-        selectedElement?.focus();
-        window.scrollTo(windowScrollX, windowScrollY);
-      } else {
-        const el = ref.current?.querySelector("[role='option']");
-        if (el instanceof HTMLElement) {
-          el.focus();
-        }
-      }
-    }
-  }, [props.value, props.isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Popover, { isOpen: props.isOpen, onClose: props.onClose, popoverRef: ref, triggerRef: props.triggerRef, children });
-}
-
-// src/components/DropdownSelector/utils/findPreviewRecursive.tsx
-var React13 = __toESM(require("react"));
-function findPreviewRecursive(children, value) {
-  const childArray = React13.Children.toArray(children);
-  for (let i = 0; i < childArray.length; i++) {
-    const child = childArray[i];
-    if (React13.isValidElement(child)) {
-      if ("value" in child.props) {
-        const childValue = child.props.value;
-        if (childValue === value && "children" in child.props) {
-          const children2 = child.props.children;
-          return children2;
-        }
-      }
-      if ("children" in child.props) {
-        const children2 = findPreviewRecursive(child.props.children, value);
-        if (children2 !== void 0) {
-          return children2;
-        }
-      }
-    }
-  }
-}
-
-// src/components/DropdownSelector/MenuList/index.tsx
-var import_react26 = require("react");
-
-// src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react25 = require("react");
-var MenuListContext = (0, import_react25.createContext)({
-  root: void 0,
-  value: "",
-  propsArray: [],
-  setValue: (_v) => {
-  }
-});
-
-// src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-var React14 = __toESM(require("react"));
-function getValuesRecursive(children) {
-  const childArray = React14.Children.toArray(children);
-  const propsArray = [];
-  for (let i = 0; i < childArray.length; i++) {
-    const child = childArray[i];
-    if (React14.isValidElement(child)) {
-      const props = child.props;
-      if ("value" in props && typeof props.value === "string") {
-        propsArray.push({
-          disabled: props.disabled,
-          value: props.value
-        });
-      }
-      if ("children" in props && props.children) {
-        propsArray.push(...getValuesRecursive(props.children));
-      }
-    }
-  }
-  return propsArray;
-}
-
-// src/components/DropdownSelector/MenuList/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function MenuList(props) {
-  const root = (0, import_react26.useRef)(null);
-  const propsArray = (0, import_react26.useMemo)(() => getValuesRecursive(props.children), [props.children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "charcoal-menu-list", ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuListContext.Provider, { value: {
-    value: props.value ?? "",
-    root,
-    propsArray,
-    setValue: (v) => {
-      props.onChange?.(v);
-    }
-  }, children: props.children }) });
-}
-
-// src/components/DropdownSelector/index.tsx
-var import_visually_hidden3 = require("@react-aria/visually-hidden");
-var import_utils5 = require("@react-aria/utils");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-function DropdownSelector({
-  onChange,
-  showLabel = false,
-  ...props
-}) {
-  const triggerRef = (0, import_react27.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
-  const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = (0, import_react27.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_react27.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_runtime25.jsxs)("div", { className: classNames, "aria-disabled": props.disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FieldLabel_default, { id: labelId, label: props.label, required: props.required, requiredText: props.requiredText, subLabel: props.subLabel, ...!showLabel ? visuallyHiddenProps : {} }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
-    }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("span", { className: "charcoal-ui-dropdown-selector-text", "data-placeholder": isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { className: "charcoal-ui-dropdown-selector-icon", name: "16/Menu" })
-    ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MenuList, { value: props.value, onChange: (v) => {
-      onChange(v);
-      setIsOpen(false);
-    }, children: props.children }) }),
-    props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AssistiveText, { "data-invalid": props.invalid === true, id: describedbyId, children: props.assistiveText })
-  ] });
-}
-
-// src/components/DropdownSelector/MenuItem/index.tsx
-var import_react30 = require("react");
-
-// src/components/DropdownSelector/ListItem/index.tsx
-var import_react28 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var ListItem = (0, import_react28.forwardRef)(function ListItem2({
-  as,
-  className,
-  ...props
-}, ref) {
-  const Component = (0, import_react28.useMemo)(() => as ?? "li", [as]);
-  const classNames = useClassNames("charcoal-list-item", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Component, { className: classNames, ref, ...props });
-});
-var ListItem_default = ListItem;
-
-// src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-var import_react29 = require("react");
-
-// src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
-function handleFocusByKeyBoard(element, parent) {
-  const isScrollable = parent.scrollHeight > parent.clientHeight;
-  if (isScrollable) {
-    const rect = element.getBoundingClientRect();
-    const parentRect = parent.getBoundingClientRect();
-    if (rect.bottom > parentRect.bottom) {
-      parent.scrollTo({
-        top: parent.scrollTop + rect.bottom - parentRect.bottom
-      });
-    } else if (rect.top < parentRect.top) {
-      parent.scrollTo({
-        top: parent.scrollTop - (parentRect.top - rect.top)
-      });
-    }
-  } else {
-    scrollIfNeeded(element);
-  }
-}
-function scrollIfNeeded(element) {
-  const elementRect = element.getBoundingClientRect();
-  const isVisible = elementRect.top >= 0 && elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
-  if (!isVisible) {
-    element.scrollIntoView({
-      block: "nearest"
-    });
-  }
-}
-
-// src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-function useMenuItemHandleKeyDown(value) {
-  const {
-    setValue,
-    root,
-    propsArray
-  } = (0, import_react29.useContext)(MenuListContext);
-  const setContextValue = (0, import_react29.useCallback)(() => {
-    if (value !== void 0)
-      setValue(value);
-  }, [value, setValue]);
-  const handleKeyDown = (0, import_react29.useCallback)((e) => {
-    if (e.key === "Enter") {
-      setContextValue();
-    } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-      const isForward = e.key === "ArrowDown";
-      e.preventDefault();
-      if (!propsArray || value === void 0)
-        return;
-      const values = propsArray.map((props) => props.value).filter((v) => v);
-      let index = values.indexOf(value);
-      if (index === -1)
-        return;
-      for (let n = 0; n < values.length; n++) {
-        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") {
-            index += isForward ? 1 : -1;
-            continue;
-          }
-          next.focus({
-            preventScroll: true
-          });
-          if (root?.current?.parentElement) {
-            handleFocusByKeyBoard(next, root.current.parentElement);
-          }
-          break;
-        }
-      }
-    }
-  }, [setContextValue, propsArray, value, root]);
-  return [handleKeyDown, setContextValue];
-}
-
-// src/components/DropdownSelector/MenuItem/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var MenuItem = (0, import_react30.forwardRef)(function MenuItem2({
-  className,
-  value,
-  disabled,
-  ...props
-}, ref) {
-  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.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_react31 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-function DropdownMenuItem(props) {
-  const {
-    value: ctxValue
-  } = (0, import_react31.useContext)(MenuListContext);
-  const isSelected = props.value === ctxValue;
-  const {
-    children,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(MenuItem_default, { ...rest, "aria-selected": isSelected, children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { className: "charcoal-dropdown-selector-menu-item-icon", name: "16/Check" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "charcoal-dropdown-selector-menu-item", "data-selected": isSelected, children: props.children })
-  ] });
-}
-
-// src/components/DropdownSelector/MenuItemGroup/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-function MenuItemGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("li", { className: "charcoal-menu-item-group", role: "presentation", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: props.text }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { role: "group", children: props.children })
-  ] });
-}
-
-// src/components/SegmentedControl/index.tsx
-var import_react33 = require("react");
-var import_radio = require("@react-stately/radio");
-var import_radio2 = require("@react-aria/radio");
-
-// src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react32 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var RadioContext = (0, import_react32.createContext)(null);
-var RadioProvider = ({
-  value,
-  children
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioContext.Provider, { value, children });
-};
-var useRadioContext = () => {
-  const state = (0, import_react32.useContext)(RadioContext);
-  if (state === null)
-    throw new Error("`<RadioProvider>` is not likely mounted.");
-  return state;
-};
-
-// src/components/SegmentedControl/index.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react33.forwardRef)(function SegmentedControlInner(props, ref) {
-  const className = useClassNames("charcoal-segmented-control", props.className);
-  const ariaRadioGroupProps = (0, import_react33.useMemo)(() => ({
-    ...props,
-    isDisabled: props.disabled,
-    isReadOnly: props.readonly,
-    isRequired: props.required,
-    "aria-label": props.name
-  }), [props]);
-  const state = (0, import_radio.useRadioGroupState)(ariaRadioGroupProps);
-  const {
-    radioGroupProps
-  } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
-  const segmentedControlItems = (0, import_react33.useMemo)(() => {
-    return props.data.map((d) => typeof d === "string" ? {
-      value: d,
-      label: d
-    } : d);
-  }, [props.data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, ...radioGroupProps, className, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadioProvider, { value: state, children: segmentedControlItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Segmented, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) }) });
-});
-var SegmentedControl_default = (0, import_react33.memo)(SegmentedControl);
-var Segmented = (props) => {
-  const state = useRadioContext();
-  const ref = (0, import_react33.useRef)(null);
-  const ariaRadioProps = (0, import_react33.useMemo)(() => ({
-    value: props.value,
-    isDisabled: props.disabled,
-    children: props.children
-  }), [props]);
-  const {
-    inputProps,
-    isDisabled,
-    isSelected
-  } = (0, import_radio2.useRadio)(ariaRadioProps, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: "charcoal-segmented-control-radio__label", "aria-disabled": isDisabled || state.isReadOnly, "data-checked": isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", { className: "charcoal-segmented-control-radio__input", ...inputProps, ref }),
-    props.children
-  ] });
-};
-
-// src/components/Checkbox/index.tsx
-var import_react36 = require("react");
-var import_utils6 = require("@react-aria/utils");
-
-// src/components/Checkbox/CheckboxInput/index.tsx
-var import_react34 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var CheckboxInput = (0, import_react34.forwardRef)(function CheckboxInput2({
-  onChange,
-  checked,
-  invalid,
-  className,
-  rounded,
-  ...props
-}, ref) {
-  const handleChange = (0, import_react34.useCallback)((e) => {
-    const el = e.currentTarget;
-    onChange?.(el.checked);
-  }, [onChange]);
-  const classNames = useClassNames("charcoal-checkbox-input", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { className: classNames, ref, type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, "data-rounded": rounded, ...props });
-});
-var CheckboxInput_default = (0, import_react34.memo)(CheckboxInput);
-
-// src/components/Checkbox/CheckboxWithLabel.tsx
-var import_react35 = __toESM(require("react"));
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var CheckboxWithLabel = import_react35.default.memo(function CheckboxWithLabel2({
-  className,
-  children,
-  input,
-  id,
-  disabled
-}) {
-  const classNames = useClassNames("charcoal-checkbox__label", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { htmlFor: id, "aria-disabled": disabled, className: classNames, children: [
-    input,
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "charcoal-checkbox__label_div", children })
-  ] });
-});
-
-// src/components/Checkbox/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var Checkbox = (0, import_react36.forwardRef)(function Checkbox2({
-  disabled,
-  className,
-  id,
-  children,
-  ...props
-}, ref) {
-  const htmlId = (0, import_utils6.useId)(id);
-  const noChildren = children === void 0;
-  const input = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CheckboxInput_default, { ...props, className: noChildren ? className : void 0, disabled, id: htmlId, ref });
-  if (noChildren) {
-    return input;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CheckboxWithLabel, { className, disabled, id: htmlId, input, children });
-});
-var Checkbox_default = (0, import_react36.memo)(Checkbox);
-
-// src/components/TagItem/index.tsx
-var import_react37 = require("react");
-var import_utils7 = require("@react-aria/utils");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var TagItem = (0, import_react37.forwardRef)(function TagItemInner({
-  component,
-  label,
-  translatedLabel,
-  bgColor = "#7ACCB1",
-  bgImage,
-  size = "M",
-  status = "default",
-  ...props
-}, _ref) {
-  const ref = (0, import_utils7.useObjectRef)(_ref);
-  const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-  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_react37.useMemo)(() => component ?? "button", [component]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsxs)("div", { className: "charcoal-tag-item__label", "data-has-translate": hasTranslatedLabel, children: [
-      hasTranslatedLabel && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "charcoal-tag-item__label__translated", children: translatedLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "charcoal-tag-item__label__text", "data-has-translate": hasTranslatedLabel, children: label })
-    ] }),
-    status === "active" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon_default, { name: "16/Remove" })
-  ] });
-});
-var TagItem_default = (0, import_react37.memo)(TagItem);
-
-// src/components/HintText/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-function HintText({
-  children,
-  context = "section",
-  className
-}) {
-  const classNames = useClassNames("charcoal-hint-text", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: classNames, "data-context": context, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "charcoal-hint-text-icon", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon_default, { name: "16/Info" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "charcoal-hint-text-message", children })
-  ] });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Button,
-  CharcoalProvider,
-  Checkbox,
-  Clickable,
-  DropdownMenuItem,
-  DropdownSelector,
-  HintText,
-  Icon,
-  IconButton,
-  LoadingSpinner,
-  LoadingSpinnerIcon,
-  MenuItemGroup,
-  Modal,
-  ModalAlign,
-  ModalBody,
-  ModalButtons,
-  ModalCloseButton,
-  ModalHeader,
-  MultiSelect,
-  MultiSelectGroup,
-  OverlayProvider,
-  Radio,
-  RadioGroup,
-  SSRProvider,
-  SegmentedControl,
-  SetThemeScript,
-  Switch,
-  TagItem,
-  TextArea,
-  TextField,
-  getThemeSync,
-  makeSetThemeScriptCode,
-  prefersColorScheme,
-  themeSelector,
-  themeSetter,
-  useLocalStorage,
-  useMedia,
-  useTheme,
-  useThemeSetter
-});
-//# sourceMappingURL=index.cjs.js.map