@marwes-ui/react 1.0.0 → 1.0.2

package/dist/index.js

@@ -1,13 +1,13 @@
 import '@marwes-ui/presets/firstEdition/styles.css';
-import { createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, createDividerRecipe, createSpacingRecipe, createSliderRecipe, richTextCommandByFormat, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, resolveThemeInput, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, headingRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, moveTabSelection, createDialogRecipe, sanitizeCurrencyValue, themeToCSSVars, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
-export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, IconName, Spacings, SwitchSize, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
-import * as React5 from 'react';
+import { createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, createDividerRecipe, createSpacingRecipe, createSliderRecipe, richTextCommandByFormat, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, ThemeMode, resolveThemePreference, nextThemeMode, resolveThemeInput, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, headingRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, moveTabSelection, createDialogRecipe, sanitizeCurrencyValue, isThemePreference, themeToCSSVars, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
+export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, IconName, Spacings, SwitchSize, ThemeMode, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
+import * as React2 from 'react';
 import { useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 // src/index.ts
-var MarwesContext = React5.createContext(null);
+var MarwesContext = React2.createContext(null);
 var loadedFonts = /* @__PURE__ */ new Set();
 var preconnected = false;
 function themeToRootStyle(theme) {
@@ -62,27 +62,136 @@ function loadThemeFonts(theme, config = "auto") {
     }
   }
 }
+var mediaQuery = "(prefers-color-scheme: dark)";
+function getSystemThemeMode() {
+  if (typeof window === "undefined") return ThemeMode.light;
+  return window.matchMedia?.(mediaQuery).matches ? ThemeMode.dark : ThemeMode.light;
+}
+function subscribeToSystemThemeMode(onChange) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {
+  };
+  const media = window.matchMedia(mediaQuery);
+  const listener = (event) => {
+    onChange(event.matches ? ThemeMode.dark : ThemeMode.light);
+  };
+  if (media.addEventListener) {
+    media.addEventListener("change", listener);
+  } else {
+    media.addListener?.(listener);
+  }
+  return () => {
+    if (media.removeEventListener) {
+      media.removeEventListener("change", listener);
+    } else {
+      media.removeListener?.(listener);
+    }
+  };
+}
+function readStoredThemePreference(storageKey) {
+  if (!storageKey || typeof window === "undefined") return void 0;
+  try {
+    const value = window.localStorage.getItem(storageKey);
+    return isThemePreference(value) ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStoredThemePreference(storageKey, preference) {
+  if (!storageKey || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(storageKey, preference);
+  } catch {
+  }
+}
 function MarwesProvider({
   theme,
+  defaultPreference,
+  preference: controlledPreference,
+  defaultMode,
+  mode: controlledMode,
   fontLoading = "auto",
+  onPreferenceChange,
   onModeChange,
+  storageKey = false,
+  enableSystem = true,
   children
 }) {
-  const rootRef = React5.useRef(null);
-  const resolved = React5.useMemo(() => resolveThemeInput(theme ?? {}), [theme]);
-  const rootStyle = React5.useMemo(
+  const rootRef = React2.useRef(null);
+  const [internalPreference, setInternalPreference] = React2.useState(
+    defaultPreference ?? defaultMode ?? ThemeMode.light
+  );
+  const [systemMode, setSystemMode] = React2.useState(
+    () => enableSystem ? getSystemThemeMode() : ThemeMode.light
+  );
+  const activePreference = controlledPreference ?? controlledMode ?? theme?.mode ?? internalPreference;
+  const activeMode = resolveThemePreference(activePreference, systemMode);
+  const isPreferenceControlled = controlledPreference !== void 0 || controlledMode !== void 0 || theme?.mode !== void 0;
+  React2.useEffect(() => {
+    const storedPreference = readStoredThemePreference(storageKey);
+    if (storedPreference !== void 0 && !isPreferenceControlled) {
+      setInternalPreference(storedPreference);
+    }
+  }, [isPreferenceControlled, storageKey]);
+  React2.useEffect(() => {
+    if (!enableSystem) {
+      setSystemMode(ThemeMode.light);
+      return;
+    }
+    setSystemMode(getSystemThemeMode());
+    if (activePreference !== "system") {
+      return;
+    }
+    return subscribeToSystemThemeMode(setSystemMode);
+  }, [activePreference, enableSystem]);
+  const setPreference = React2.useCallback(
+    (nextPreference) => {
+      if (!isPreferenceControlled) {
+        setInternalPreference(nextPreference);
+      }
+      writeStoredThemePreference(storageKey, nextPreference);
+      onPreferenceChange?.(nextPreference);
+    },
+    [isPreferenceControlled, onPreferenceChange, storageKey]
+  );
+  const setMode = React2.useCallback(
+    (nextMode) => {
+      setPreference(nextMode);
+      onModeChange?.(nextMode);
+    },
+    [onModeChange, setPreference]
+  );
+  const toggleMode = React2.useCallback(() => {
+    setMode(nextThemeMode(activeMode));
+  }, [activeMode, setMode]);
+  const resolved = React2.useMemo(
+    () => resolveThemeInput({ ...theme ?? {}, mode: activeMode }),
+    [activeMode, theme]
+  );
+  const rootStyle = React2.useMemo(
     () => themeToRootStyle(resolved),
     [resolved]
   );
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (rootRef.current) {
       applyThemeToElement(rootRef.current, resolved);
     }
   }, [resolved]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     loadThemeFonts(resolved, fontLoading);
   }, [resolved, fontLoading]);
-  return /* @__PURE__ */ jsx(MarwesContext.Provider, { value: { theme: resolved, onModeChange }, children: /* @__PURE__ */ jsx(
+  const contextValue = React2.useMemo(
+    () => ({
+      theme: resolved,
+      mode: activeMode,
+      preference: activePreference,
+      systemMode,
+      setMode,
+      setPreference,
+      toggleMode
+    }),
+    [activeMode, activePreference, resolved, setMode, setPreference, systemMode, toggleMode]
+  );
+  return /* @__PURE__ */ jsx(MarwesContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref: rootRef,
@@ -94,12 +203,29 @@ function MarwesProvider({
   ) });
 }
 function useTheme() {
-  const ctx = React5.useContext(MarwesContext);
+  const ctx = React2.useContext(MarwesContext);
   if (!ctx) {
     throw new Error("MarwesProvider is missing. Wrap your app in <MarwesProvider />.");
   }
   return ctx.theme;
 }
+function useThemeMode() {
+  const ctx = React2.useContext(MarwesContext);
+  if (!ctx) {
+    throw new Error("MarwesProvider is missing. Wrap your app in <MarwesProvider />.");
+  }
+  return {
+    mode: ctx.mode,
+    preference: ctx.preference,
+    systemMode: ctx.systemMode,
+    setMode: ctx.setMode,
+    setPreference: ctx.setPreference,
+    toggleMode: ctx.toggleMode,
+    isDark: ctx.mode === ThemeMode.dark,
+    isLight: ctx.mode === ThemeMode.light,
+    isSystem: ctx.preference === "system"
+  };
+}
 function Icon({
   name,
   size,
@@ -765,7 +891,7 @@ function Select(props) {
   const kit = createSelectRecipe(props);
   const mode = resolveSelectMode(props);
   const isControlled = props.value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = React5.useState(
+  const [uncontrolledValue, setUncontrolledValue] = React2.useState(
     () => getInitialSelectValue(props)
   );
   useRenderKitDebug(kit, "Select");
@@ -981,33 +1107,33 @@ function exitActiveFormatAtCaret(editorElement, format) {
   selection.addRange(nextRange);
   return true;
 }
-var RichText = React5.forwardRef((props, forwardedRef) => {
+var RichText = React2.forwardRef((props, forwardedRef) => {
   const kit = createRichTextRecipe(props);
-  const allowedFormats = React5.useMemo(
+  const allowedFormats = React2.useMemo(
     () => resolveRichTextAllowedFormats(props.allowedFormats),
     [props.allowedFormats]
   );
-  const normalizedControlledValue = React5.useMemo(
+  const normalizedControlledValue = React2.useMemo(
     () => normalizeRichTextHtml(props.value),
     [props.value]
   );
-  const initialUncontrolledValue = React5.useMemo(
+  const initialUncontrolledValue = React2.useMemo(
     () => normalizeRichTextHtml(props.defaultValue),
     [props.defaultValue]
   );
   const isControlled = props.value !== void 0;
-  const [uncontrolledHtml, setUncontrolledHtml] = React5.useState(initialUncontrolledValue);
-  const [isEditorEmpty, setIsEditorEmpty] = React5.useState(
+  const [uncontrolledHtml, setUncontrolledHtml] = React2.useState(initialUncontrolledValue);
+  const [isEditorEmpty, setIsEditorEmpty] = React2.useState(
     isRichTextHtmlEmpty(isControlled ? normalizedControlledValue : initialUncontrolledValue)
   );
-  const [activeFormats, setActiveFormats] = React5.useState([]);
-  const editorElementRef = React5.useRef(null);
+  const [activeFormats, setActiveFormats] = React2.useState([]);
+  const editorElementRef = React2.useRef(null);
   useRenderKitDebug(kit, "RichText");
   const editorHtml = isControlled ? normalizedControlledValue : uncontrolledHtml;
   const style = kit.vars;
   const className = props.className ? `${kit.className} ${props.className}` : kit.className;
   const showToolbar = !props.readOnly;
-  const syncEditorState = React5.useCallback(
+  const syncEditorState = React2.useCallback(
     (nextHtml) => {
       const normalizedHtml = normalizeRichTextHtml(nextHtml);
       const emptyState = isRichTextHtmlEmpty(normalizedHtml);
@@ -1020,10 +1146,10 @@ var RichText = React5.forwardRef((props, forwardedRef) => {
     },
     [isControlled, props]
   );
-  const refreshActiveFormats = React5.useCallback(() => {
+  const refreshActiveFormats = React2.useCallback(() => {
     setActiveFormats(getActiveFormatsFromSelection(editorElementRef.current));
   }, []);
-  React5.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     const editorElement = editorElementRef.current;
     if (!editorElement) {
       return;
@@ -1034,7 +1160,7 @@ var RichText = React5.forwardRef((props, forwardedRef) => {
     }
     setIsEditorEmpty(isRichTextHtmlEmpty(editorHtml));
   }, [editorHtml]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (typeof document === "undefined") {
       return void 0;
     }
@@ -1179,12 +1305,12 @@ function hasTextContent(value) {
   return value !== void 0 && value.trim().length > 0;
 }
 function InputField(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-input-${reactId}`;
   const isPasswordField = props.input.type === "password";
-  const [showPassword, setShowPassword] = React5.useState(false);
+  const [showPassword, setShowPassword] = React2.useState(false);
   const isSearchField = props.input.type === "search";
-  const [searchValue, setSearchValue] = React5.useState(
+  const [searchValue, setSearchValue] = React2.useState(
     props.input.value || props.input.defaultValue || ""
   );
   const hasSearchValue = isSearchField && (props.input.value !== void 0 ? String(props.input.value).length > 0 : String(searchValue).length > 0);
@@ -1279,14 +1405,14 @@ function hasTextContent2(value) {
   return value !== void 0 && value.trim().length > 0;
 }
 function InputOtp(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-input-otp-${reactId}`;
   const otpLength = Math.max(1, props.length ?? 6);
   const hasHelperText = hasTextContent2(props.helperText);
   const hasError = hasTextContent2(props.error);
   const invalid = hasError || props.invalid === true;
   const isControlled = props.value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = React5.useState(() => {
+  const [uncontrolledValue, setUncontrolledValue] = React2.useState(() => {
     return sanitizeInputOtpValue(props.defaultValue, otpLength);
   });
   const currentValue = sanitizeInputOtpValue(
@@ -1443,18 +1569,18 @@ function MarwesSelectFieldControl(props) {
   const { id, select } = props;
   const listboxId = `${id}-listbox`;
   const isControlled = select.value !== void 0;
-  const [internalValue, setInternalValue] = React5.useState(() => getInitialSelectValue2(select));
+  const [internalValue, setInternalValue] = React2.useState(() => getInitialSelectValue2(select));
   const value = isControlled ? select.value ?? "" : internalValue;
-  const [open, setOpen] = React5.useState(false);
-  const [activeIndex, setActiveIndex] = React5.useState(
+  const [open, setOpen] = React2.useState(false);
+  const [activeIndex, setActiveIndex] = React2.useState(
     () => getInitialActiveOptionIndex(select.options, value)
   );
-  const rootRef = React5.useRef(null);
-  const buttonRef = React5.useRef(null);
+  const rootRef = React2.useRef(null);
+  const buttonRef = React2.useRef(null);
   const selectedOption = select.options.find((option) => option.value === value) ?? (select.placeholder === void 0 ? select.options[0] : void 0);
   const placeholderSelected = select.placeholder !== void 0 && value === "";
   const displayText = placeholderSelected ? select.placeholder : selectedOption?.label ?? "";
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!open) {
       return;
     }
@@ -1469,13 +1595,13 @@ function MarwesSelectFieldControl(props) {
       document.removeEventListener("pointerdown", handlePointerDown);
     };
   }, [open]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!open) {
       return;
     }
     setActiveIndex(getInitialActiveOptionIndex(select.options, value));
   }, [open, select.options, value]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!select.disabled) {
       return;
     }
@@ -1674,7 +1800,7 @@ function MarwesSelectFieldControl(props) {
   );
 }
 function SelectField(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-select-${reactId}`;
   const mode = resolveSelectMode(props.select);
   const hasHelperText = hasTextContent3(props.helperText);
@@ -1720,7 +1846,7 @@ function hasTextContent4(value) {
   return value !== void 0 && value.trim().length > 0;
 }
 function TextareaField(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-textarea-${reactId}`;
   const hasHelperText = hasTextContent4(props.helperText);
   const hasError = hasTextContent4(props.error);
@@ -1766,9 +1892,9 @@ function hasTextContent5(value) {
   return value !== void 0 && value.trim().length > 0;
 }
 function RichTextField(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-rich-text-${reactId}`;
-  const editorRef = React5.useRef(null);
+  const editorRef = React2.useRef(null);
   const hasHelperText = hasTextContent5(props.helperText);
   const hasError = hasTextContent5(props.error);
   const { labelId, helperTextId, errorId, describedBy } = buildRichTextFieldA11yIds({
@@ -2135,8 +2261,8 @@ function TeamAvatarGroup(props) {
 function Checkbox(props) {
   const { onCheckedChange, onChange, ...coreProps } = props;
   const kit = checkboxRecipe({ ...coreProps });
-  const inputRef = React5.useRef(null);
-  React5.useLayoutEffect(() => {
+  const inputRef = React2.useRef(null);
+  React2.useLayoutEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     el.indeterminate = kit.indeterminate;
@@ -2182,7 +2308,7 @@ function hasContent(value) {
   return true;
 }
 function CheckboxField(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-checkbox-${reactId}`;
   const hasDescription = hasContent(props.description);
   const hasError = hasContent(props.error);
@@ -2236,7 +2362,7 @@ function orderSelectedValues(values, options) {
   return [...knownValues, ...unknownValues];
 }
 function CheckboxGroupField(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-checkbox-group-${reactId}`;
   const hasDescription = hasContent2(props.description);
   const hasError = hasContent2(props.error);
@@ -2248,7 +2374,7 @@ function CheckboxGroupField(props) {
     externalDescribedBy: props.ariaDescribedBy
   });
   const isControlled = props.value !== void 0;
-  const [internalValue, setInternalValue] = React5.useState(
+  const [internalValue, setInternalValue] = React2.useState(
     orderSelectedValues(props.defaultValue ?? [], props.options)
   );
   const selectedValues = orderSelectedValues(
@@ -2318,7 +2444,7 @@ function CheckboxGroupField(props) {
     }
   );
 }
-var Divider = React5.forwardRef((props, ref) => {
+var Divider = React2.forwardRef((props, ref) => {
   const { className: customClassName, style: customStyle, ...opts } = props;
   const kit = createDividerRecipe(opts);
   const style = { ...kit.vars, ...customStyle };
@@ -2326,7 +2452,7 @@ var Divider = React5.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx("hr", { ref, ...kit.a11y, ...kit.dataAttributes, className, style });
 });
 Divider.displayName = "Divider";
-var Spacing = React5.forwardRef((props, ref) => {
+var Spacing = React2.forwardRef((props, ref) => {
   const { className: customClassName, scale, size, spacing, style: customStyle } = props;
   const resolvedSize = spacing ?? size;
   const kit = createSpacingRecipe({
@@ -2561,12 +2687,12 @@ function renderToastByIntent(toast, onDismiss) {
   }
 }
 function ToastViewportItem(props) {
-  const timerHandleRef = React5.useRef(null);
-  const timerStartedAtRef = React5.useRef(null);
-  const remainingDurationRef = React5.useRef(null);
-  const pointerInsideRef = React5.useRef(false);
-  const focusInsideRef = React5.useRef(false);
-  const clearDismissTimer = React5.useCallback(() => {
+  const timerHandleRef = React2.useRef(null);
+  const timerStartedAtRef = React2.useRef(null);
+  const remainingDurationRef = React2.useRef(null);
+  const pointerInsideRef = React2.useRef(false);
+  const focusInsideRef = React2.useRef(false);
+  const clearDismissTimer = React2.useCallback(() => {
     if (timerHandleRef.current === null) {
       return;
     }
@@ -2574,7 +2700,7 @@ function ToastViewportItem(props) {
     timerHandleRef.current = null;
     timerStartedAtRef.current = null;
   }, []);
-  const scheduleDismissTimer = React5.useCallback(
+  const scheduleDismissTimer = React2.useCallback(
     (delay) => {
       if (!props.onDismiss || delay <= 0 || pointerInsideRef.current || focusInsideRef.current || timerHandleRef.current !== null) {
         return;
@@ -2589,7 +2715,7 @@ function ToastViewportItem(props) {
     },
     [props.onDismiss, props.toast.id]
   );
-  const pauseDismissTimer = React5.useCallback(() => {
+  const pauseDismissTimer = React2.useCallback(() => {
     if (timerHandleRef.current === null || timerStartedAtRef.current === null) {
       return;
     }
@@ -2598,7 +2724,7 @@ function ToastViewportItem(props) {
     remainingDurationRef.current = Math.max(remainingDuration - elapsed, 0);
     clearDismissTimer();
   }, [clearDismissTimer]);
-  const resumeDismissTimer = React5.useCallback(() => {
+  const resumeDismissTimer = React2.useCallback(() => {
     if (pointerInsideRef.current || focusInsideRef.current) {
       return;
     }
@@ -2608,7 +2734,7 @@ function ToastViewportItem(props) {
     }
     scheduleDismissTimer(remainingDuration);
   }, [scheduleDismissTimer]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     clearDismissTimer();
     pointerInsideRef.current = false;
     focusInsideRef.current = false;
@@ -2665,18 +2791,18 @@ function ToastContainer(props) {
     toast.id
   )) });
 }
-var ToastContext = React5.createContext(null);
+var ToastContext = React2.createContext(null);
 function ToastProvider(props) {
-  const [toasts, setToasts] = React5.useState([]);
-  const idRef = React5.useRef(0);
-  const dismiss = React5.useCallback((id) => {
+  const [toasts, setToasts] = React2.useState([]);
+  const idRef = React2.useRef(0);
+  const dismiss = React2.useCallback((id) => {
     setToasts((currentToasts) => {
       const toast = currentToasts.find((item) => item.id === id);
       toast?.onDismiss?.();
       return currentToasts.filter((item) => item.id !== id);
     });
   }, []);
-  const clear = React5.useCallback(() => {
+  const clear = React2.useCallback(() => {
     setToasts((currentToasts) => {
       for (const toast of currentToasts) {
         toast.onDismiss?.();
@@ -2684,7 +2810,7 @@ function ToastProvider(props) {
       return [];
     });
   }, []);
-  const show = React5.useCallback(
+  const show = React2.useCallback(
     (toast) => {
       idRef.current += 1;
       const id = `mw-toast-${idRef.current}`;
@@ -2700,7 +2826,7 @@ function ToastProvider(props) {
     },
     [props.defaultDuration]
   );
-  const value = React5.useMemo(
+  const value = React2.useMemo(
     () => ({
       show,
       dismiss,
@@ -2723,7 +2849,7 @@ function ToastProvider(props) {
   ] });
 }
 function useToast() {
-  const context = React5.useContext(ToastContext);
+  const context = React2.useContext(ToastContext);
   if (!context) {
     throw new Error("ToastProvider is missing. Wrap your app in <ToastProvider />.");
   }
@@ -2757,7 +2883,7 @@ function cx10(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function TooltipGroup(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const {
     content,
     icon = IconName.HelpCircle,
@@ -2778,12 +2904,12 @@ function TooltipGroup(props) {
     onKeyDown,
     ...nativeSpanProps
   } = props;
-  const [internalOpen, setInternalOpen] = React5.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React2.useState(defaultOpen);
   const isControlled = open !== void 0;
   const resolvedOpen = isControlled ? open : internalOpen;
-  const [isTooltipMounted, setIsTooltipMounted] = React5.useState(resolvedOpen);
+  const [isTooltipMounted, setIsTooltipMounted] = React2.useState(resolvedOpen);
   const resolvedTooltipId = tooltipId ?? `${id ?? `mw-tooltip-group-${reactId}`}-tooltip`;
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (resolvedOpen) {
       setIsTooltipMounted(true);
       return;
@@ -2795,7 +2921,7 @@ function TooltipGroup(props) {
       window.clearTimeout(timeoutId);
     };
   }, [resolvedOpen]);
-  const updateOpen = React5.useCallback(
+  const updateOpen = React2.useCallback(
     (nextOpen) => {
       if (resolvedOpen === nextOpen) {
         return;
@@ -2869,7 +2995,7 @@ function TooltipGroup(props) {
 }
 function Accordion(props) {
   const { title, children, className, onToggle, id: idProp, open, disabled } = props;
-  const autoId = React5.useId();
+  const autoId = React2.useId();
   const resolvedId = idProp ?? autoId.replace(/:/g, "");
   const opts = { id: resolvedId };
   if (open !== void 0) opts.open = open;
@@ -2922,7 +3048,7 @@ function resolveAccordionItemContent(item) {
   return item.content ?? item.children;
 }
 function AccordionField(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-accordion-field-${reactId}`;
   const multipleAllowed = props.multiple ?? true;
   const hasDescription = hasContent3(props.description);
@@ -2935,7 +3061,7 @@ function AccordionField(props) {
     externalDescribedBy: props.ariaDescribedBy
   });
   const isControlled = props.openItems !== void 0;
-  const [internalOpenItems, setInternalOpenItems] = React5.useState(
+  const [internalOpenItems, setInternalOpenItems] = React2.useState(
     props.defaultOpenItems ?? []
   );
   const openItems = isControlled ? props.openItems ?? [] : internalOpenItems;
@@ -3066,7 +3192,7 @@ function cx12(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function RadioGroupField(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-radio-group-${reactId}`;
   const hasDescription = hasContent4(props.description);
   const hasError = hasContent4(props.error);
@@ -3078,7 +3204,7 @@ function RadioGroupField(props) {
     externalDescribedBy: props.ariaDescribedBy
   });
   const isControlled = props.value !== void 0;
-  const [internalValue, setInternalValue] = React5.useState(props.defaultValue);
+  const [internalValue, setInternalValue] = React2.useState(props.defaultValue);
   const selectedValue = isControlled ? props.value : internalValue;
   const handleSelect = (optionValue) => {
     if (!isControlled) {
@@ -3197,7 +3323,7 @@ function cx13(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function BadgeGroup(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-badge-group-${reactId}`;
   const labelId = `${id}-label`;
   const className = cx13("mw-badge-group", props.className);
@@ -3289,7 +3415,7 @@ function hasContent5(value) {
   return true;
 }
 function SwitchField(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-switch-${reactId}`;
   const hasDescription = hasContent5(props.description);
   const hasError = hasContent5(props.error);
@@ -3389,7 +3515,7 @@ function buildSliderOptions(options) {
 function resolveSliderValue(options) {
   return createSliderRecipe(buildSliderOptions(options)).value;
 }
-var Slider = React5.forwardRef((props, ref) => {
+var Slider = React2.forwardRef((props, ref) => {
   const {
     id,
     name,
@@ -3414,10 +3540,10 @@ var Slider = React5.forwardRef((props, ref) => {
     ...inputProps
   } = props;
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = React5.useState(
+  const [uncontrolledValue, setUncontrolledValue] = React2.useState(
     () => resolveSliderValue({ min, max, step, value, defaultValue })
   );
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!isControlled) {
       setUncontrolledValue(resolveSliderValue({ min, max, step, defaultValue }));
     }
@@ -3503,7 +3629,7 @@ function resolveEdgeValueLabel(value, fallback) {
   return value ?? `${fallback}`;
 }
 function SliderField(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-slider-${reactId}`;
   const hasDescription = hasContent6(props.description);
   const hasError = hasContent6(props.error);
@@ -3704,29 +3830,29 @@ function TabPanel(props) {
   );
 }
 function TabGroup(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-tab-group-${reactId}`;
   const hasLabel = hasContent7(props.label);
-  const itemStates = React5.useMemo(
+  const itemStates = React2.useMemo(
     () => props.tabs.map((tab) => toItemState(tab)),
     [props.tabs]
   );
   const isControlled = props.activeTab !== void 0;
-  const [internalActiveTab, setInternalActiveTab] = React5.useState(
+  const [internalActiveTab, setInternalActiveTab] = React2.useState(
     () => resolveTabValue(itemStates, props.defaultActiveTab)
   );
-  const resolvedActiveTab = React5.useMemo(
+  const resolvedActiveTab = React2.useMemo(
     () => resolveTabValue(itemStates, isControlled ? props.activeTab : internalActiveTab),
     [internalActiveTab, isControlled, itemStates, props.activeTab]
   );
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!isControlled) {
       setInternalActiveTab(
         (currentValue) => resolveTabValue(itemStates, currentValue ?? props.defaultActiveTab)
       );
     }
   }, [isControlled, itemStates, props.defaultActiveTab]);
-  const a11yIds = React5.useMemo(
+  const a11yIds = React2.useMemo(
     () => buildTabGroupA11yIds({
       id,
       itemValues: props.tabs.map((tab) => tab.value),
@@ -3734,7 +3860,7 @@ function TabGroup(props) {
     }),
     [hasLabel, id, props.tabs]
   );
-  const selectTab = React5.useCallback(
+  const selectTab = React2.useCallback(
     (nextValue) => {
       const resolvedValue = resolveTabValue(itemStates, nextValue);
       if (!resolvedValue) {
@@ -3749,7 +3875,7 @@ function TabGroup(props) {
     },
     [isControlled, itemStates, props.onActiveTabChange, resolvedActiveTab]
   );
-  const handleKeyDown = React5.useCallback(
+  const handleKeyDown = React2.useCallback(
     (event) => {
       let direction;
       switch (event.key) {
@@ -3879,7 +4005,7 @@ function hasContent8(value) {
   return true;
 }
 function Dialog(props) {
-  const reactId = React5.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-dialog-${reactId}`;
   const titleId = `${id}-title`;
   const descriptionId = `${id}-description`;
@@ -3998,12 +4124,12 @@ function DialogModal(props) {
     ...dialogProps
   } = props;
   const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = React5.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React2.useState(defaultOpen);
   const resolvedOpen = isControlled ? open : internalOpen;
-  const overlayRef = React5.useRef(null);
-  const surfaceRef = React5.useRef(null);
-  const lastFocusedElementRef = React5.useRef(null);
-  const close = React5.useCallback(() => {
+  const overlayRef = React2.useRef(null);
+  const surfaceRef = React2.useRef(null);
+  const lastFocusedElementRef = React2.useRef(null);
+  const close = React2.useCallback(() => {
     if (!resolvedOpen) {
       return;
     }
@@ -4012,7 +4138,7 @@ function DialogModal(props) {
     }
     onOpenChange?.(false);
   }, [isControlled, onOpenChange, resolvedOpen]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!resolvedOpen || typeof document === "undefined") {
       return;
     }
@@ -4031,7 +4157,7 @@ function DialogModal(props) {
       }
     };
   }, [resolvedOpen, restoreFocus]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!resolvedOpen || !closeOnEscape || typeof document === "undefined") {
       return;
     }
@@ -4046,7 +4172,7 @@ function DialogModal(props) {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   }, [close, closeOnEscape, resolvedOpen]);
-  const handleKeyDown = React5.useCallback(
+  const handleKeyDown = React2.useCallback(
     (event) => {
       if (event.key === "Escape" && closeOnEscape) {
         event.preventDefault();
@@ -4077,7 +4203,7 @@ function DialogModal(props) {
     },
     [close, closeOnEscape]
   );
-  const renderedFooter = React5.useMemo(
+  const renderedFooter = React2.useMemo(
     () => typeof footer === "function" ? footer({ close }) : footer,
     [close, footer]
   );
@@ -4222,6 +4348,6 @@ function InfoDialog(props) {
   );
 }
 
-export { Accordion, AccordionField, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeGroup, BrightnessSlider, Button, ButtonSpinner, CancelButton, Card, Checkbox, CheckboxField, CheckboxGroupField, CloseButton, ConfirmButton, ConfirmDialog, ContentTabs, CopyButton, CreateButton, CurrencyField, DateOfBirthField, DestructiveButton, DestructiveDialog, Dialog, DialogModal, Divider, DownloadButton, DropdownButton, DropdownField, EditButton, EmailField, EmptyStateSpinner, ErrorToast, FAQAccordion, FeatureToggle, FilterButton, H1, H2, H3, Icon, InfoDialog, InfoToast, Input, InputField, InputOtp, LinkButton, MarwesProvider, NavigationTabs, NotificationBadge, OptionRadioGroup, Paragraph, PasswordField, PermissionSwitch, PhoneField, PreferenceSwitch, PresenceAvatar, PrimaryButton, PriorityBadge, ProductCard, ProfileAvatar, ProfileCard, Radio, RadioGroupField, RadiusSlider, RatingRadioGroup, RefreshButton, RichText, RichTextField, SaveButton, SearchButton, SearchField, SecondaryButton, SectionsAccordion, Select, SelectField, SettingsAccordion, SettingsTabs, Slider, SliderField, SortButton, Spacer, Spacing, Spinner, StatCard, StatusBadge, SubmitButton, SuccessButton, SuccessToast, Switch, SwitchField, Tab, TabGroup, TabPanel, TeamAvatarGroup, TextButton, Textarea, TextareaField, Toast, ToastContainer, ToastProvider, Tooltip, TooltipGroup, URLField, UploadButton, VerifyButton, VolumeSlider, WarningToast, YesNoRadioGroup, ZipCodeField, useTheme, useToast };
+export { Accordion, AccordionField, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeGroup, BrightnessSlider, Button, ButtonSpinner, CancelButton, Card, Checkbox, CheckboxField, CheckboxGroupField, CloseButton, ConfirmButton, ConfirmDialog, ContentTabs, CopyButton, CreateButton, CurrencyField, DateOfBirthField, DestructiveButton, DestructiveDialog, Dialog, DialogModal, Divider, DownloadButton, DropdownButton, DropdownField, EditButton, EmailField, EmptyStateSpinner, ErrorToast, FAQAccordion, FeatureToggle, FilterButton, H1, H2, H3, Icon, InfoDialog, InfoToast, Input, InputField, InputOtp, LinkButton, MarwesProvider, NavigationTabs, NotificationBadge, OptionRadioGroup, Paragraph, PasswordField, PermissionSwitch, PhoneField, PreferenceSwitch, PresenceAvatar, PrimaryButton, PriorityBadge, ProductCard, ProfileAvatar, ProfileCard, Radio, RadioGroupField, RadiusSlider, RatingRadioGroup, RefreshButton, RichText, RichTextField, SaveButton, SearchButton, SearchField, SecondaryButton, SectionsAccordion, Select, SelectField, SettingsAccordion, SettingsTabs, Slider, SliderField, SortButton, Spacer, Spacing, Spinner, StatCard, StatusBadge, SubmitButton, SuccessButton, SuccessToast, Switch, SwitchField, Tab, TabGroup, TabPanel, TeamAvatarGroup, TextButton, Textarea, TextareaField, Toast, ToastContainer, ToastProvider, Tooltip, TooltipGroup, URLField, UploadButton, VerifyButton, VolumeSlider, WarningToast, YesNoRadioGroup, ZipCodeField, useTheme, useThemeMode, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map