@marwes-ui/react 1.0.1 → 1.0.3

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, ThemeMode, 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';
+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 React6 from 'react';
+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 = React6.createContext(null);
+var MarwesContext = React2.createContext(null);
 var loadedFonts = /* @__PURE__ */ new Set();
 var preconnected = false;
 function themeToRootStyle(theme) {
@@ -62,47 +62,191 @@ 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 applyModeAttribute({
+  target,
+  providerElement,
+  mode,
+  attribute
+}) {
+  const element = getTargetElement(target, providerElement);
+  if (!element) return;
+  if (attribute === "class") {
+    const oppositeMode = mode === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark;
+    element.classList.remove(oppositeMode);
+    element.classList.add(mode);
+    return;
+  }
+  element.setAttribute(attribute, mode);
+}
+function withoutModeTransitions(callback) {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    callback();
+    return;
+  }
+  const style = document.createElement("style");
+  style.dataset.marwesDisableTransitions = "true";
+  style.textContent = "* { transition: none !important; }";
+  document.head.appendChild(style);
+  callback();
+  window.getComputedStyle(document.body);
+  window.requestAnimationFrame(() => {
+    style.remove();
+  });
+}
+function getTargetElement(target, providerElement) {
+  if (target === "provider") return providerElement;
+  if (typeof document === "undefined") return null;
+  return target === "html" ? document.documentElement : document.body;
+}
 function MarwesProvider({
   theme,
-  defaultMode = ThemeMode.light,
+  defaultPreference,
+  preference: controlledPreference,
+  defaultMode,
   mode: controlledMode,
   fontLoading = "auto",
+  onPreferenceChange,
   onModeChange,
+  storageKey = false,
+  enableSystem = true,
+  target = "provider",
+  attribute = "class",
+  disableTransitionOnChange = false,
   children
 }) {
-  const rootRef = React6.useRef(null);
-  const [internalMode, setInternalMode] = React6.useState(defaultMode);
-  const activeMode = controlledMode ?? theme?.mode ?? internalMode;
-  const isModeControlled = controlledMode !== void 0 || theme?.mode !== void 0;
-  const setMode = React6.useCallback(
-    (nextMode) => {
-      if (!isModeControlled) {
-        setInternalMode(nextMode);
+  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);
     },
-    [isModeControlled, onModeChange]
+    [onModeChange, setPreference]
   );
-  const toggleMode = React6.useCallback(() => {
-    setMode(activeMode === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark);
+  const toggleMode = React2.useCallback(() => {
+    setMode(nextThemeMode(activeMode));
   }, [activeMode, setMode]);
-  const resolved = React6.useMemo(
+  const resolved = React2.useMemo(
     () => resolveThemeInput({ ...theme ?? {}, mode: activeMode }),
     [activeMode, theme]
   );
-  const rootStyle = React6.useMemo(
+  const rootStyle = React2.useMemo(
     () => themeToRootStyle(resolved),
     [resolved]
   );
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (rootRef.current) {
       applyThemeToElement(rootRef.current, resolved);
     }
   }, [resolved]);
-  React6.useEffect(() => {
+  React2.useEffect(() => {
+    if (target === "provider") return;
+    const apply = () => {
+      applyModeAttribute({
+        target,
+        providerElement: rootRef.current,
+        mode: activeMode,
+        attribute
+      });
+    };
+    if (disableTransitionOnChange) {
+      withoutModeTransitions(apply);
+      return;
+    }
+    apply();
+  }, [activeMode, attribute, disableTransitionOnChange, target]);
+  React2.useEffect(() => {
     loadThemeFonts(resolved, fontLoading);
   }, [resolved, fontLoading]);
-  return /* @__PURE__ */ jsx(MarwesContext.Provider, { value: { theme: resolved, mode: activeMode, setMode, toggleMode }, 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,
@@ -114,23 +258,27 @@ function MarwesProvider({
   ) });
 }
 function useTheme() {
-  const ctx = React6.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 = React6.useContext(MarwesContext);
+  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
+    isLight: ctx.mode === ThemeMode.light,
+    isSystem: ctx.preference === "system"
   };
 }
 function Icon({
@@ -798,7 +946,7 @@ function Select(props) {
   const kit = createSelectRecipe(props);
   const mode = resolveSelectMode(props);
   const isControlled = props.value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = React6.useState(
+  const [uncontrolledValue, setUncontrolledValue] = React2.useState(
     () => getInitialSelectValue(props)
   );
   useRenderKitDebug(kit, "Select");
@@ -1014,33 +1162,33 @@ function exitActiveFormatAtCaret(editorElement, format) {
   selection.addRange(nextRange);
   return true;
 }
-var RichText = React6.forwardRef((props, forwardedRef) => {
+var RichText = React2.forwardRef((props, forwardedRef) => {
   const kit = createRichTextRecipe(props);
-  const allowedFormats = React6.useMemo(
+  const allowedFormats = React2.useMemo(
     () => resolveRichTextAllowedFormats(props.allowedFormats),
     [props.allowedFormats]
   );
-  const normalizedControlledValue = React6.useMemo(
+  const normalizedControlledValue = React2.useMemo(
     () => normalizeRichTextHtml(props.value),
     [props.value]
   );
-  const initialUncontrolledValue = React6.useMemo(
+  const initialUncontrolledValue = React2.useMemo(
     () => normalizeRichTextHtml(props.defaultValue),
     [props.defaultValue]
   );
   const isControlled = props.value !== void 0;
-  const [uncontrolledHtml, setUncontrolledHtml] = React6.useState(initialUncontrolledValue);
-  const [isEditorEmpty, setIsEditorEmpty] = React6.useState(
+  const [uncontrolledHtml, setUncontrolledHtml] = React2.useState(initialUncontrolledValue);
+  const [isEditorEmpty, setIsEditorEmpty] = React2.useState(
     isRichTextHtmlEmpty(isControlled ? normalizedControlledValue : initialUncontrolledValue)
   );
-  const [activeFormats, setActiveFormats] = React6.useState([]);
-  const editorElementRef = React6.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 = React6.useCallback(
+  const syncEditorState = React2.useCallback(
     (nextHtml) => {
       const normalizedHtml = normalizeRichTextHtml(nextHtml);
       const emptyState = isRichTextHtmlEmpty(normalizedHtml);
@@ -1053,10 +1201,10 @@ var RichText = React6.forwardRef((props, forwardedRef) => {
     },
     [isControlled, props]
   );
-  const refreshActiveFormats = React6.useCallback(() => {
+  const refreshActiveFormats = React2.useCallback(() => {
     setActiveFormats(getActiveFormatsFromSelection(editorElementRef.current));
   }, []);
-  React6.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     const editorElement = editorElementRef.current;
     if (!editorElement) {
       return;
@@ -1067,7 +1215,7 @@ var RichText = React6.forwardRef((props, forwardedRef) => {
     }
     setIsEditorEmpty(isRichTextHtmlEmpty(editorHtml));
   }, [editorHtml]);
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (typeof document === "undefined") {
       return void 0;
     }
@@ -1212,12 +1360,12 @@ function hasTextContent(value) {
   return value !== void 0 && value.trim().length > 0;
 }
 function InputField(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-input-${reactId}`;
   const isPasswordField = props.input.type === "password";
-  const [showPassword, setShowPassword] = React6.useState(false);
+  const [showPassword, setShowPassword] = React2.useState(false);
   const isSearchField = props.input.type === "search";
-  const [searchValue, setSearchValue] = React6.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);
@@ -1312,14 +1460,14 @@ function hasTextContent2(value) {
   return value !== void 0 && value.trim().length > 0;
 }
 function InputOtp(props) {
-  const reactId = React6.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] = React6.useState(() => {
+  const [uncontrolledValue, setUncontrolledValue] = React2.useState(() => {
     return sanitizeInputOtpValue(props.defaultValue, otpLength);
   });
   const currentValue = sanitizeInputOtpValue(
@@ -1476,18 +1624,18 @@ function MarwesSelectFieldControl(props) {
   const { id, select } = props;
   const listboxId = `${id}-listbox`;
   const isControlled = select.value !== void 0;
-  const [internalValue, setInternalValue] = React6.useState(() => getInitialSelectValue2(select));
+  const [internalValue, setInternalValue] = React2.useState(() => getInitialSelectValue2(select));
   const value = isControlled ? select.value ?? "" : internalValue;
-  const [open, setOpen] = React6.useState(false);
-  const [activeIndex, setActiveIndex] = React6.useState(
+  const [open, setOpen] = React2.useState(false);
+  const [activeIndex, setActiveIndex] = React2.useState(
     () => getInitialActiveOptionIndex(select.options, value)
   );
-  const rootRef = React6.useRef(null);
-  const buttonRef = React6.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 ?? "";
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (!open) {
       return;
     }
@@ -1502,13 +1650,13 @@ function MarwesSelectFieldControl(props) {
       document.removeEventListener("pointerdown", handlePointerDown);
     };
   }, [open]);
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (!open) {
       return;
     }
     setActiveIndex(getInitialActiveOptionIndex(select.options, value));
   }, [open, select.options, value]);
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (!select.disabled) {
       return;
     }
@@ -1707,7 +1855,7 @@ function MarwesSelectFieldControl(props) {
   );
 }
 function SelectField(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-select-${reactId}`;
   const mode = resolveSelectMode(props.select);
   const hasHelperText = hasTextContent3(props.helperText);
@@ -1753,7 +1901,7 @@ function hasTextContent4(value) {
   return value !== void 0 && value.trim().length > 0;
 }
 function TextareaField(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-textarea-${reactId}`;
   const hasHelperText = hasTextContent4(props.helperText);
   const hasError = hasTextContent4(props.error);
@@ -1799,9 +1947,9 @@ function hasTextContent5(value) {
   return value !== void 0 && value.trim().length > 0;
 }
 function RichTextField(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-rich-text-${reactId}`;
-  const editorRef = React6.useRef(null);
+  const editorRef = React2.useRef(null);
   const hasHelperText = hasTextContent5(props.helperText);
   const hasError = hasTextContent5(props.error);
   const { labelId, helperTextId, errorId, describedBy } = buildRichTextFieldA11yIds({
@@ -2168,8 +2316,8 @@ function TeamAvatarGroup(props) {
 function Checkbox(props) {
   const { onCheckedChange, onChange, ...coreProps } = props;
   const kit = checkboxRecipe({ ...coreProps });
-  const inputRef = React6.useRef(null);
-  React6.useLayoutEffect(() => {
+  const inputRef = React2.useRef(null);
+  React2.useLayoutEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     el.indeterminate = kit.indeterminate;
@@ -2215,7 +2363,7 @@ function hasContent(value) {
   return true;
 }
 function CheckboxField(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-checkbox-${reactId}`;
   const hasDescription = hasContent(props.description);
   const hasError = hasContent(props.error);
@@ -2269,7 +2417,7 @@ function orderSelectedValues(values, options) {
   return [...knownValues, ...unknownValues];
 }
 function CheckboxGroupField(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-checkbox-group-${reactId}`;
   const hasDescription = hasContent2(props.description);
   const hasError = hasContent2(props.error);
@@ -2281,7 +2429,7 @@ function CheckboxGroupField(props) {
     externalDescribedBy: props.ariaDescribedBy
   });
   const isControlled = props.value !== void 0;
-  const [internalValue, setInternalValue] = React6.useState(
+  const [internalValue, setInternalValue] = React2.useState(
     orderSelectedValues(props.defaultValue ?? [], props.options)
   );
   const selectedValues = orderSelectedValues(
@@ -2351,7 +2499,7 @@ function CheckboxGroupField(props) {
     }
   );
 }
-var Divider = React6.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 };
@@ -2359,7 +2507,7 @@ var Divider = React6.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx("hr", { ref, ...kit.a11y, ...kit.dataAttributes, className, style });
 });
 Divider.displayName = "Divider";
-var Spacing = React6.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({
@@ -2594,12 +2742,12 @@ function renderToastByIntent(toast, onDismiss) {
   }
 }
 function ToastViewportItem(props) {
-  const timerHandleRef = React6.useRef(null);
-  const timerStartedAtRef = React6.useRef(null);
-  const remainingDurationRef = React6.useRef(null);
-  const pointerInsideRef = React6.useRef(false);
-  const focusInsideRef = React6.useRef(false);
-  const clearDismissTimer = React6.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;
     }
@@ -2607,7 +2755,7 @@ function ToastViewportItem(props) {
     timerHandleRef.current = null;
     timerStartedAtRef.current = null;
   }, []);
-  const scheduleDismissTimer = React6.useCallback(
+  const scheduleDismissTimer = React2.useCallback(
     (delay) => {
       if (!props.onDismiss || delay <= 0 || pointerInsideRef.current || focusInsideRef.current || timerHandleRef.current !== null) {
         return;
@@ -2622,7 +2770,7 @@ function ToastViewportItem(props) {
     },
     [props.onDismiss, props.toast.id]
   );
-  const pauseDismissTimer = React6.useCallback(() => {
+  const pauseDismissTimer = React2.useCallback(() => {
     if (timerHandleRef.current === null || timerStartedAtRef.current === null) {
       return;
     }
@@ -2631,7 +2779,7 @@ function ToastViewportItem(props) {
     remainingDurationRef.current = Math.max(remainingDuration - elapsed, 0);
     clearDismissTimer();
   }, [clearDismissTimer]);
-  const resumeDismissTimer = React6.useCallback(() => {
+  const resumeDismissTimer = React2.useCallback(() => {
     if (pointerInsideRef.current || focusInsideRef.current) {
       return;
     }
@@ -2641,7 +2789,7 @@ function ToastViewportItem(props) {
     }
     scheduleDismissTimer(remainingDuration);
   }, [scheduleDismissTimer]);
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     clearDismissTimer();
     pointerInsideRef.current = false;
     focusInsideRef.current = false;
@@ -2698,18 +2846,18 @@ function ToastContainer(props) {
     toast.id
   )) });
 }
-var ToastContext = React6.createContext(null);
+var ToastContext = React2.createContext(null);
 function ToastProvider(props) {
-  const [toasts, setToasts] = React6.useState([]);
-  const idRef = React6.useRef(0);
-  const dismiss = React6.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 = React6.useCallback(() => {
+  const clear = React2.useCallback(() => {
     setToasts((currentToasts) => {
       for (const toast of currentToasts) {
         toast.onDismiss?.();
@@ -2717,7 +2865,7 @@ function ToastProvider(props) {
       return [];
     });
   }, []);
-  const show = React6.useCallback(
+  const show = React2.useCallback(
     (toast) => {
       idRef.current += 1;
       const id = `mw-toast-${idRef.current}`;
@@ -2733,7 +2881,7 @@ function ToastProvider(props) {
     },
     [props.defaultDuration]
   );
-  const value = React6.useMemo(
+  const value = React2.useMemo(
     () => ({
       show,
       dismiss,
@@ -2756,7 +2904,7 @@ function ToastProvider(props) {
   ] });
 }
 function useToast() {
-  const context = React6.useContext(ToastContext);
+  const context = React2.useContext(ToastContext);
   if (!context) {
     throw new Error("ToastProvider is missing. Wrap your app in <ToastProvider />.");
   }
@@ -2790,7 +2938,7 @@ function cx10(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function TooltipGroup(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const {
     content,
     icon = IconName.HelpCircle,
@@ -2811,12 +2959,12 @@ function TooltipGroup(props) {
     onKeyDown,
     ...nativeSpanProps
   } = props;
-  const [internalOpen, setInternalOpen] = React6.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React2.useState(defaultOpen);
   const isControlled = open !== void 0;
   const resolvedOpen = isControlled ? open : internalOpen;
-  const [isTooltipMounted, setIsTooltipMounted] = React6.useState(resolvedOpen);
+  const [isTooltipMounted, setIsTooltipMounted] = React2.useState(resolvedOpen);
   const resolvedTooltipId = tooltipId ?? `${id ?? `mw-tooltip-group-${reactId}`}-tooltip`;
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (resolvedOpen) {
       setIsTooltipMounted(true);
       return;
@@ -2828,7 +2976,7 @@ function TooltipGroup(props) {
       window.clearTimeout(timeoutId);
     };
   }, [resolvedOpen]);
-  const updateOpen = React6.useCallback(
+  const updateOpen = React2.useCallback(
     (nextOpen) => {
       if (resolvedOpen === nextOpen) {
         return;
@@ -2902,7 +3050,7 @@ function TooltipGroup(props) {
 }
 function Accordion(props) {
   const { title, children, className, onToggle, id: idProp, open, disabled } = props;
-  const autoId = React6.useId();
+  const autoId = React2.useId();
   const resolvedId = idProp ?? autoId.replace(/:/g, "");
   const opts = { id: resolvedId };
   if (open !== void 0) opts.open = open;
@@ -2955,7 +3103,7 @@ function resolveAccordionItemContent(item) {
   return item.content ?? item.children;
 }
 function AccordionField(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-accordion-field-${reactId}`;
   const multipleAllowed = props.multiple ?? true;
   const hasDescription = hasContent3(props.description);
@@ -2968,7 +3116,7 @@ function AccordionField(props) {
     externalDescribedBy: props.ariaDescribedBy
   });
   const isControlled = props.openItems !== void 0;
-  const [internalOpenItems, setInternalOpenItems] = React6.useState(
+  const [internalOpenItems, setInternalOpenItems] = React2.useState(
     props.defaultOpenItems ?? []
   );
   const openItems = isControlled ? props.openItems ?? [] : internalOpenItems;
@@ -3099,7 +3247,7 @@ function cx12(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function RadioGroupField(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-radio-group-${reactId}`;
   const hasDescription = hasContent4(props.description);
   const hasError = hasContent4(props.error);
@@ -3111,7 +3259,7 @@ function RadioGroupField(props) {
     externalDescribedBy: props.ariaDescribedBy
   });
   const isControlled = props.value !== void 0;
-  const [internalValue, setInternalValue] = React6.useState(props.defaultValue);
+  const [internalValue, setInternalValue] = React2.useState(props.defaultValue);
   const selectedValue = isControlled ? props.value : internalValue;
   const handleSelect = (optionValue) => {
     if (!isControlled) {
@@ -3230,7 +3378,7 @@ function cx13(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function BadgeGroup(props) {
-  const reactId = React6.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);
@@ -3322,7 +3470,7 @@ function hasContent5(value) {
   return true;
 }
 function SwitchField(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-switch-${reactId}`;
   const hasDescription = hasContent5(props.description);
   const hasError = hasContent5(props.error);
@@ -3422,7 +3570,7 @@ function buildSliderOptions(options) {
 function resolveSliderValue(options) {
   return createSliderRecipe(buildSliderOptions(options)).value;
 }
-var Slider = React6.forwardRef((props, ref) => {
+var Slider = React2.forwardRef((props, ref) => {
   const {
     id,
     name,
@@ -3447,10 +3595,10 @@ var Slider = React6.forwardRef((props, ref) => {
     ...inputProps
   } = props;
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = React6.useState(
+  const [uncontrolledValue, setUncontrolledValue] = React2.useState(
     () => resolveSliderValue({ min, max, step, value, defaultValue })
   );
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (!isControlled) {
       setUncontrolledValue(resolveSliderValue({ min, max, step, defaultValue }));
     }
@@ -3536,7 +3684,7 @@ function resolveEdgeValueLabel(value, fallback) {
   return value ?? `${fallback}`;
 }
 function SliderField(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-slider-${reactId}`;
   const hasDescription = hasContent6(props.description);
   const hasError = hasContent6(props.error);
@@ -3737,29 +3885,29 @@ function TabPanel(props) {
   );
 }
 function TabGroup(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-tab-group-${reactId}`;
   const hasLabel = hasContent7(props.label);
-  const itemStates = React6.useMemo(
+  const itemStates = React2.useMemo(
     () => props.tabs.map((tab) => toItemState(tab)),
     [props.tabs]
   );
   const isControlled = props.activeTab !== void 0;
-  const [internalActiveTab, setInternalActiveTab] = React6.useState(
+  const [internalActiveTab, setInternalActiveTab] = React2.useState(
     () => resolveTabValue(itemStates, props.defaultActiveTab)
   );
-  const resolvedActiveTab = React6.useMemo(
+  const resolvedActiveTab = React2.useMemo(
     () => resolveTabValue(itemStates, isControlled ? props.activeTab : internalActiveTab),
     [internalActiveTab, isControlled, itemStates, props.activeTab]
   );
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (!isControlled) {
       setInternalActiveTab(
         (currentValue) => resolveTabValue(itemStates, currentValue ?? props.defaultActiveTab)
       );
     }
   }, [isControlled, itemStates, props.defaultActiveTab]);
-  const a11yIds = React6.useMemo(
+  const a11yIds = React2.useMemo(
     () => buildTabGroupA11yIds({
       id,
       itemValues: props.tabs.map((tab) => tab.value),
@@ -3767,7 +3915,7 @@ function TabGroup(props) {
     }),
     [hasLabel, id, props.tabs]
   );
-  const selectTab = React6.useCallback(
+  const selectTab = React2.useCallback(
     (nextValue) => {
       const resolvedValue = resolveTabValue(itemStates, nextValue);
       if (!resolvedValue) {
@@ -3782,7 +3930,7 @@ function TabGroup(props) {
     },
     [isControlled, itemStates, props.onActiveTabChange, resolvedActiveTab]
   );
-  const handleKeyDown = React6.useCallback(
+  const handleKeyDown = React2.useCallback(
     (event) => {
       let direction;
       switch (event.key) {
@@ -3912,7 +4060,7 @@ function hasContent8(value) {
   return true;
 }
 function Dialog(props) {
-  const reactId = React6.useId();
+  const reactId = React2.useId();
   const id = props.id ?? `mw-dialog-${reactId}`;
   const titleId = `${id}-title`;
   const descriptionId = `${id}-description`;
@@ -4031,12 +4179,12 @@ function DialogModal(props) {
     ...dialogProps
   } = props;
   const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = React6.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React2.useState(defaultOpen);
   const resolvedOpen = isControlled ? open : internalOpen;
-  const overlayRef = React6.useRef(null);
-  const surfaceRef = React6.useRef(null);
-  const lastFocusedElementRef = React6.useRef(null);
-  const close = React6.useCallback(() => {
+  const overlayRef = React2.useRef(null);
+  const surfaceRef = React2.useRef(null);
+  const lastFocusedElementRef = React2.useRef(null);
+  const close = React2.useCallback(() => {
     if (!resolvedOpen) {
       return;
     }
@@ -4045,7 +4193,7 @@ function DialogModal(props) {
     }
     onOpenChange?.(false);
   }, [isControlled, onOpenChange, resolvedOpen]);
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (!resolvedOpen || typeof document === "undefined") {
       return;
     }
@@ -4064,7 +4212,7 @@ function DialogModal(props) {
       }
     };
   }, [resolvedOpen, restoreFocus]);
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (!resolvedOpen || !closeOnEscape || typeof document === "undefined") {
       return;
     }
@@ -4079,7 +4227,7 @@ function DialogModal(props) {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   }, [close, closeOnEscape, resolvedOpen]);
-  const handleKeyDown = React6.useCallback(
+  const handleKeyDown = React2.useCallback(
     (event) => {
       if (event.key === "Escape" && closeOnEscape) {
         event.preventDefault();
@@ -4110,7 +4258,7 @@ function DialogModal(props) {
     },
     [close, closeOnEscape]
   );
-  const renderedFooter = React6.useMemo(
+  const renderedFooter = React2.useMemo(
     () => typeof footer === "function" ? footer({ close }) : footer,
     [close, footer]
   );