@marwes-ui/react 0.0.4 → 1.0.1

package/dist/index.js

@@ -1,45 +1,137 @@
-import { createDividerRecipe, createSystem, switchMode, resolveIconSize, resolveIconStrokeWidth, iconRegistry, createButtonRecipe, IconName, ButtonAction, ButtonVariant, createInputRecipe, checkboxRecipe, headingRecipe, paragraphRecipe } from '@marwes-ui/core';
-export { ButtonAction, ButtonSize, ButtonVariant, IconName } from '@marwes-ui/core';
-import { firstEdition } from '@marwes-ui/presets';
-import * as React7 from 'react';
+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';
+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 { useEffect } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 
-// src/provider/marwes-provider.tsx
-var MarwesContext = React7.createContext(null);
+// src/index.ts
+var MarwesContext = React6.createContext(null);
+var loadedFonts = /* @__PURE__ */ new Set();
+var preconnected = false;
+function themeToRootStyle(theme) {
+  return {
+    ...themeToCSSVars(theme),
+    backgroundColor: theme.color.background,
+    color: theme.color.text
+  };
+}
+function applyThemeToElement(element, theme) {
+  element.setAttribute("data-marwes-theme", "true");
+  for (const [property, value] of Object.entries(themeToRootStyle(theme))) {
+    if (property === "backgroundColor") {
+      element.style.backgroundColor = value;
+      continue;
+    }
+    element.style.setProperty(property, value);
+  }
+}
+function ensureFontPreconnect() {
+  if (preconnected || typeof document === "undefined") return;
+  preconnected = true;
+  for (const href of ["https://fonts.googleapis.com", "https://fonts.gstatic.com"]) {
+    const linkElement = document.createElement("link");
+    linkElement.rel = "preconnect";
+    linkElement.href = href;
+    if (href.includes("gstatic")) {
+      linkElement.crossOrigin = "anonymous";
+    }
+    document.head.appendChild(linkElement);
+  }
+}
+function loadGoogleFontToDocument(family, weights) {
+  if (typeof document === "undefined") return;
+  const cacheKey = `${family}:${weights.join(",")}`;
+  if (loadedFonts.has(cacheKey)) return;
+  loadedFonts.add(cacheKey);
+  ensureFontPreconnect();
+  const linkElement = document.createElement("link");
+  linkElement.rel = "stylesheet";
+  linkElement.href = buildGoogleFontsUrl(family, weights);
+  linkElement.dataset.marwesFont = family;
+  document.head.appendChild(linkElement);
+}
+function loadThemeFonts(theme, config = "auto") {
+  const weights = extractUsedWeights(theme.typography);
+  const fontStacks = [theme.font.primary, theme.font.secondary];
+  for (const fontStack of fontStacks) {
+    const familyName = extractFontFamilyName(fontStack);
+    if (familyName && shouldLoadGoogleFont(familyName, config)) {
+      loadGoogleFontToDocument(familyName, weights);
+    }
+  }
+}
 function MarwesProvider({
-  preset = firstEdition,
   theme,
-  mode = "light",
+  defaultMode = ThemeMode.light,
+  mode: controlledMode,
+  fontLoading = "auto",
   onModeChange,
   children
 }) {
-  const initialSystem = React7.useMemo(() => {
-    return createSystem({
-      preset,
-      theme: theme ? { ...theme, mode } : { mode }
-    });
-  }, [preset, theme, mode]);
-  const system = React7.useMemo(() => {
-    if (mode === initialSystem.theme.mode) {
-      return initialSystem;
-    }
-    return switchMode(initialSystem, mode);
-  }, [initialSystem, mode]);
-  const themeClass = `mw-theme--${system.theme.mode}`;
-  return /* @__PURE__ */ jsx(MarwesContext.Provider, { value: { system, onModeChange }, children: /* @__PURE__ */ jsx("div", { className: themeClass, children }) });
-}
-function useSystem() {
-  const ctx = React7.useContext(MarwesContext);
+  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);
+      }
+      onModeChange?.(nextMode);
+    },
+    [isModeControlled, onModeChange]
+  );
+  const toggleMode = React6.useCallback(() => {
+    setMode(activeMode === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark);
+  }, [activeMode, setMode]);
+  const resolved = React6.useMemo(
+    () => resolveThemeInput({ ...theme ?? {}, mode: activeMode }),
+    [activeMode, theme]
+  );
+  const rootStyle = React6.useMemo(
+    () => themeToRootStyle(resolved),
+    [resolved]
+  );
+  React6.useEffect(() => {
+    if (rootRef.current) {
+      applyThemeToElement(rootRef.current, resolved);
+    }
+  }, [resolved]);
+  React6.useEffect(() => {
+    loadThemeFonts(resolved, fontLoading);
+  }, [resolved, fontLoading]);
+  return /* @__PURE__ */ jsx(MarwesContext.Provider, { value: { theme: resolved, mode: activeMode, setMode, toggleMode }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: `mw-theme--${resolved.mode}`,
+      "data-marwes-theme": "true",
+      style: rootStyle,
+      children
+    }
+  ) });
+}
+function useTheme() {
+  const ctx = React6.useContext(MarwesContext);
   if (!ctx) {
     throw new Error("MarwesProvider is missing. Wrap your app in <MarwesProvider />.");
   }
-  return ctx.system;
+  return ctx.theme;
 }
-
-// src/provider/use-theme.ts
-function useTheme() {
-  return useSystem().theme;
+function useThemeMode() {
+  const ctx = React6.useContext(MarwesContext);
+  if (!ctx) {
+    throw new Error("MarwesProvider is missing. Wrap your app in <MarwesProvider />.");
+  }
+  return {
+    mode: ctx.mode,
+    setMode: ctx.setMode,
+    toggleMode: ctx.toggleMode,
+    isDark: ctx.mode === ThemeMode.dark,
+    isLight: ctx.mode === ThemeMode.light
+  };
 }
 function Icon({
   name,
@@ -49,12 +141,13 @@ function Icon({
   "aria-label": ariaLabel,
   decorative
 }) {
-  const theme = useTheme();
-  const themeIcon = theme.icon;
-  const px = resolveIconSize(size ?? themeIcon.size);
-  const sw = resolveIconStrokeWidth(strokeWidth ?? themeIcon.strokeWidth);
+  const px = resolveIconSize(size ?? "sm");
+  const sw = resolveIconStrokeWidth(strokeWidth ?? "md");
   const def = iconRegistry[name];
-  const isDecorative = decorative || !ariaLabel;
+  const a11y = resolveIconA11y({
+    ...ariaLabel !== void 0 ? { ariaLabel } : {},
+    ...decorative !== void 0 ? { decorative } : {}
+  });
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -67,9 +160,9 @@ function Icon({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className,
-      "aria-hidden": isDecorative ? "true" : void 0,
-      "aria-label": ariaLabel,
-      role: isDecorative ? void 0 : "img",
+      "aria-hidden": a11y.ariaHidden ? "true" : void 0,
+      "aria-label": a11y.ariaLabel,
+      role: a11y.role,
       focusable: "false",
       children: def.nodes.map((iconNode, nodeIndex) => {
         const TagName = iconNode.tag;
@@ -78,15 +171,118 @@ function Icon({
     }
   );
 }
+function renderSpinnerSvgNode(spinnerSvgNode, nodeIndex) {
+  const TagName = spinnerSvgNode.tag;
+  return /* @__PURE__ */ jsx(TagName, { ...spinnerSvgNode.attrs }, nodeIndex);
+}
+function Spinner(props) {
+  const {
+    className,
+    style,
+    dataAttributes,
+    variant,
+    size,
+    decorative,
+    ariaLabel,
+    id,
+    ...nativeSpanProps
+  } = props;
+  const resolvedAriaLabel = ariaLabel ?? (typeof nativeSpanProps["aria-label"] === "string" ? nativeSpanProps["aria-label"] : void 0);
+  const spinnerOptions = {
+    ...variant !== void 0 ? { variant } : {},
+    ...size !== void 0 ? { size } : {},
+    ...decorative !== void 0 ? { decorative } : {},
+    ...resolvedAriaLabel !== void 0 ? { ariaLabel: resolvedAriaLabel } : {},
+    ...id !== void 0 ? { id } : {}
+  };
+  const renderKit = createSpinnerRecipe(spinnerOptions);
+  const mergedClassName = [renderKit.className, className].filter(Boolean).join(" ");
+  const mergedStyle = { ...renderKit.vars, ...style };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...nativeSpanProps,
+      ...renderKit.dataAttributes,
+      ...dataAttributes,
+      className: mergedClassName,
+      style: mergedStyle,
+      role: renderKit.a11y.role,
+      id: renderKit.a11y.id,
+      "aria-hidden": renderKit.a11y.ariaHidden ? "true" : void 0,
+      "aria-label": renderKit.a11y.ariaLabel,
+      "aria-live": renderKit.a11y.ariaLive,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "mw-spinner__svg",
+          viewBox: renderKit.svg.viewBox,
+          "aria-hidden": "true",
+          focusable: "false",
+          children: renderKit.svg.nodes.map(renderSpinnerSvgNode)
+        }
+      )
+    }
+  );
+}
+function ButtonSpinner(props) {
+  const { inverted = false, style, dataAttributes, ...spinnerProps } = props;
+  const spinnerStyle = {
+    "--mw-spinner-track-color": inverted ? "color-mix(in srgb, currentColor 80%, transparent)" : "color-mix(in srgb, currentColor 35%, transparent)",
+    "--mw-spinner-indicator-color": "currentColor",
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Spinner,
+    {
+      ...spinnerProps,
+      variant: props.variant ?? "classic",
+      size: props.size ?? "xs",
+      decorative: props.decorative ?? true,
+      style: spinnerStyle,
+      dataAttributes: {
+        ...dataAttributes,
+        "data-purpose": "button-loading",
+        "data-context": "button-loading"
+      }
+    }
+  );
+}
+function EmptyStateSpinner(props) {
+  return /* @__PURE__ */ jsx(
+    Spinner,
+    {
+      ...props,
+      variant: props.variant ?? "dots-round",
+      size: props.size ?? "lg",
+      decorative: props.decorative ?? true,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "empty-state",
+        "data-context": "empty-state"
+      }
+    }
+  );
+}
+function isFilledButtonVariant(variant) {
+  return variant === "primary" || variant === "success";
+}
 function Button(props) {
-  const theme = useTheme();
-  const kit = createButtonRecipe(theme, props);
+  const kit = createButtonRecipe(props);
   const style = kit.vars;
   const className = props.className ? `${kit.className} ${props.className}` : kit.className;
+  const resolvedVariant = props.variant ?? "primary";
+  const resolvedLoading = kit.loading;
+  const visibleLabel = resolvedLoading.isLoading && resolvedLoading.loadingLabel !== void 0 ? resolvedLoading.loadingLabel : props.children;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    props.iconLeft && /* @__PURE__ */ jsx(Icon, { name: props.iconLeft, size: "xs", decorative: true }),
-    props.children,
-    props.iconRight && /* @__PURE__ */ jsx(Icon, { name: props.iconRight, size: "xs", decorative: true })
+    resolvedLoading.isLoading ? /* @__PURE__ */ jsx(
+      ButtonSpinner,
+      {
+        variant: resolvedLoading.spinnerVariant,
+        inverted: isFilledButtonVariant(resolvedVariant)
+      }
+    ) : props.iconLeft ? /* @__PURE__ */ jsx(Icon, { name: props.iconLeft, size: "xs", strokeWidth: "sm", decorative: true }) : null,
+    visibleLabel,
+    !resolvedLoading.isLoading && props.iconRight ? /* @__PURE__ */ jsx(Icon, { name: props.iconRight, size: "xs", strokeWidth: "sm", decorative: true }) : null
   ] });
   if (kit.tag === "button") {
     return /* @__PURE__ */ jsx(
@@ -136,77 +332,357 @@ function Button(props) {
     }
   );
 }
-function DangerButton(props) {
-  const { confirmation = true, ...restProps } = props;
+function isDevelopmentEnvironment() {
+  const nodeProcess = globalThis.process;
+  const nodeEnv = nodeProcess?.env?.NODE_ENV;
+  if (nodeEnv) {
+    return nodeEnv !== "production";
+  }
+  const meta = import.meta;
+  if (typeof meta.env?.PROD === "boolean") {
+    return !meta.env.PROD;
+  }
+  if (meta.env?.MODE) {
+    return meta.env.MODE !== "production";
+  }
+  return true;
+}
+function warnForForbiddenPurposeProps(componentName, rawProps, forbiddenProps) {
+  if (!isDevelopmentEnvironment()) {
+    return;
+  }
+  const warningByProp = {
+    variant: "Use Button if you need a custom visual treatment.",
+    action: "Use Button if you need a custom semantic action.",
+    as: "Use Button if you need a custom element mode."
+  };
+  for (const forbiddenProp of forbiddenProps) {
+    if (!Object.prototype.hasOwnProperty.call(rawProps, forbiddenProp)) {
+      continue;
+    }
+    console.warn(
+      `[marwes] ${componentName} does not support \`${forbiddenProp}\`. ${warningByProp[forbiddenProp]}`
+    );
+  }
+}
+function omitButtonProps(rawProps, omittedKeys) {
+  const forwardedProps = { ...rawProps };
+  for (const omittedKey of omittedKeys) {
+    delete forwardedProps[omittedKey];
+  }
+  return forwardedProps;
+}
+function createPurposeButtonDataAttributes(purpose, existingDataAttributes, localDataAttributes = {}) {
+  return {
+    ...existingDataAttributes,
+    ...createPurposeSemanticAttributes(purpose),
+    ...localDataAttributes
+  };
+}
+function DestructiveButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("DestructiveButton", rawProps, ["variant", "action", "as"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action", "as", "href"]);
+  const confirmation = props.confirmation ?? true;
   return /* @__PURE__ */ jsx(
     Button,
     {
-      ...restProps,
+      ...forwardedProps,
+      as: "button",
       variant: ButtonVariant.primary,
       action: ButtonAction.delete,
-      iconRight: IconName.Minus,
+      error: true,
       confirmation,
-      dataAttributes: {
-        ...props.dataAttributes,
-        "data-destructive": "true",
-        "data-confirmation-required": confirmation ? "true" : "false"
-      }
+      dataAttributes: createPurposeButtonDataAttributes(
+        "destructive",
+        forwardedProps.dataAttributes,
+        {
+          "data-confirmation-required": confirmation ? "true" : "false"
+        }
+      )
     }
   );
 }
 function CreateButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("CreateButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
   return /* @__PURE__ */ jsx(
     Button,
     {
-      ...props,
-      action: "create",
-      variant: props.variant ?? "primary",
-      dataAttributes: {
-        ...props.dataAttributes,
+      ...forwardedProps,
+      action: ButtonAction.create,
+      variant: ButtonVariant.primary,
+      dataAttributes: createPurposeButtonDataAttributes("create", forwardedProps.dataAttributes, {
         "data-creative": "true"
-      }
+      })
     }
   );
 }
 function SubmitButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("SubmitButton", rawProps, ["variant", "action", "as"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action", "as", "href"]);
   return /* @__PURE__ */ jsx(
     Button,
     {
-      ...props,
+      ...forwardedProps,
       as: "button",
-      action: "submit",
-      dataAttributes: {
-        "data-context": "form-submit",
-        ...props.dataAttributes
-      }
+      action: ButtonAction.submit,
+      variant: ButtonVariant.primary,
+      dataAttributes: createPurposeButtonDataAttributes("submit", forwardedProps.dataAttributes)
     }
   );
 }
 function CancelButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("CancelButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
   return /* @__PURE__ */ jsx(
     Button,
     {
-      ...props,
-      action: "cancel",
-      variant: props.variant ?? "secondary",
-      dataAttributes: {
-        ...props.dataAttributes,
+      ...forwardedProps,
+      action: ButtonAction.cancel,
+      variant: ButtonVariant.neutral,
+      dataAttributes: createPurposeButtonDataAttributes("cancel", forwardedProps.dataAttributes, {
         "data-cancel": "true"
-      }
+      })
     }
   );
 }
 function LinkButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("LinkButton", rawProps, ["variant", "action", "as"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action", "as"]);
   return /* @__PURE__ */ jsx(
     Button,
     {
-      ...props,
+      ...forwardedProps,
       as: "a",
-      action: "navigate",
-      dataAttributes: {
-        ...props.dataAttributes,
-        "data-navigation": "true"
-      }
+      action: ButtonAction.navigate,
+      variant: ButtonVariant.text,
+      dataAttributes: createPurposeButtonDataAttributes(
+        "navigation",
+        forwardedProps.dataAttributes,
+        {
+          "data-navigation": "true"
+        }
+      )
+    }
+  );
+}
+function SaveButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("SaveButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.submit,
+      variant: ButtonVariant.primary,
+      dataAttributes: createPurposeButtonDataAttributes("save", forwardedProps.dataAttributes, {
+        "data-persist": "true"
+      })
+    }
+  );
+}
+function ConfirmButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("ConfirmButton", rawProps, ["variant", "action", "as"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action", "as", "href"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      as: "button",
+      action: ButtonAction.button,
+      variant: ButtonVariant.success,
+      dataAttributes: createPurposeButtonDataAttributes("confirm", forwardedProps.dataAttributes)
+    }
+  );
+}
+function VerifyButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("VerifyButton", rawProps, ["variant", "action", "as"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action", "as", "href"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      as: "button",
+      action: ButtonAction.button,
+      variant: ButtonVariant.secondary,
+      iconRight: forwardedProps.iconRight ?? IconName.CheckCircle,
+      dataAttributes: createPurposeButtonDataAttributes("verify", forwardedProps.dataAttributes, {
+        "data-verification": "true"
+      })
+    }
+  );
+}
+function EditButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("EditButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.edit,
+      variant: ButtonVariant.secondary,
+      iconRight: forwardedProps.iconRight ?? IconName.Edit,
+      dataAttributes: createPurposeButtonDataAttributes("edit", forwardedProps.dataAttributes, {
+        "data-edit": "true"
+      })
+    }
+  );
+}
+function CloseButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("CloseButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.cancel,
+      variant: ButtonVariant.neutral,
+      dataAttributes: createPurposeButtonDataAttributes("close", forwardedProps.dataAttributes, {
+        "data-close": "true"
+      })
+    }
+  );
+}
+function RefreshButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("RefreshButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.button,
+      variant: ButtonVariant.neutral,
+      iconRight: forwardedProps.iconRight ?? IconName.RefreshCw,
+      dataAttributes: createPurposeButtonDataAttributes("refresh", forwardedProps.dataAttributes, {
+        "data-refresh": "true"
+      })
+    }
+  );
+}
+function UploadButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("UploadButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.button,
+      variant: ButtonVariant.secondary,
+      iconRight: forwardedProps.iconRight ?? IconName.Upload,
+      dataAttributes: createPurposeButtonDataAttributes("upload", forwardedProps.dataAttributes, {
+        "data-transfer": "upload"
+      })
+    }
+  );
+}
+function DownloadButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("DownloadButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.button,
+      variant: ButtonVariant.secondary,
+      iconRight: forwardedProps.iconRight ?? IconName.Download,
+      dataAttributes: createPurposeButtonDataAttributes("download", forwardedProps.dataAttributes, {
+        "data-transfer": "download"
+      })
+    }
+  );
+}
+function CopyButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("CopyButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.button,
+      variant: ButtonVariant.neutral,
+      dataAttributes: createPurposeButtonDataAttributes("copy", forwardedProps.dataAttributes, {
+        "data-copy": "true"
+      })
+    }
+  );
+}
+function SearchButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("SearchButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.button,
+      variant: ButtonVariant.primary,
+      iconRight: forwardedProps.iconRight ?? IconName.Search,
+      dataAttributes: createPurposeButtonDataAttributes("search", forwardedProps.dataAttributes, {
+        "data-search": "true"
+      })
+    }
+  );
+}
+function FilterButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("FilterButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.button,
+      variant: ButtonVariant.neutral,
+      dataAttributes: createPurposeButtonDataAttributes("filter", forwardedProps.dataAttributes, {
+        "data-filter": "true"
+      })
+    }
+  );
+}
+function SortButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("SortButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.button,
+      variant: ButtonVariant.neutral,
+      dataAttributes: createPurposeButtonDataAttributes("sort", forwardedProps.dataAttributes, {
+        "data-sort": "true"
+      })
+    }
+  );
+}
+function DropdownButton(props) {
+  const rawProps = props;
+  warnForForbiddenPurposeProps("DropdownButton", rawProps, ["variant", "action"]);
+  const forwardedProps = omitButtonProps(rawProps, ["variant", "action"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...forwardedProps,
+      action: ButtonAction.button,
+      variant: ButtonVariant.secondary,
+      iconRight: forwardedProps.iconRight ?? IconName.ChevronDown,
+      dataAttributes: createPurposeButtonDataAttributes("dropdown", forwardedProps.dataAttributes, {
+        "data-dropdown": "true"
+      })
     }
   );
 }
@@ -219,24 +695,42 @@ function SecondaryButton(props) {
 function TextButton(props) {
   return /* @__PURE__ */ jsx(Button, { ...props, variant: "text", as: "button" });
 }
+function SuccessButton(props) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      variant: "success",
+      as: "button",
+      dataAttributes: createPurposeButtonDataAttributes("success", props.dataAttributes)
+    }
+  );
+}
 var RENDERKIT_EVENT = "marwes/renderkit/renderkit-update";
+var RENDERKIT_DEBUG_FLAG = "__MARWES_RENDERKIT_DEBUG__";
+function isRenderKitDebugEnabled() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const renderKitDebugWindow = window;
+  return renderKitDebugWindow[RENDERKIT_DEBUG_FLAG] === true;
+}
 function useRenderKitDebug(renderKit, componentName) {
   useEffect(() => {
-    if (typeof window !== "undefined") {
-      console.log(`[RenderKit Debug] ${componentName}:`, renderKit);
-      const event = new CustomEvent(RENDERKIT_EVENT, {
-        detail: {
-          ...renderKit,
-          _meta: { component: componentName }
-        }
-      });
-      window.dispatchEvent(event);
+    if (!isRenderKitDebugEnabled()) {
+      return;
     }
+    const event = new CustomEvent(RENDERKIT_EVENT, {
+      detail: {
+        ...renderKit,
+        _meta: { component: componentName }
+      }
+    });
+    window.dispatchEvent(event);
   }, [renderKit, componentName]);
 }
 function Input(props) {
-  const theme = useTheme();
-  const kit = createInputRecipe(theme, props);
+  const kit = createInputRecipe(props);
   useRenderKitDebug(kit, "Input");
   const style = kit.vars;
   const className = props.className ? `${kit.className} ${props.className}` : kit.className;
@@ -266,77 +760,443 @@ function Input(props) {
     }
   );
 }
-function Checkbox(props) {
-  const { onCheckedChange, onChange, ...coreProps } = props;
-  const theme = useTheme();
-  const kit = checkboxRecipe({ ...coreProps, theme });
-  const inputRef = React7.useRef(null);
-  React7.useLayoutEffect(() => {
-    const el = inputRef.current;
-    if (!el) return;
-    el.indeterminate = kit.indeterminate;
-  }, [kit.indeterminate]);
-  const handleChange = (e) => {
-    onChange?.(e);
-    onCheckedChange?.(e.currentTarget.checked);
-  };
-  const { a11y } = kit;
+function SelectArrowIcon(props) {
   return /* @__PURE__ */ jsx(
-    "input",
+    "svg",
     {
-      ref: inputRef,
-      type: "checkbox",
-      className: kit.className,
-      style: kit.vars,
-      id: a11y.id,
-      name: a11y.name,
-      value: a11y.value,
-      disabled: a11y.disabled === true,
-      required: a11y.required === true,
-      "aria-label": a11y.ariaLabel,
-      "aria-labelledby": a11y.ariaLabelledBy,
-      "aria-describedby": a11y.ariaDescribedBy,
-      "aria-checked": a11y.ariaChecked,
-      "aria-invalid": a11y.ariaInvalid === true ? true : void 0,
-      checked: kit.checked,
-      defaultChecked: kit.defaultChecked,
-      onChange: handleChange
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: props.className,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M11.5288 5.52876C11.7891 5.26841 12.2111 5.26841 12.4715 5.52876C12.7318 5.78911 12.7318 6.21114 12.4715 6.47147L8.47148 10.4715C8.21115 10.7318 7.78912 10.7318 7.52877 10.4715L3.52876 6.47147C3.26841 6.21112 3.26841 5.78911 3.52876 5.52876C3.78911 5.26841 4.21112 5.26841 4.47147 5.52876L6.58591 7.6432C7.36696 8.42425 8.63329 8.42425 9.41434 7.6432L11.5288 5.52876Z",
+          fill: "currentColor"
+        }
+      )
     }
   );
 }
-var Divider = React7.forwardRef((props, ref) => {
-  const { className: customClassName, style: customStyle, ...opts } = props;
-  const theme = useTheme();
-  const kit = createDividerRecipe(theme, opts);
-  const style = { ...kit.vars, ...customStyle };
-  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
-  return /* @__PURE__ */ jsx("hr", { ref, ...kit.a11y, ...kit.dataAttributes, className, style });
-});
-Divider.displayName = "Divider";
-function H1(props) {
-  const { children, className: customClassName, style: customStyle, ...opts } = props;
-  const theme = useTheme();
-  const kit = headingRecipe({ ...opts, level: 1 }, theme);
-  const style = { ...kit.vars, ...customStyle };
-  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
-  return /* @__PURE__ */ jsx("h1", { id: kit.a11y.id, "aria-label": kit.a11y.ariaLabel, className, style, children });
+function getInitialSelectValue(props) {
+  if (props.value !== void 0) {
+    return props.value;
+  }
+  if (props.defaultValue !== void 0) {
+    return props.defaultValue;
+  }
+  if (props.placeholder !== void 0) {
+    return "";
+  }
+  return props.options[0]?.value ?? "";
 }
-function H2(props) {
-  const { children, className: customClassName, style: customStyle, ...opts } = props;
-  const theme = useTheme();
-  const kit = headingRecipe({ ...opts, level: 2 }, theme);
-  const style = { ...kit.vars, ...customStyle };
-  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
-  return /* @__PURE__ */ jsx("h2", { id: kit.a11y.id, "aria-label": kit.a11y.ariaLabel, className, style, children });
+function Select(props) {
+  const kit = createSelectRecipe(props);
+  const mode = resolveSelectMode(props);
+  const isControlled = props.value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React6.useState(
+    () => getInitialSelectValue(props)
+  );
+  useRenderKitDebug(kit, "Select");
+  const style = kit.vars;
+  const className = props.className ? `${kit.className} ${props.className}` : kit.className;
+  const value = isControlled ? props.value ?? "" : uncontrolledValue;
+  const hasPlaceholder = props.placeholder !== void 0;
+  const placeholderSelected = hasPlaceholder && value === "";
+  const handleChange = (e) => {
+    const nextValue = e.target.value;
+    if (!isControlled) {
+      setUncontrolledValue(nextValue);
+    }
+    props.onValueChange?.(nextValue);
+  };
+  const selectElement = /* @__PURE__ */ jsxs(
+    "select",
+    {
+      className,
+      style,
+      "data-placeholder-selected": placeholderSelected ? "true" : void 0,
+      id: kit.a11y.id,
+      name: kit.a11y.name,
+      disabled: kit.a11y.disabled,
+      required: kit.a11y.required,
+      "aria-label": kit.a11y.ariaLabel,
+      "aria-invalid": kit.a11y.ariaInvalid,
+      "aria-describedby": kit.a11y.ariaDescribedBy,
+      value,
+      onChange: handleChange,
+      children: [
+        props.placeholder ? /* @__PURE__ */ jsx("option", { value: "", disabled: props.required ? true : void 0, children: props.placeholder }) : null,
+        props.options.map((option) => /* @__PURE__ */ jsx(
+          "option",
+          {
+            value: option.value,
+            disabled: option.disabled ? true : void 0,
+            children: option.label
+          },
+          option.value
+        ))
+      ]
+    }
+  );
+  if (mode === "native") {
+    return selectElement;
+  }
+  return /* @__PURE__ */ jsxs("span", { className: "mw-select__control", children: [
+    selectElement,
+    /* @__PURE__ */ jsx(SelectArrowIcon, { className: "mw-select__control-icon" })
+  ] });
 }
-function H3(props) {
-  const { children, className: customClassName, style: customStyle, ...opts } = props;
-  const theme = useTheme();
-  const kit = headingRecipe({ ...opts, level: 3 }, theme);
-  const style = { ...kit.vars, ...customStyle };
-  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
-  return /* @__PURE__ */ jsx("h3", { id: kit.a11y.id, "aria-label": kit.a11y.ariaLabel, className, style, children });
+function Textarea(props) {
+  const kit = createTextareaRecipe(props);
+  useRenderKitDebug(kit, "Textarea");
+  const style = kit.vars;
+  const className = props.className ? `${kit.className} ${props.className}` : kit.className;
+  const handleChange = (e) => {
+    props.onValueChange?.(e.target.value);
+  };
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className,
+      style,
+      id: kit.a11y.id,
+      name: kit.a11y.name,
+      inputMode: kit.a11y.inputMode,
+      autoComplete: kit.a11y.autoComplete,
+      placeholder: kit.a11y.placeholder,
+      disabled: kit.a11y.disabled,
+      readOnly: kit.a11y.readOnly,
+      required: kit.a11y.required,
+      rows: kit.a11y.rows,
+      cols: kit.a11y.cols,
+      "aria-label": kit.a11y.ariaLabel,
+      "aria-invalid": kit.a11y.ariaInvalid,
+      "aria-describedby": kit.a11y.ariaDescribedBy,
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: handleChange
+    }
+  );
+}
+var formatLabels = {
+  bold: "Bold",
+  italic: "Italic",
+  underline: "Underline"
+};
+function getRichTextCommandDocument() {
+  return document;
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") {
+        ref(value);
+        continue;
+      }
+      ref.current = value;
+    }
+  };
+}
+function isNodeWithinEditor(node, editorElement) {
+  if (!node || !editorElement) {
+    return false;
+  }
+  return editorElement.contains(node.nodeType === Node.TEXT_NODE ? node.parentNode : node);
+}
+function getActiveFormatsFromSelection(editorElement) {
+  if (!editorElement || typeof window === "undefined" || typeof document === "undefined") {
+    return [];
+  }
+  const commandDocument = getRichTextCommandDocument();
+  const selection = window.getSelection();
+  const anchorNode = selection?.anchorNode ?? null;
+  if (!anchorNode || !isNodeWithinEditor(anchorNode, editorElement)) {
+    return [];
+  }
+  const activeFormats = /* @__PURE__ */ new Set();
+  if (typeof commandDocument.queryCommandState === "function") {
+    for (const format of Object.keys(richTextCommandByFormat)) {
+      try {
+        if (commandDocument.queryCommandState(richTextCommandByFormat[format])) {
+          activeFormats.add(format);
+        }
+      } catch {
+      }
+    }
+  }
+  if (activeFormats.size > 0) {
+    return Array.from(activeFormats);
+  }
+  let currentNode = anchorNode.nodeType === Node.TEXT_NODE ? anchorNode.parentNode : anchorNode;
+  while (currentNode && currentNode !== editorElement) {
+    if (!(currentNode instanceof HTMLElement)) {
+      currentNode = currentNode.parentNode;
+      continue;
+    }
+    const tagName = currentNode.tagName.toLowerCase();
+    if (tagName === "strong" || tagName === "b") activeFormats.add("bold");
+    if (tagName === "em" || tagName === "i") activeFormats.add("italic");
+    if (tagName === "u") activeFormats.add("underline");
+    currentNode = currentNode.parentNode;
+  }
+  return Array.from(activeFormats);
+}
+function ensureEditorSelection(editorElement) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  editorElement.focus();
+  const selection = window.getSelection();
+  const anchorNode = selection?.anchorNode ?? null;
+  if (anchorNode && isNodeWithinEditor(anchorNode, editorElement)) {
+    return;
+  }
+  const range = document.createRange();
+  range.selectNodeContents(editorElement);
+  range.collapse(false);
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+}
+function getFormatTagNames(format) {
+  if (format === "bold") return ["strong", "b"];
+  if (format === "italic") return ["em", "i"];
+  return ["u"];
+}
+function findNearestFormatElement(node, editorElement, format) {
+  const tagNames = getFormatTagNames(format);
+  let currentNode = node?.nodeType === Node.TEXT_NODE ? node.parentNode : node;
+  while (currentNode && currentNode !== editorElement) {
+    if (currentNode instanceof HTMLElement && tagNames.includes(currentNode.tagName.toLowerCase())) {
+      return currentNode;
+    }
+    currentNode = currentNode.parentNode;
+  }
+  return null;
 }
+function exitActiveFormatAtCaret(editorElement, format) {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return false;
+  }
+  const range = selection.getRangeAt(0);
+  const anchorNode = selection.anchorNode;
+  if (!range.collapsed || !anchorNode || !isNodeWithinEditor(anchorNode, editorElement)) {
+    return false;
+  }
+  const formatElement = findNearestFormatElement(anchorNode, editorElement, format);
+  if (!formatElement || !formatElement.parentNode) {
+    return false;
+  }
+  const trailingRange = document.createRange();
+  trailingRange.setStart(range.startContainer, range.startOffset);
+  trailingRange.setEndAfter(formatElement);
+  const trailingFragment = trailingRange.extractContents();
+  const caretTextNode = document.createTextNode("\u200B");
+  const parentNode = formatElement.parentNode;
+  parentNode.insertBefore(caretTextNode, formatElement.nextSibling);
+  parentNode.insertBefore(trailingFragment, caretTextNode.nextSibling);
+  if (formatElement.textContent?.replaceAll("\u200B", "").trim().length === 0) {
+    formatElement.remove();
+  }
+  const nextRange = document.createRange();
+  nextRange.setStart(caretTextNode, 1);
+  nextRange.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(nextRange);
+  return true;
+}
+var RichText = React6.forwardRef((props, forwardedRef) => {
+  const kit = createRichTextRecipe(props);
+  const allowedFormats = React6.useMemo(
+    () => resolveRichTextAllowedFormats(props.allowedFormats),
+    [props.allowedFormats]
+  );
+  const normalizedControlledValue = React6.useMemo(
+    () => normalizeRichTextHtml(props.value),
+    [props.value]
+  );
+  const initialUncontrolledValue = React6.useMemo(
+    () => normalizeRichTextHtml(props.defaultValue),
+    [props.defaultValue]
+  );
+  const isControlled = props.value !== void 0;
+  const [uncontrolledHtml, setUncontrolledHtml] = React6.useState(initialUncontrolledValue);
+  const [isEditorEmpty, setIsEditorEmpty] = React6.useState(
+    isRichTextHtmlEmpty(isControlled ? normalizedControlledValue : initialUncontrolledValue)
+  );
+  const [activeFormats, setActiveFormats] = React6.useState([]);
+  const editorElementRef = React6.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(
+    (nextHtml) => {
+      const normalizedHtml = normalizeRichTextHtml(nextHtml);
+      const emptyState = isRichTextHtmlEmpty(normalizedHtml);
+      if (!isControlled) {
+        setUncontrolledHtml(normalizedHtml);
+      }
+      setIsEditorEmpty(emptyState);
+      props.onValueChange?.(normalizedHtml);
+      return normalizedHtml;
+    },
+    [isControlled, props]
+  );
+  const refreshActiveFormats = React6.useCallback(() => {
+    setActiveFormats(getActiveFormatsFromSelection(editorElementRef.current));
+  }, []);
+  React6.useLayoutEffect(() => {
+    const editorElement = editorElementRef.current;
+    if (!editorElement) {
+      return;
+    }
+    const normalizedDomHtml = normalizeRichTextHtml(editorElement.innerHTML);
+    if (normalizedDomHtml !== editorHtml) {
+      editorElement.innerHTML = editorHtml;
+    }
+    setIsEditorEmpty(isRichTextHtmlEmpty(editorHtml));
+  }, [editorHtml]);
+  React6.useEffect(() => {
+    if (typeof document === "undefined") {
+      return void 0;
+    }
+    const handleSelectionChange = () => {
+      refreshActiveFormats();
+    };
+    document.addEventListener("selectionchange", handleSelectionChange);
+    return () => {
+      document.removeEventListener("selectionchange", handleSelectionChange);
+    };
+  }, [refreshActiveFormats]);
+  const handleInput = () => {
+    const editorElement = editorElementRef.current;
+    if (!editorElement || props.disabled || props.readOnly) {
+      return;
+    }
+    syncEditorState(editorElement.innerHTML);
+    refreshActiveFormats();
+  };
+  const toggleFormat = (format) => {
+    if (props.disabled || props.readOnly || typeof document === "undefined") {
+      return;
+    }
+    const commandDocument = getRichTextCommandDocument();
+    const editorElement = editorElementRef.current;
+    if (!editorElement) {
+      return;
+    }
+    ensureEditorSelection(editorElement);
+    const activeFormatsBeforeToggle = getActiveFormatsFromSelection(editorElement);
+    if (exitActiveFormatAtCaret(editorElement, format)) {
+      if (typeof commandDocument.queryCommandState === "function" && commandDocument.queryCommandState(richTextCommandByFormat[format]) && typeof commandDocument.execCommand === "function") {
+        commandDocument.execCommand(richTextCommandByFormat[format]);
+      }
+      if (typeof commandDocument.queryCommandState === "function" && typeof commandDocument.execCommand === "function") {
+        for (const activeFormat of activeFormatsBeforeToggle) {
+          if (activeFormat === format) {
+            continue;
+          }
+          if (!commandDocument.queryCommandState(richTextCommandByFormat[activeFormat])) {
+            commandDocument.execCommand(richTextCommandByFormat[activeFormat]);
+          }
+        }
+      }
+      syncEditorState(editorElement.innerHTML);
+      refreshActiveFormats();
+      return;
+    }
+    if (typeof commandDocument.execCommand === "function") {
+      commandDocument.execCommand(richTextCommandByFormat[format]);
+    }
+    syncEditorState(editorElement.innerHTML);
+    refreshActiveFormats();
+  };
+  const handleKeyDown = (event) => {
+    if (!(event.metaKey || event.ctrlKey) || event.altKey) {
+      return;
+    }
+    const formatByKey = {
+      b: "bold",
+      i: "italic",
+      u: "underline"
+    };
+    const requestedFormat = formatByKey[event.key.toLowerCase()];
+    if (!requestedFormat || !allowedFormats.includes(requestedFormat)) {
+      return;
+    }
+    event.preventDefault();
+    toggleFormat(requestedFormat);
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style, ...kit.dataAttributes, children: [
+    showToolbar && /* @__PURE__ */ jsx("div", { className: "mw-rich-text__toolbar", "data-rich-text-toolbar": true, children: allowedFormats.map((format) => {
+      const isActive = activeFormats.includes(format);
+      const iconName = format === "bold" ? "bold" : format === "italic" ? "italic" : "underline";
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "mw-rich-text__toolbar-button",
+          "data-format": format,
+          "data-active": isActive ? "true" : void 0,
+          "aria-label": formatLabels[format],
+          "aria-pressed": isActive,
+          disabled: props.disabled,
+          onMouseDown: (event) => {
+            event.preventDefault();
+          },
+          onClick: () => {
+            toggleFormat(format);
+          },
+          children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: "xs", decorative: true })
+        },
+        format
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mergeRefs(editorElementRef, forwardedRef),
+        className: "mw-rich-text__editor",
+        "data-rich-text-editor": true,
+        "data-empty": isEditorEmpty ? "true" : void 0,
+        "data-placeholder": props.placeholder,
+        id: kit.a11y.id,
+        role: kit.a11y.role,
+        tabIndex: kit.a11y.tabIndex,
+        "aria-label": kit.a11y.ariaLabel,
+        "aria-labelledby": kit.a11y.ariaLabelledBy,
+        "aria-describedby": kit.a11y.ariaDescribedBy,
+        "aria-invalid": kit.a11y.ariaInvalid,
+        "aria-disabled": kit.a11y.ariaDisabled,
+        "aria-readonly": kit.a11y.ariaReadOnly,
+        "aria-required": kit.a11y.ariaRequired,
+        "aria-multiline": kit.a11y.ariaMultiline,
+        contentEditable: !props.disabled && !props.readOnly,
+        suppressContentEditableWarning: true,
+        onInput: handleInput,
+        onKeyDown: handleKeyDown,
+        onFocus: refreshActiveFormats,
+        onBlur: () => {
+          syncEditorState(editorElementRef.current?.innerHTML ?? "");
+          setActiveFormats([]);
+        }
+      }
+    ),
+    props.name && /* @__PURE__ */ jsx("input", { type: "hidden", name: props.name, value: editorHtml, disabled: props.disabled })
+  ] });
+});
+RichText.displayName = "RichText";
 function Paragraph(props) {
   const { children, className: customClassName, style: customStyle, ...opts } = props;
   const theme = useTheme();
@@ -348,62 +1208,37 @@ function Paragraph(props) {
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function CheckboxField(props) {
-  const reactId = React7.useId();
-  const id = props.id ?? `mw-checkbox-${reactId}`;
-  const hasDescription = props.description !== void 0;
-  const hasError = props.error !== void 0;
-  const descId = hasDescription ? `${id}-desc` : void 0;
-  const errorId = hasError ? `${id}-error` : void 0;
-  const describedByParts = [props.ariaDescribedBy, descId, errorId].filter(Boolean);
-  const mergedDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
-  const disabled = props.checkbox.disabled || false;
-  const invalid = hasError || props.checkbox.invalid || false;
-  const wrapperClass = cx(
-    "mw-checkbox-field",
-    disabled && "mw-checkbox-field--disabled",
-    invalid && "mw-checkbox-field--invalid"
-  );
-  const checkboxProps = {
-    ...props.checkbox,
-    id,
-    invalid
-  };
-  if (mergedDescribedBy) {
-    checkboxProps.ariaDescribedBy = mergedDescribedBy;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mw-checkbox-field__row", children: [
-      /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps }),
-      /* @__PURE__ */ jsx("label", { className: "mw-checkbox-field__label", htmlFor: id, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) })
-    ] }),
-    hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-checkbox-field__description", id: descId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.description }) }),
-    hasError && /* @__PURE__ */ jsx("div", { className: "mw-checkbox-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
-  ] });
-}
-function cx2(...parts) {
-  return parts.filter(Boolean).join(" ");
+function hasTextContent(value) {
+  return value !== void 0 && value.trim().length > 0;
 }
 function InputField(props) {
-  const reactId = React7.useId();
+  const reactId = React6.useId();
   const id = props.id ?? `mw-input-${reactId}`;
   const isPasswordField = props.input.type === "password";
-  const [showPassword, setShowPassword] = React7.useState(false);
+  const [showPassword, setShowPassword] = React6.useState(false);
   const isSearchField = props.input.type === "search";
-  const [searchValue, setSearchValue] = React7.useState(
+  const [searchValue, setSearchValue] = React6.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);
-  const hasHelperText = props.helperText !== void 0;
-  const hasError = props.error !== void 0;
-  const helperTextId = hasHelperText ? `${id}-helper` : void 0;
-  const errorId = hasError ? `${id}-error` : void 0;
-  const describedByParts = [props.ariaDescribedBy, helperTextId, errorId].filter(Boolean);
-  const mergedDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
+  const hasHelperText = hasTextContent(props.helperText);
+  const hasError = hasTextContent(props.error);
+  const {
+    helperTextId,
+    errorId,
+    describedBy: mergedDescribedBy
+  } = buildInputFieldA11yIds({
+    id,
+    hasHelperText,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
   const disabled = props.input.disabled || false;
   const readOnly = props.input.readOnly || false;
   const invalid = hasError || props.input.invalid || false;
-  const wrapperClass = cx2(
+  const showSearchClearButton = hasSearchValue && !disabled && !readOnly;
+  const showSearchIcon = isSearchField && !showSearchClearButton;
+  const wrapperClass = cx(
     "mw-input-field",
     disabled && "mw-input-field--disabled",
     invalid && "mw-input-field--invalid",
@@ -440,8 +1275,9 @@ function InputField(props) {
   return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
     /* @__PURE__ */ jsx("label", { className: "mw-input-field__label", htmlFor: id, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) }),
     /* @__PURE__ */ jsxs("div", { className: "mw-input-field__input-wrapper", children: [
+      props.leadingSymbol && /* @__PURE__ */ jsx("span", { className: "mw-input-field__leading-symbol", "aria-hidden": "true", children: props.leadingSymbol }),
       /* @__PURE__ */ jsx(Input, { ...inputProps }),
-      isPasswordField && /* @__PURE__ */ jsx(
+      isPasswordField && !disabled && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -452,7 +1288,8 @@ function InputField(props) {
           children: /* @__PURE__ */ jsx(Icon, { name: showPassword ? "eyeOff" : "eye", size: "xs", decorative: true })
         }
       ),
-      hasSearchValue && /* @__PURE__ */ jsx(
+      showSearchIcon && /* @__PURE__ */ jsx("span", { className: "mw-input-field__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { name: "search", size: "xs", decorative: true }) }),
+      showSearchClearButton && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -468,61 +1305,2956 @@ function InputField(props) {
     hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
   ] });
 }
-function SearchField(props) {
-  const enhancedInput = {
-    ...props.input,
-    type: "search",
-    inputMode: "search"
-  };
-  return /* @__PURE__ */ jsx("div", { "data-purpose": "search", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+function cx2(...parts) {
+  return parts.filter(Boolean).join(" ");
 }
-function PasswordField(props) {
-  const { autoComplete = "current-password", ...restProps } = props;
-  const enhancedInput = {
-    ...props.input,
-    type: "password",
-    autoComplete
-  };
-  return /* @__PURE__ */ jsx("div", { "data-purpose": "password", children: /* @__PURE__ */ jsx(InputField, { ...restProps, input: enhancedInput }) });
+function hasTextContent2(value) {
+  return value !== void 0 && value.trim().length > 0;
 }
-function EmailField(props) {
-  const enhancedInput = {
-    ...props.input,
-    type: "email",
-    inputMode: "email",
-    autoComplete: "email"
+function InputOtp(props) {
+  const reactId = React6.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(() => {
+    return sanitizeInputOtpValue(props.defaultValue, otpLength);
+  });
+  const currentValue = sanitizeInputOtpValue(
+    isControlled ? props.value : uncontrolledValue,
+    otpLength
+  );
+  const {
+    helperTextId,
+    errorId,
+    describedBy: mergedDescribedBy
+  } = buildInputFieldA11yIds({
+    id,
+    hasHelperText,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const recipeOptions = {
+    id,
+    value: currentValue,
+    length: otpLength,
+    invalid
   };
-  return /* @__PURE__ */ jsx("div", { "data-purpose": "email", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
-}
-function PhoneField(props) {
-  const enhancedInput = {
-    ...props.input,
-    type: "tel",
-    inputMode: "tel",
-    autoComplete: "tel"
+  if (props.name) {
+    recipeOptions.name = props.name;
+  }
+  if (props.placeholderCharacter) {
+    recipeOptions.placeholderCharacter = props.placeholderCharacter;
+  }
+  if (props.disabled) {
+    recipeOptions.disabled = true;
+  }
+  if (props.readOnly) {
+    recipeOptions.readOnly = true;
+  }
+  if (props.required) {
+    recipeOptions.required = true;
+  }
+  if (mergedDescribedBy) {
+    recipeOptions.describedBy = mergedDescribedBy;
+  }
+  if (props.ariaLabel) {
+    recipeOptions.ariaLabel = props.ariaLabel;
+  }
+  const kit = createInputOtpRecipe(recipeOptions);
+  const className = cx2(kit.className, props.className);
+  const style = kit.vars;
+  const handleChange = (event) => {
+    const nextValue = sanitizeInputOtpValue(event.target.value, otpLength);
+    if (!isControlled) {
+      setUncontrolledValue(nextValue);
+    }
+    props.onValueChange?.(nextValue);
   };
-  return /* @__PURE__ */ jsx("div", { "data-purpose": "phone", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style,
+      "data-component": "input-otp",
+      "data-invalid": invalid ? "true" : void 0,
+      "data-disabled": props.disabled ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("label", { className: "mw-input-otp__label", htmlFor: id, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mw-input-otp__cells", children: [
+          kit.displayCells.map((displayCell) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cx2("mw-input-otp__cell", displayCell.filled && "mw-input-otp__cell--filled"),
+              "aria-hidden": "true",
+              children: displayCell.character
+            },
+            displayCell.key
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: kit.a11y.id,
+              className: "mw-input-otp__input",
+              type: "text",
+              name: kit.a11y.name,
+              inputMode: kit.a11y.inputMode,
+              autoComplete: kit.a11y.autoComplete,
+              maxLength: kit.a11y.maxLength,
+              pattern: kit.a11y.pattern,
+              disabled: kit.a11y.disabled,
+              readOnly: kit.a11y.readOnly,
+              required: kit.a11y.required,
+              "aria-label": kit.a11y.ariaLabel,
+              "aria-invalid": kit.a11y.ariaInvalid,
+              "aria-describedby": kit.a11y.ariaDescribedBy,
+              value: kit.displayValue,
+              onChange: handleChange
+            }
+          )
+        ] }),
+        hasError ? /* @__PURE__ */ jsx("div", { className: "mw-input-otp__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) }) : hasHelperText ? /* @__PURE__ */ jsx("div", { className: "mw-input-otp__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.helperText }) }) : null
+      ]
+    }
+  );
 }
-function URLField(props) {
-  const enhancedInput = {
-    ...props.input,
-    type: "url",
-    inputMode: "url",
-    autoComplete: "url"
-  };
-  return /* @__PURE__ */ jsx("div", { "data-purpose": "url", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+function cx3(...parts) {
+  return parts.filter(Boolean).join(" ");
 }
-function CurrencyField(props) {
-  const { currency, ...restProps } = props;
-  const enhancedInput = {
-    ...props.input,
-    type: "text",
-    inputMode: "decimal"
-  };
-  const helperText = currency ? props.helperText ? `${props.helperText} (${currency})` : `Amount in ${currency}` : props.helperText;
-  return /* @__PURE__ */ jsx("div", { "data-purpose": "currency", "data-currency": currency, children: /* @__PURE__ */ jsx(InputField, { ...restProps, input: enhancedInput, helperText: helperText || "" }) });
+function hasTextContent3(value) {
+  return value !== void 0 && value.trim().length > 0;
+}
+function getInitialSelectValue2(props) {
+  if (props.value !== void 0) {
+    return props.value;
+  }
+  if (props.defaultValue !== void 0) {
+    return props.defaultValue;
+  }
+  if (props.placeholder !== void 0) {
+    return "";
+  }
+  return props.options[0]?.value ?? "";
+}
+function getFirstEnabledOptionIndex(options) {
+  return options.findIndex((option) => !option.disabled);
+}
+function getLastEnabledOptionIndex(options) {
+  for (let index = options.length - 1; index >= 0; index -= 1) {
+    if (!options[index]?.disabled) {
+      return index;
+    }
+  }
+  return -1;
+}
+function getSelectedOptionIndex(options, value) {
+  return options.findIndex((option) => option.value === value && !option.disabled);
+}
+function getInitialActiveOptionIndex(options, value) {
+  const selectedIndex = getSelectedOptionIndex(options, value);
+  if (selectedIndex !== -1) {
+    return selectedIndex;
+  }
+  return getFirstEnabledOptionIndex(options);
+}
+function getNextEnabledOptionIndex(options, currentIndex, direction) {
+  if (options.length === 0) {
+    return -1;
+  }
+  let nextIndex = currentIndex;
+  for (let attempts = 0; attempts < options.length; attempts += 1) {
+    nextIndex = (nextIndex + direction + options.length) % options.length;
+    if (!options[nextIndex]?.disabled) {
+      return nextIndex;
+    }
+  }
+  return currentIndex;
+}
+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 value = isControlled ? select.value ?? "" : internalValue;
+  const [open, setOpen] = React6.useState(false);
+  const [activeIndex, setActiveIndex] = React6.useState(
+    () => getInitialActiveOptionIndex(select.options, value)
+  );
+  const rootRef = React6.useRef(null);
+  const buttonRef = React6.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(() => {
+    if (!open) {
+      return;
+    }
+    function handlePointerDown(event) {
+      if (rootRef.current?.contains(event.target)) {
+        return;
+      }
+      setOpen(false);
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [open]);
+  React6.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    setActiveIndex(getInitialActiveOptionIndex(select.options, value));
+  }, [open, select.options, value]);
+  React6.useEffect(() => {
+    if (!select.disabled) {
+      return;
+    }
+    setOpen(false);
+  }, [select.disabled]);
+  const commitValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    select.onValueChange?.(nextValue);
+  };
+  const selectOptionAtIndex = (index) => {
+    const option = select.options[index];
+    if (!option || option.disabled) {
+      return;
+    }
+    commitValue(option.value);
+    setOpen(false);
+    buttonRef.current?.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (select.disabled) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActiveIndex(getInitialActiveOptionIndex(select.options, value));
+          return;
+        }
+        setActiveIndex((currentIndex) => getNextEnabledOptionIndex(select.options, currentIndex, 1));
+        return;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActiveIndex(getInitialActiveOptionIndex(select.options, value));
+          return;
+        }
+        setActiveIndex(
+          (currentIndex) => getNextEnabledOptionIndex(select.options, currentIndex, -1)
+        );
+        return;
+      }
+      case "Home": {
+        if (!open) {
+          return;
+        }
+        event.preventDefault();
+        setActiveIndex(getFirstEnabledOptionIndex(select.options));
+        return;
+      }
+      case "End": {
+        if (!open) {
+          return;
+        }
+        event.preventDefault();
+        setActiveIndex(getLastEnabledOptionIndex(select.options));
+        return;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActiveIndex(getInitialActiveOptionIndex(select.options, value));
+          return;
+        }
+        if (activeIndex !== -1) {
+          selectOptionAtIndex(activeIndex);
+        }
+        return;
+      }
+      case "Escape": {
+        if (!open) {
+          return;
+        }
+        event.preventDefault();
+        setOpen(false);
+        return;
+      }
+      case "Tab": {
+        setOpen(false);
+        return;
+      }
+      default:
+        return;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cx3("mw-select-field__control", open && "mw-select-field__control--open"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: buttonRef,
+            id,
+            type: "button",
+            className: cx3(
+              "mw-select-field__trigger",
+              placeholderSelected && "mw-select-field__trigger--placeholder",
+              select.invalid && "is-invalid",
+              open && "mw-select-field__trigger--open"
+            ),
+            role: "combobox",
+            "aria-controls": listboxId,
+            "aria-expanded": open,
+            "aria-haspopup": "listbox",
+            "aria-describedby": select.describedBy,
+            "aria-invalid": select.invalid ? "true" : void 0,
+            "aria-required": select.required ? "true" : void 0,
+            "aria-activedescendant": open && activeIndex !== -1 ? `${id}-option-${activeIndex}` : void 0,
+            disabled: select.disabled,
+            "data-placeholder-selected": placeholderSelected ? "true" : void 0,
+            onClick: () => {
+              if (select.disabled) {
+                return;
+              }
+              setOpen((currentOpen) => !currentOpen);
+            },
+            onKeyDown: handleKeyDown,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "mw-select-field__trigger-text", children: displayText }),
+              /* @__PURE__ */ jsx(SelectArrowIcon, { className: "mw-select-field__trigger-icon" })
+            ]
+          }
+        ),
+        select.name ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-hidden": "true",
+            className: "mw-select-field__proxy-input",
+            name: select.name,
+            type: "hidden",
+            value,
+            readOnly: true
+          }
+        ) : null,
+        open ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "mw-select-field__list", id: listboxId, role: "listbox", tabIndex: -1, children: select.options.map((option, optionIndex) => {
+          const selected = option.value === value;
+          const active = optionIndex === activeIndex;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: `${id}-option-${optionIndex}`,
+              className: cx3(
+                "mw-select-field__option",
+                active && "mw-select-field__option--active",
+                selected && "mw-select-field__option--selected",
+                option.disabled && "mw-select-field__option--disabled"
+              ),
+              role: "option",
+              "aria-selected": selected,
+              "aria-disabled": option.disabled ? "true" : void 0,
+              tabIndex: -1,
+              onClick: () => selectOptionAtIndex(optionIndex),
+              onKeyDown: (event) => {
+                if (option.disabled) {
+                  return;
+                }
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  selectOptionAtIndex(optionIndex);
+                }
+              },
+              onMouseDown: (event) => event.preventDefault(),
+              onMouseEnter: () => {
+                if (!option.disabled) {
+                  setActiveIndex(optionIndex);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "mw-select-field__option-label", children: option.label }),
+                selected ? /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    className: "mw-select-field__option-check",
+                    name: IconName.Check,
+                    size: "xs",
+                    decorative: true
+                  }
+                ) : null
+              ]
+            },
+            option.value
+          );
+        }) }) }) : null
+      ]
+    }
+  );
+}
+function SelectField(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-select-${reactId}`;
+  const mode = resolveSelectMode(props.select);
+  const hasHelperText = hasTextContent3(props.helperText);
+  const hasError = hasTextContent3(props.error);
+  const {
+    helperTextId,
+    errorId,
+    describedBy: mergedDescribedBy
+  } = buildInputFieldA11yIds({
+    id,
+    hasHelperText,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const disabled = props.select.disabled || false;
+  const invalid = hasError || props.select.invalid || false;
+  const wrapperClass = cx3(
+    "mw-input-field",
+    "mw-input-field--select",
+    mode === "marwes" && "mw-input-field--select-marwes",
+    disabled && "mw-input-field--disabled",
+    invalid && "mw-input-field--invalid"
+  );
+  const selectProps = {
+    ...props.select,
+    id,
+    invalid
+  };
+  if (mergedDescribedBy) {
+    selectProps.describedBy = mergedDescribedBy;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    /* @__PURE__ */ jsx("label", { className: "mw-input-field__label", htmlFor: id, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) }),
+    /* @__PURE__ */ jsx("div", { className: "mw-input-field__input-wrapper", children: mode === "native" ? /* @__PURE__ */ jsx(Select, { ...selectProps, native: true }) : /* @__PURE__ */ jsx(MarwesSelectFieldControl, { id, select: selectProps }) }),
+    hasHelperText && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.helperText }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
+  ] });
+}
+function cx4(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasTextContent4(value) {
+  return value !== void 0 && value.trim().length > 0;
+}
+function TextareaField(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-textarea-${reactId}`;
+  const hasHelperText = hasTextContent4(props.helperText);
+  const hasError = hasTextContent4(props.error);
+  const {
+    helperTextId,
+    errorId,
+    describedBy: mergedDescribedBy
+  } = buildInputFieldA11yIds({
+    id,
+    hasHelperText,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const disabled = props.textarea.disabled || false;
+  const readOnly = props.textarea.readOnly || false;
+  const invalid = hasError || props.textarea.invalid || false;
+  const wrapperClass = cx4(
+    "mw-input-field",
+    "mw-input-field--textarea",
+    disabled && "mw-input-field--disabled",
+    invalid && "mw-input-field--invalid",
+    readOnly && "mw-input-field--readonly"
+  );
+  const textareaProps = {
+    ...props.textarea,
+    id,
+    invalid
+  };
+  if (mergedDescribedBy) {
+    textareaProps.describedBy = mergedDescribedBy;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    /* @__PURE__ */ jsx("label", { className: "mw-input-field__label", htmlFor: id, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) }),
+    /* @__PURE__ */ jsx("div", { className: "mw-input-field__input-wrapper", children: /* @__PURE__ */ jsx(Textarea, { ...textareaProps }) }),
+    hasHelperText && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.helperText }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
+  ] });
+}
+function cx5(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasTextContent5(value) {
+  return value !== void 0 && value.trim().length > 0;
+}
+function RichTextField(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-rich-text-${reactId}`;
+  const editorRef = React6.useRef(null);
+  const hasHelperText = hasTextContent5(props.helperText);
+  const hasError = hasTextContent5(props.error);
+  const { labelId, helperTextId, errorId, describedBy } = buildRichTextFieldA11yIds({
+    id,
+    hasHelperText,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const disabled = props.editor.disabled || false;
+  const readOnly = props.editor.readOnly || false;
+  const invalid = hasError || props.editor.invalid || false;
+  const wrapperClass = cx5(
+    "mw-input-field",
+    "mw-input-field--rich-text",
+    disabled && "mw-input-field--disabled",
+    invalid && "mw-input-field--invalid",
+    readOnly && "mw-input-field--readonly"
+  );
+  const editorProps = {
+    ...props.editor,
+    id,
+    invalid,
+    labelledBy: labelId
+  };
+  if (describedBy) {
+    editorProps.describedBy = describedBy;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "mw-input-field__label",
+        id: labelId,
+        onClick: () => {
+          editorRef.current?.focus();
+        },
+        children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mw-input-field__input-wrapper", children: /* @__PURE__ */ jsx(RichText, { ref: editorRef, ...editorProps }) }),
+    hasHelperText && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.helperText }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
+  ] });
+}
+function DropdownField(props) {
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "dropdown", children: /* @__PURE__ */ jsx(
+    SelectField,
+    {
+      ...props,
+      select: {
+        ...props.select,
+        native: props.select.native ?? false
+      }
+    }
+  ) });
+}
+function SearchField(props) {
+  const enhancedInput = {
+    ...props.input,
+    type: "search",
+    inputMode: "search"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "search", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+}
+function PasswordField(props) {
+  const { autoComplete = "current-password", ...restProps } = props;
+  const enhancedInput = {
+    ...props.input,
+    type: "password",
+    autoComplete
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "password", children: /* @__PURE__ */ jsx(InputField, { ...restProps, input: enhancedInput }) });
+}
+function EmailField(props) {
+  const enhancedInput = {
+    ...props.input,
+    type: "email",
+    inputMode: "email",
+    autoComplete: "email"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "email", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+}
+function DateOfBirthField(props) {
+  const enhancedInput = {
+    ...props.input,
+    type: "date",
+    autoComplete: "bday"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "date-of-birth", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+}
+function ZipCodeField(props) {
+  const enhancedInput = {
+    ...props.input,
+    type: "text",
+    inputMode: "numeric",
+    autoComplete: "postal-code"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "zip-code", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+}
+function PhoneField(props) {
+  const enhancedInput = {
+    ...props.input,
+    type: "tel",
+    inputMode: "tel",
+    autoComplete: "tel"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "phone", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+}
+function URLField(props) {
+  const enhancedInput = {
+    ...props.input,
+    type: "url",
+    inputMode: "url",
+    autoComplete: "url"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "url", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+}
+function CurrencyField(props) {
+  const { currency, ...restProps } = props;
+  const enhancedInput = {
+    ...props.input,
+    type: "text",
+    inputMode: "decimal",
+    onValueChange: (rawValue) => {
+      const sanitizedValue = sanitizeCurrencyValue(rawValue);
+      props.input?.onValueChange?.(sanitizedValue);
+    }
+  };
+  const helperText = buildCurrencyHelperText(props.helperText, currency);
+  const leadingSymbol = getCurrencySymbol(currency);
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "currency", "data-currency": currency, children: /* @__PURE__ */ jsx(
+    InputField,
+    {
+      ...restProps,
+      input: enhancedInput,
+      helperText: helperText || "",
+      ...leadingSymbol ? { leadingSymbol } : {}
+    }
+  ) });
+}
+function renderAvatarContent(content, isOuterShellAccessible, isDecorative) {
+  if (content.type === "image") {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: "mw-avatar__image",
+        src: content.src,
+        alt: isDecorative ? "" : content.alt ?? ""
+      }
+    );
+  }
+  if (content.type === "initials") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": isOuterShellAccessible ? "true" : void 0,
+        className: "mw-avatar__initials",
+        children: content.initials
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Icon, { name: content.iconName ?? "user", className: "mw-avatar__icon", decorative: true });
+}
+function Avatar(props) {
+  const {
+    className,
+    style,
+    dataAttributes,
+    size,
+    type,
+    initials,
+    src,
+    alt,
+    iconName,
+    decorative,
+    ariaLabel,
+    ...nativeSpanProps
+  } = props;
+  const ariaLabelFromNativeProps = typeof nativeSpanProps["aria-label"] === "string" ? nativeSpanProps["aria-label"] : void 0;
+  const avatarOptions = {};
+  if (size !== void 0) avatarOptions.size = size;
+  if (type !== void 0) avatarOptions.type = type;
+  if (initials !== void 0) avatarOptions.initials = initials;
+  if (src !== void 0) avatarOptions.src = src;
+  if (alt !== void 0) avatarOptions.alt = alt;
+  if (iconName !== void 0) avatarOptions.iconName = iconName;
+  if (decorative !== void 0) avatarOptions.decorative = decorative;
+  const resolvedAriaLabel = ariaLabel ?? ariaLabelFromNativeProps;
+  if (resolvedAriaLabel !== void 0) {
+    avatarOptions.ariaLabel = resolvedAriaLabel;
+  }
+  const kit = createAvatarRecipe(avatarOptions);
+  const mergedClassName = [kit.className, className].filter(Boolean).join(" ");
+  const mergedStyle = { ...kit.vars, ...style };
+  const isOuterShellAccessible = kit.a11y.role === "img";
+  const isDecorative = kit.a11y.ariaHidden === true;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...nativeSpanProps,
+      ...kit.dataAttributes,
+      ...dataAttributes,
+      className: mergedClassName,
+      style: mergedStyle,
+      role: kit.a11y.role,
+      "aria-hidden": isDecorative ? "true" : void 0,
+      "aria-label": kit.a11y.ariaLabel,
+      children: renderAvatarContent(kit.content, isOuterShellAccessible, isDecorative)
+    }
+  );
+}
+function buildAvatarOptions(props) {
+  const avatarOptions = {};
+  if (props.size !== void 0) avatarOptions.size = props.size;
+  if (props.type !== void 0) avatarOptions.type = props.type;
+  if (props.initials !== void 0) avatarOptions.initials = props.initials;
+  if (props.src !== void 0) avatarOptions.src = props.src;
+  if (props.alt !== void 0) avatarOptions.alt = props.alt;
+  if (props.iconName !== void 0) avatarOptions.iconName = props.iconName;
+  if (props.decorative !== void 0) avatarOptions.decorative = props.decorative;
+  const nativeAriaLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : void 0;
+  const resolvedAriaLabel = props.ariaLabel ?? nativeAriaLabel;
+  if (resolvedAriaLabel !== void 0) {
+    avatarOptions.ariaLabel = resolvedAriaLabel;
+  }
+  return avatarOptions;
+}
+function resolveAvatarBadgeLabel(avatarOptions, statusLabel) {
+  const avatarKit = createAvatarRecipe(avatarOptions);
+  if (avatarKit.a11y.ariaHidden) {
+    return void 0;
+  }
+  if (avatarKit.content.type === "image") {
+    return avatarKit.content.alt ? `${avatarKit.content.alt}, ${statusLabel}` : statusLabel;
+  }
+  return avatarKit.a11y.ariaLabel ? `${avatarKit.a11y.ariaLabel}, ${statusLabel}` : statusLabel;
+}
+function AvatarBadge(props) {
+  const {
+    className,
+    dataAttributes,
+    statusLabel = "Online",
+    decorative,
+    style,
+    size,
+    type,
+    initials,
+    src,
+    alt,
+    iconName,
+    ariaLabel,
+    ...nativeSpanProps
+  } = props;
+  const avatarOptions = buildAvatarOptions(props);
+  const avatarKit = createAvatarRecipe(avatarOptions);
+  const accessibleLabel = resolveAvatarBadgeLabel(avatarOptions, statusLabel);
+  const resolvedSize = avatarKit.dataAttributes["data-size"];
+  const mergedClassName = ["mw-avatar-badge", `mw-avatar-badge--${resolvedSize}`, className].filter(Boolean).join(" ");
+  const innerAvatarProps = { decorative: true };
+  if (size !== void 0) innerAvatarProps.size = size;
+  if (type !== void 0) innerAvatarProps.type = type;
+  if (initials !== void 0) innerAvatarProps.initials = initials;
+  if (src !== void 0) innerAvatarProps.src = src;
+  if (alt !== void 0) innerAvatarProps.alt = alt;
+  if (iconName !== void 0) innerAvatarProps.iconName = iconName;
+  if (ariaLabel !== void 0) innerAvatarProps.ariaLabel = ariaLabel;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...nativeSpanProps,
+      ...dataAttributes,
+      className: mergedClassName,
+      style,
+      "data-component": "avatar-badge",
+      "data-size": resolvedSize,
+      "data-status": "online",
+      role: decorative ? void 0 : "img",
+      "aria-hidden": decorative ? "true" : void 0,
+      "aria-label": decorative ? void 0 : accessibleLabel,
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { ...innerAvatarProps }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mw-avatar-badge__indicator" })
+      ]
+    }
+  );
+}
+function AvatarGroup(props) {
+  const {
+    items,
+    overflowCount,
+    overflowLabel,
+    ariaLabel,
+    className,
+    dataAttributes,
+    ...nativeFieldsetProps
+  } = props;
+  const nativeAriaLabel = typeof nativeFieldsetProps["aria-label"] === "string" ? nativeFieldsetProps["aria-label"] : void 0;
+  const groupLabel = ariaLabel ?? nativeAriaLabel ?? "Avatar group";
+  const mergedClassName = ["mw-avatar-group", className].filter(Boolean).join(" ");
+  const shouldRenderOverflowCounter = overflowCount !== void 0 && overflowCount > 0;
+  const resolvedOverflowLabel = overflowLabel ?? `${overflowCount} more people`;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ...nativeFieldsetProps,
+      ...dataAttributes,
+      className: mergedClassName,
+      "data-component": "avatar-group",
+      "aria-label": groupLabel,
+      children: [
+        items.map((item, itemIndex) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "mw-avatar-group__item",
+            children: /* @__PURE__ */ jsx(Avatar, { ...item, size: "medium" })
+          },
+          item.id ?? `${itemIndex}-${item.initials ?? item.alt ?? "avatar"}`
+        )),
+        shouldRenderOverflowCounter ? /* @__PURE__ */ jsxs("span", { "aria-label": resolvedOverflowLabel, className: "mw-avatar-group__counter", role: "img", children: [
+          "+",
+          overflowCount
+        ] }) : null
+      ]
+    }
+  );
+}
+function ProfileAvatar(props) {
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        ...createPurposeSemanticAttributes("profile")
+      }
+    }
+  );
+}
+function PresenceAvatar(props) {
+  return /* @__PURE__ */ jsx(
+    AvatarBadge,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        ...createPurposeSemanticAttributes("presence")
+      }
+    }
+  );
+}
+function TeamAvatarGroup(props) {
+  return /* @__PURE__ */ jsx(
+    AvatarGroup,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        ...createPurposeSemanticAttributes("team")
+      }
+    }
+  );
+}
+function Checkbox(props) {
+  const { onCheckedChange, onChange, ...coreProps } = props;
+  const kit = checkboxRecipe({ ...coreProps });
+  const inputRef = React6.useRef(null);
+  React6.useLayoutEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.indeterminate = kit.indeterminate;
+  }, [kit.indeterminate]);
+  const handleChange = (e) => {
+    onChange?.(e);
+    onCheckedChange?.(e.currentTarget.checked);
+  };
+  const { a11y } = kit;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "checkbox",
+      className: kit.className,
+      style: kit.vars,
+      id: a11y.id,
+      name: a11y.name,
+      value: a11y.value,
+      disabled: a11y.disabled === true,
+      required: a11y.required === true,
+      "aria-label": a11y.ariaLabel,
+      "aria-labelledby": a11y.ariaLabelledBy,
+      "aria-describedby": a11y.ariaDescribedBy,
+      "aria-checked": a11y.ariaChecked,
+      "aria-invalid": a11y.ariaInvalid === true ? true : void 0,
+      checked: kit.checked,
+      defaultChecked: kit.defaultChecked,
+      onChange: handleChange
+    }
+  );
+}
+function cx6(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasContent(value) {
+  if (value === void 0 || value === null || value === false) {
+    return false;
+  }
+  if (typeof value === "string") {
+    return value.trim().length > 0;
+  }
+  return true;
+}
+function CheckboxField(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-checkbox-${reactId}`;
+  const hasDescription = hasContent(props.description);
+  const hasError = hasContent(props.error);
+  const {
+    descriptionId: descId,
+    errorId,
+    describedBy: mergedDescribedBy
+  } = buildCheckboxFieldA11yIds({
+    id,
+    hasDescription,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const disabled = props.checkbox.disabled || false;
+  const invalid = hasError || props.checkbox.invalid || false;
+  const wrapperClass = cx6(
+    "mw-checkbox-field",
+    disabled && "mw-checkbox-field--disabled",
+    invalid && "mw-checkbox-field--invalid"
+  );
+  const checkboxProps = {
+    ...props.checkbox,
+    id,
+    invalid
+  };
+  if (mergedDescribedBy) {
+    checkboxProps.ariaDescribedBy = mergedDescribedBy;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mw-checkbox-field__row", children: [
+      /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps }),
+      /* @__PURE__ */ jsx("label", { className: "mw-checkbox-field__label", htmlFor: id, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) })
+    ] }),
+    hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-checkbox-field__description", id: descId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.description }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-checkbox-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
+  ] });
+}
+function hasContent2(value) {
+  if (value === void 0 || value === null || value === false) return false;
+  if (typeof value === "string") return value.trim().length > 0;
+  return true;
+}
+function cx7(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function orderSelectedValues(values, options) {
+  const optionValues = new Set(options.map((option) => option.value));
+  const selectedValues = new Set(values);
+  const knownValues = options.map((option) => option.value).filter((value) => selectedValues.has(value));
+  const unknownValues = values.filter((value) => !optionValues.has(value));
+  return [...knownValues, ...unknownValues];
+}
+function CheckboxGroupField(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-checkbox-group-${reactId}`;
+  const hasDescription = hasContent2(props.description);
+  const hasError = hasContent2(props.error);
+  const isInvalid = hasError;
+  const { labelId, descriptionId, errorId, describedBy } = buildCheckboxGroupFieldA11yIds({
+    id,
+    hasDescription,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const isControlled = props.value !== void 0;
+  const [internalValue, setInternalValue] = React6.useState(
+    orderSelectedValues(props.defaultValue ?? [], props.options)
+  );
+  const selectedValues = orderSelectedValues(
+    isControlled ? props.value ?? [] : internalValue,
+    props.options
+  );
+  const selectedValueSet = new Set(selectedValues);
+  const handleToggle = (nextValue) => {
+    const rawNextValue = selectedValueSet.has(nextValue) ? selectedValues.filter((value) => value !== nextValue) : [...selectedValues, nextValue];
+    const orderedNextValue = orderSelectedValues(rawNextValue, props.options);
+    if (!isControlled) {
+      setInternalValue(orderedNextValue);
+    }
+    props.onChange?.(orderedNextValue);
+  };
+  const wrapperClass = cx7(
+    "mw-checkbox-group-field",
+    props.disabled && "mw-checkbox-group-field--disabled",
+    isInvalid && "mw-checkbox-group-field--invalid"
+  );
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: wrapperClass,
+      "aria-labelledby": labelId,
+      "aria-describedby": describedBy,
+      "aria-invalid": isInvalid ? true : void 0,
+      "aria-required": props.required ? true : void 0,
+      disabled: props.disabled ? true : void 0,
+      ...props.dataAttributes,
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: "mw-checkbox-group-field__label", id: labelId, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) }),
+        hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-checkbox-group-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.description }) }),
+        /* @__PURE__ */ jsx("div", { className: "mw-checkbox-group-field__options", children: props.options.map((option, index) => {
+          const optionId = `${id}-option-${index}`;
+          const isOptionDisabled = props.disabled || option.disabled || false;
+          const checkboxProps = {
+            ...props.checkbox ?? {},
+            id: optionId,
+            value: option.value,
+            checked: selectedValueSet.has(option.value),
+            disabled: isOptionDisabled,
+            invalid: isInvalid,
+            onCheckedChange: () => handleToggle(option.value)
+          };
+          if (props.name !== void 0) {
+            checkboxProps.name = props.name;
+          }
+          if (option.indeterminate !== void 0) {
+            checkboxProps.indeterminate = option.indeterminate;
+          }
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "mw-checkbox-group-field__option",
+              htmlFor: optionId,
+              children: [
+                /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps }),
+                /* @__PURE__ */ jsx(Paragraph, { size: "md", children: option.label })
+              ]
+            },
+            option.value
+          );
+        }) }),
+        hasError && /* @__PURE__ */ jsx("div", { className: "mw-checkbox-group-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
+      ]
+    }
+  );
+}
+var Divider = React6.forwardRef((props, ref) => {
+  const { className: customClassName, style: customStyle, ...opts } = props;
+  const kit = createDividerRecipe(opts);
+  const style = { ...kit.vars, ...customStyle };
+  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
+  return /* @__PURE__ */ jsx("hr", { ref, ...kit.a11y, ...kit.dataAttributes, className, style });
+});
+Divider.displayName = "Divider";
+var Spacing = React6.forwardRef((props, ref) => {
+  const { className: customClassName, scale, size, spacing, style: customStyle } = props;
+  const resolvedSize = spacing ?? size;
+  const kit = createSpacingRecipe({
+    ...resolvedSize !== void 0 ? { size: resolvedSize } : {},
+    ...scale !== void 0 ? { scale } : {}
+  });
+  const style = { ...kit.vars, ...customStyle };
+  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
+  return /* @__PURE__ */ jsx("div", { ref, ...kit.a11y, ...kit.dataAttributes, className, style });
+});
+Spacing.displayName = "Spacing";
+var Spacer = Spacing;
+function H1(props) {
+  const { children, className: customClassName, style: customStyle, ...opts } = props;
+  const theme = useTheme();
+  const kit = headingRecipe({ ...opts, level: 1 }, theme);
+  const style = { ...kit.vars, ...customStyle };
+  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
+  return /* @__PURE__ */ jsx("h1", { id: kit.a11y.id, "aria-label": kit.a11y.ariaLabel, className, style, children });
+}
+function H2(props) {
+  const { children, className: customClassName, style: customStyle, ...opts } = props;
+  const theme = useTheme();
+  const kit = headingRecipe({ ...opts, level: 2 }, theme);
+  const style = { ...kit.vars, ...customStyle };
+  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
+  return /* @__PURE__ */ jsx("h2", { id: kit.a11y.id, "aria-label": kit.a11y.ariaLabel, className, style, children });
+}
+function H3(props) {
+  const { children, className: customClassName, style: customStyle, ...opts } = props;
+  const theme = useTheme();
+  const kit = headingRecipe({ ...opts, level: 3 }, theme);
+  const style = { ...kit.vars, ...customStyle };
+  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
+  return /* @__PURE__ */ jsx("h3", { id: kit.a11y.id, "aria-label": kit.a11y.ariaLabel, className, style, children });
+}
+function Card(props) {
+  const { title, children, className, dataAttributes, ...nativeDivProps } = props;
+  const kit = createCardRecipe(dataAttributes ? { dataAttributes } : {});
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...nativeDivProps,
+      ...kit.dataAttributes,
+      className: [kit.className, className].filter(Boolean).join(" "),
+      children: [
+        title ? /* @__PURE__ */ jsx("div", { className: "mw-card__header", children: /* @__PURE__ */ jsx("span", { className: "mw-card__title", children: title }) }) : null,
+        /* @__PURE__ */ jsx("div", { className: "mw-card__body", children })
+      ]
+    }
+  );
+}
+function ProductCard(props) {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "product-card"
+      }
+    }
+  );
+}
+function ProfileCard(props) {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "profile-card"
+      }
+    }
+  );
+}
+function StatCard(props) {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "stat-card"
+      }
+    }
+  );
+}
+function cx8(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function Toast(props) {
+  const { children, icon, action, onDismiss, className, id, dataAttributes, ...coreProps } = props;
+  const kit = createToastRecipe(coreProps);
+  const { a11y } = kit;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: cx8(kit.className, className),
+      role: a11y.role,
+      "aria-live": a11y.ariaLive,
+      "aria-atomic": "true",
+      ...kit.dataAttributes,
+      ...dataAttributes,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "mw-toast__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "mw-toast__body", children: [
+          /* @__PURE__ */ jsx("span", { className: "mw-toast__text", children }),
+          action && /* @__PURE__ */ jsx("span", { className: "mw-toast__action", children: action })
+        ] }),
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "mw-toast__dismiss",
+            "aria-label": "Dismiss",
+            onClick: onDismiss
+          }
+        )
+      ]
+    }
+  );
+}
+function getDefaultIcon(iconName) {
+  return /* @__PURE__ */ jsx(Icon, { name: iconName, decorative: true });
+}
+function SuccessToast(props) {
+  return /* @__PURE__ */ jsx(
+    Toast,
+    {
+      ...props,
+      variant: props.variant ?? "outline",
+      ariaLive: props.ariaLive ?? "polite",
+      icon: props.icon ?? getDefaultIcon(IconName.Check),
+      dataAttributes: {
+        ...props.dataAttributes,
+        ...createPurposeSemanticAttributes("success-toast")
+      }
+    }
+  );
+}
+function ErrorToast(props) {
+  return /* @__PURE__ */ jsx(
+    Toast,
+    {
+      ...props,
+      variant: props.variant ?? "outline",
+      ariaLive: props.ariaLive ?? "assertive",
+      icon: props.icon ?? getDefaultIcon(IconName.XCircle),
+      dataAttributes: {
+        ...props.dataAttributes,
+        ...createPurposeSemanticAttributes("error-toast")
+      }
+    }
+  );
+}
+function WarningToast(props) {
+  return /* @__PURE__ */ jsx(
+    Toast,
+    {
+      ...props,
+      variant: props.variant ?? "outline",
+      ariaLive: props.ariaLive ?? "polite",
+      icon: props.icon ?? getDefaultIcon(IconName.AlertTriangle),
+      dataAttributes: {
+        ...props.dataAttributes,
+        ...createPurposeSemanticAttributes("warning-toast")
+      }
+    }
+  );
+}
+function InfoToast(props) {
+  return /* @__PURE__ */ jsx(
+    Toast,
+    {
+      ...props,
+      variant: props.variant ?? "outline",
+      ariaLive: props.ariaLive ?? "polite",
+      icon: props.icon ?? getDefaultIcon(IconName.Info),
+      dataAttributes: {
+        ...props.dataAttributes,
+        ...createPurposeSemanticAttributes("info-toast")
+      }
+    }
+  );
+}
+function cx9(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function renderToastByIntent(toast, onDismiss) {
+  const sharedProps = {
+    id: toast.id,
+    children: toast.children
+  };
+  const dismissHandler = onDismiss ? () => onDismiss(toast.id) : void 0;
+  if (toast.icon !== void 0) {
+    sharedProps.icon = toast.icon;
+  }
+  if (toast.action !== void 0) {
+    sharedProps.action = toast.action;
+  }
+  if (dismissHandler) {
+    sharedProps.onDismiss = dismissHandler;
+  }
+  if (toast.className !== void 0) {
+    sharedProps.className = toast.className;
+  }
+  if (toast.variant !== void 0) {
+    sharedProps.variant = toast.variant;
+  }
+  if (toast.ariaLive !== void 0) {
+    sharedProps.ariaLive = toast.ariaLive;
+  }
+  if (toast.dataAttributes !== void 0 || toast.intent !== void 0) {
+    sharedProps.dataAttributes = {
+      ...toast.dataAttributes ?? {},
+      ...toast.intent !== void 0 ? { "data-intent": toast.intent } : {}
+    };
+  }
+  switch (toast.intent) {
+    case "success":
+      return /* @__PURE__ */ jsx(SuccessToast, { ...sharedProps });
+    case "error":
+      return /* @__PURE__ */ jsx(ErrorToast, { ...sharedProps });
+    case "warning":
+      return /* @__PURE__ */ jsx(WarningToast, { ...sharedProps });
+    case "info":
+      return /* @__PURE__ */ jsx(InfoToast, { ...sharedProps });
+    default:
+      return /* @__PURE__ */ jsx(Toast, { ...sharedProps });
+  }
+}
+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(() => {
+    if (timerHandleRef.current === null) {
+      return;
+    }
+    window.clearTimeout(timerHandleRef.current);
+    timerHandleRef.current = null;
+    timerStartedAtRef.current = null;
+  }, []);
+  const scheduleDismissTimer = React6.useCallback(
+    (delay) => {
+      if (!props.onDismiss || delay <= 0 || pointerInsideRef.current || focusInsideRef.current || timerHandleRef.current !== null) {
+        return;
+      }
+      timerStartedAtRef.current = Date.now();
+      timerHandleRef.current = window.setTimeout(() => {
+        timerHandleRef.current = null;
+        timerStartedAtRef.current = null;
+        remainingDurationRef.current = 0;
+        props.onDismiss?.(props.toast.id);
+      }, delay);
+    },
+    [props.onDismiss, props.toast.id]
+  );
+  const pauseDismissTimer = React6.useCallback(() => {
+    if (timerHandleRef.current === null || timerStartedAtRef.current === null) {
+      return;
+    }
+    const elapsed = Date.now() - timerStartedAtRef.current;
+    const remainingDuration = remainingDurationRef.current ?? 0;
+    remainingDurationRef.current = Math.max(remainingDuration - elapsed, 0);
+    clearDismissTimer();
+  }, [clearDismissTimer]);
+  const resumeDismissTimer = React6.useCallback(() => {
+    if (pointerInsideRef.current || focusInsideRef.current) {
+      return;
+    }
+    const remainingDuration = remainingDurationRef.current;
+    if (remainingDuration === null || remainingDuration === void 0 || remainingDuration <= 0) {
+      return;
+    }
+    scheduleDismissTimer(remainingDuration);
+  }, [scheduleDismissTimer]);
+  React6.useEffect(() => {
+    clearDismissTimer();
+    pointerInsideRef.current = false;
+    focusInsideRef.current = false;
+    if (!props.onDismiss || props.toast.duration === void 0 || props.toast.duration === null) {
+      remainingDurationRef.current = null;
+      return;
+    }
+    if (props.toast.duration <= 0) {
+      remainingDurationRef.current = 0;
+      return;
+    }
+    remainingDurationRef.current = props.toast.duration;
+    scheduleDismissTimer(props.toast.duration);
+    return () => {
+      clearDismissTimer();
+    };
+  }, [clearDismissTimer, props.onDismiss, props.toast.duration, scheduleDismissTimer]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "mw-toast-container__item",
+      onMouseEnter: () => {
+        pointerInsideRef.current = true;
+        pauseDismissTimer();
+      },
+      onMouseLeave: () => {
+        pointerInsideRef.current = false;
+        resumeDismissTimer();
+      },
+      onFocusCapture: () => {
+        focusInsideRef.current = true;
+        pauseDismissTimer();
+      },
+      onBlurCapture: (event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) {
+          return;
+        }
+        focusInsideRef.current = false;
+        resumeDismissTimer();
+      },
+      children: renderToastByIntent(props.toast, props.onDismiss)
+    }
+  );
+}
+function ToastContainer(props) {
+  const placement = props.placement ?? "top-right";
+  const visibleToasts = props.maxVisible && props.maxVisible > 0 ? props.toasts.slice(-props.maxVisible) : props.toasts;
+  return /* @__PURE__ */ jsx("div", { className: cx9("mw-toast-container", `mw-toast-container--${placement}`, props.className), children: visibleToasts.map((toast) => /* @__PURE__ */ jsx(
+    ToastViewportItem,
+    {
+      toast,
+      ...props.onDismiss ? { onDismiss: props.onDismiss } : {}
+    },
+    toast.id
+  )) });
+}
+var ToastContext = React6.createContext(null);
+function ToastProvider(props) {
+  const [toasts, setToasts] = React6.useState([]);
+  const idRef = React6.useRef(0);
+  const dismiss = React6.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(() => {
+    setToasts((currentToasts) => {
+      for (const toast of currentToasts) {
+        toast.onDismiss?.();
+      }
+      return [];
+    });
+  }, []);
+  const show = React6.useCallback(
+    (toast) => {
+      idRef.current += 1;
+      const id = `mw-toast-${idRef.current}`;
+      setToasts((currentToasts) => [
+        ...currentToasts,
+        {
+          ...toast,
+          id,
+          duration: toast.duration === void 0 ? props.defaultDuration === void 0 ? 4e3 : props.defaultDuration : toast.duration
+        }
+      ]);
+      return id;
+    },
+    [props.defaultDuration]
+  );
+  const value = React6.useMemo(
+    () => ({
+      show,
+      dismiss,
+      clear
+    }),
+    [clear, dismiss, show]
+  );
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(
+      ToastContainer,
+      {
+        toasts,
+        onDismiss: dismiss,
+        ...props.placement ? { placement: props.placement } : {},
+        ...props.maxVisible !== void 0 ? { maxVisible: props.maxVisible } : {},
+        ...props.className ? { className: props.className } : {}
+      }
+    )
+  ] });
+}
+function useToast() {
+  const context = React6.useContext(ToastContext);
+  if (!context) {
+    throw new Error("ToastProvider is missing. Wrap your app in <ToastProvider />.");
+  }
+  return context;
+}
+function Tooltip(props) {
+  const { children, className, style, dataAttributes, id, ...nativeSpanProps } = props;
+  const tooltipOptions = {};
+  if (id !== void 0) {
+    tooltipOptions.id = id;
+  }
+  const kit = createTooltipRecipe(tooltipOptions);
+  const mergedClassName = [kit.className, className].filter(Boolean).join(" ");
+  const mergedStyle = { ...kit.vars, ...style };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...nativeSpanProps,
+      ...kit.dataAttributes,
+      ...dataAttributes,
+      id: kit.a11y.id,
+      className: mergedClassName,
+      style: mergedStyle,
+      role: kit.a11y.role,
+      children
+    }
+  );
+}
+var TOOLTIP_EXIT_DURATION_MS = 160;
+function cx10(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function TooltipGroup(props) {
+  const reactId = React6.useId();
+  const {
+    content,
+    icon = IconName.HelpCircle,
+    triggerLabel = "Show tooltip",
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    tooltipId,
+    tooltipClassName,
+    triggerClassName,
+    dataAttributes,
+    className,
+    id,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    ...nativeSpanProps
+  } = props;
+  const [internalOpen, setInternalOpen] = React6.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const resolvedOpen = isControlled ? open : internalOpen;
+  const [isTooltipMounted, setIsTooltipMounted] = React6.useState(resolvedOpen);
+  const resolvedTooltipId = tooltipId ?? `${id ?? `mw-tooltip-group-${reactId}`}-tooltip`;
+  React6.useEffect(() => {
+    if (resolvedOpen) {
+      setIsTooltipMounted(true);
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      setIsTooltipMounted(false);
+    }, TOOLTIP_EXIT_DURATION_MS);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [resolvedOpen]);
+  const updateOpen = React6.useCallback(
+    (nextOpen) => {
+      if (resolvedOpen === nextOpen) {
+        return;
+      }
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange, resolvedOpen]
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...nativeSpanProps,
+      ...dataAttributes,
+      id,
+      className: cx10("mw-tooltip-group", className),
+      "data-component": "tooltip-group",
+      "data-open": resolvedOpen ? "true" : void 0,
+      onMouseEnter: (event) => {
+        onMouseEnter?.(event);
+        updateOpen(true);
+      },
+      onMouseLeave: (event) => {
+        onMouseLeave?.(event);
+        updateOpen(false);
+      },
+      onFocus: (event) => {
+        onFocus?.(event);
+        updateOpen(true);
+      },
+      onBlur: (event) => {
+        onBlur?.(event);
+        const nextFocusedElement = event.relatedTarget;
+        if (nextFocusedElement instanceof Node && event.currentTarget.contains(nextFocusedElement)) {
+          return;
+        }
+        updateOpen(false);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.key === "Escape") {
+          updateOpen(false);
+        }
+      },
+      children: [
+        isTooltipMounted ? /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            id: resolvedTooltipId,
+            className: tooltipClassName,
+            "data-state": resolvedOpen ? "open" : "closed",
+            "aria-hidden": resolvedOpen ? void 0 : "true",
+            children: content
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx10("mw-tooltip-group__trigger", triggerClassName),
+            "aria-label": triggerLabel,
+            "aria-describedby": resolvedOpen ? resolvedTooltipId : void 0,
+            children: /* @__PURE__ */ jsx(Icon, { name: icon, decorative: true })
+          }
+        )
+      ]
+    }
+  );
+}
+function Accordion(props) {
+  const { title, children, className, onToggle, id: idProp, open, disabled } = props;
+  const autoId = React6.useId();
+  const resolvedId = idProp ?? autoId.replace(/:/g, "");
+  const opts = { id: resolvedId };
+  if (open !== void 0) opts.open = open;
+  if (disabled !== void 0) opts.disabled = disabled;
+  const kit = createAccordionRecipe(opts);
+  const { a11y } = kit;
+  function handleTriggerClick() {
+    if (disabled) return;
+    onToggle?.();
+  }
+  return /* @__PURE__ */ jsxs("div", { className: [kit.className, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: a11y.triggerId,
+        type: "button",
+        className: "mw-accordion__trigger",
+        "aria-expanded": a11y.ariaExpanded,
+        "aria-controls": a11y.panelId,
+        "aria-disabled": a11y.ariaDisabled,
+        disabled,
+        onClick: handleTriggerClick,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "mw-accordion__title", children: title }),
+          /* @__PURE__ */ jsx("span", { className: "mw-accordion__icon", "aria-hidden": "true" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "section",
+      {
+        id: a11y.panelId,
+        "aria-labelledby": a11y.triggerId,
+        className: "mw-accordion__panel",
+        hidden: !open,
+        children: /* @__PURE__ */ jsx("div", { className: "mw-accordion__content", children })
+      }
+    )
+  ] });
+}
+function hasContent3(value) {
+  if (value === void 0 || value === null || value === false) return false;
+  if (typeof value === "string") return value.trim().length > 0;
+  return true;
+}
+function cx11(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function resolveAccordionItemContent(item) {
+  return item.content ?? item.children;
+}
+function AccordionField(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-accordion-field-${reactId}`;
+  const multipleAllowed = props.multiple ?? true;
+  const hasDescription = hasContent3(props.description);
+  const hasError = hasContent3(props.error);
+  const isInvalid = hasError || false;
+  const { labelId, descriptionId, errorId, describedBy } = buildAccordionFieldA11yIds({
+    id,
+    hasDescription,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const isControlled = props.openItems !== void 0;
+  const [internalOpenItems, setInternalOpenItems] = React6.useState(
+    props.defaultOpenItems ?? []
+  );
+  const openItems = isControlled ? props.openItems ?? [] : internalOpenItems;
+  const handleToggle = (itemValue) => {
+    const isCurrentlyOpen = openItems.includes(itemValue);
+    let nextOpenItems;
+    if (isCurrentlyOpen) {
+      nextOpenItems = openItems.filter((v) => v !== itemValue);
+    } else if (multipleAllowed) {
+      nextOpenItems = [...openItems, itemValue];
+    } else {
+      nextOpenItems = [itemValue];
+    }
+    if (!isControlled) {
+      setInternalOpenItems(nextOpenItems);
+    }
+    props.onOpenItemsChange?.(nextOpenItems);
+  };
+  const wrapperClass = cx11(
+    "mw-accordion-field",
+    props.disabled && "mw-accordion-field--disabled",
+    isInvalid && "mw-accordion-field--invalid"
+  );
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: wrapperClass,
+      "aria-labelledby": labelId,
+      "aria-describedby": describedBy,
+      "aria-invalid": isInvalid ? true : void 0,
+      ...props.dataAttributes,
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: "mw-accordion-field__label", id: labelId, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) }),
+        /* @__PURE__ */ jsx("div", { className: "mw-accordion-field__items", children: props.items.map((item) => {
+          const isDisabled = props.disabled || item.disabled || false;
+          const isOpen = openItems.includes(item.value);
+          return /* @__PURE__ */ jsx(
+            Accordion,
+            {
+              id: `${id}-item-${item.value}`,
+              title: item.title,
+              open: isOpen,
+              disabled: isDisabled,
+              onToggle: () => handleToggle(item.value),
+              children: resolveAccordionItemContent(item)
+            },
+            item.value
+          );
+        }) }),
+        hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-accordion-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.description }) }),
+        hasError && /* @__PURE__ */ jsx("div", { className: "mw-accordion-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
+      ]
+    }
+  );
+}
+function FAQAccordion(props) {
+  return /* @__PURE__ */ jsx(
+    AccordionField,
+    {
+      ...props,
+      multiple: false,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "faq"
+      }
+    }
+  );
+}
+function SettingsAccordion(props) {
+  return /* @__PURE__ */ jsx(
+    AccordionField,
+    {
+      ...props,
+      multiple: true,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "settings"
+      }
+    }
+  );
+}
+function SectionsAccordion(props) {
+  return /* @__PURE__ */ jsx(
+    AccordionField,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "sections"
+      }
+    }
+  );
+}
+function Radio(props) {
+  const { onCheckedChange, onChange, ...coreProps } = props;
+  const kit = radioRecipe(coreProps);
+  const { a11y } = kit;
+  const handleChange = (e) => {
+    onChange?.(e);
+    onCheckedChange?.(e.currentTarget.checked);
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "radio",
+      className: kit.className,
+      id: a11y.id,
+      name: a11y.name,
+      value: a11y.value,
+      disabled: a11y.disabled === true,
+      required: a11y.required === true,
+      "aria-label": a11y.ariaLabel,
+      "aria-labelledby": a11y.ariaLabelledBy,
+      "aria-describedby": a11y.ariaDescribedBy,
+      "aria-invalid": a11y.ariaInvalid === true ? true : void 0,
+      checked: kit.checked,
+      defaultChecked: kit.defaultChecked,
+      onChange: handleChange
+    }
+  );
+}
+function hasContent4(value) {
+  if (value === void 0 || value === null || value === false) return false;
+  if (typeof value === "string") return value.trim().length > 0;
+  return true;
+}
+function cx12(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function RadioGroupField(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-radio-group-${reactId}`;
+  const hasDescription = hasContent4(props.description);
+  const hasError = hasContent4(props.error);
+  const isInvalid = hasError || false;
+  const { labelId, descriptionId, errorId, describedBy } = buildRadioGroupFieldA11yIds({
+    id,
+    hasDescription,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const isControlled = props.value !== void 0;
+  const [internalValue, setInternalValue] = React6.useState(props.defaultValue);
+  const selectedValue = isControlled ? props.value : internalValue;
+  const handleSelect = (optionValue) => {
+    if (!isControlled) {
+      setInternalValue(optionValue);
+    }
+    props.onChange?.(optionValue);
+  };
+  const wrapperClass = cx12(
+    "mw-radio-group-field",
+    props.disabled && "mw-radio-group-field--disabled",
+    isInvalid && "mw-radio-group-field--invalid"
+  );
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, ...props.dataAttributes, children: [
+    /* @__PURE__ */ jsx("div", { className: "mw-radio-group-field__label", id: labelId, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) }),
+    hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-radio-group-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.description }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-labelledby": labelId,
+        "aria-describedby": describedBy,
+        "aria-invalid": isInvalid ? true : void 0,
+        "aria-required": props.required ? true : void 0,
+        className: "mw-radio-group-field__options",
+        children: props.options.map(({ value, label, disabled: optionDisabled }) => {
+          const optionId = `${id}-option-${value}`;
+          const isDisabled = props.disabled || optionDisabled || false;
+          return /* @__PURE__ */ jsxs("label", { className: "mw-radio-group-field__option", htmlFor: optionId, children: [
+            /* @__PURE__ */ jsx(
+              Radio,
+              {
+                id: optionId,
+                name: props.name,
+                value,
+                checked: selectedValue === value,
+                disabled: isDisabled,
+                invalid: isInvalid,
+                ...props.required ? { required: true } : {},
+                onCheckedChange: (checked) => {
+                  if (checked) handleSelect(value);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: label })
+          ] }, value);
+        })
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-radio-group-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
+  ] });
+}
+function YesNoRadioGroup(props) {
+  const { yesLabel = "Yes", noLabel = "No", ...restProps } = props;
+  const options = [
+    { value: "yes", label: yesLabel },
+    { value: "no", label: noLabel }
+  ];
+  return /* @__PURE__ */ jsx(
+    RadioGroupField,
+    {
+      ...restProps,
+      options,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "binary-choice"
+      }
+    }
+  );
+}
+function RatingRadioGroup(props) {
+  const { min = 1, max = 5, labelFn = String, ...restProps } = props;
+  const options = Array.from({ length: max - min + 1 }, (_, i) => {
+    const value = min + i;
+    return { value: String(value), label: labelFn(value) };
+  });
+  return /* @__PURE__ */ jsx(
+    RadioGroupField,
+    {
+      ...restProps,
+      options,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "rating"
+      }
+    }
+  );
+}
+function OptionRadioGroup(props) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupField,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "selection"
+      }
+    }
+  );
+}
+function Badge(props) {
+  const { children, className, id, dataAttributes, ...coreProps } = props;
+  const kit = createBadgeRecipe(coreProps);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      id,
+      className: [kit.className, className].filter(Boolean).join(" "),
+      "aria-label": kit.a11y.ariaLabel,
+      ...kit.dataAttributes,
+      ...dataAttributes,
+      children
+    }
+  );
+}
+function cx13(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function BadgeGroup(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-badge-group-${reactId}`;
+  const labelId = `${id}-label`;
+  const className = cx13("mw-badge-group", props.className);
+  return /* @__PURE__ */ jsxs("fieldset", { className, "aria-labelledby": labelId, ...props.dataAttributes, children: [
+    /* @__PURE__ */ jsx("legend", { className: "mw-badge-group__label", id: labelId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.label }) }),
+    /* @__PURE__ */ jsx("div", { className: "mw-badge-group__items", children: props.children })
+  ] });
+}
+function StatusBadge(props) {
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        ...createPurposeSemanticAttributes("status")
+      }
+    }
+  );
+}
+function PriorityBadge(props) {
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        ...createPurposeSemanticAttributes("priority")
+      }
+    }
+  );
+}
+function NotificationBadge(props) {
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        ...createPurposeSemanticAttributes("notification")
+      }
+    }
+  );
+}
+function Switch(props) {
+  const { children, className, id, onCheckedChange, onClick, ...coreProps } = props;
+  const kit = createSwitchRecipe(coreProps);
+  const { a11y } = kit;
+  const isDisabled = a11y.ariaDisabled === true;
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (isDisabled || event.defaultPrevented) {
+      return;
+    }
+    onCheckedChange?.(!a11y.ariaChecked);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      id,
+      type: "button",
+      role: a11y.role,
+      disabled: isDisabled,
+      "aria-checked": a11y.ariaChecked,
+      "aria-disabled": a11y.ariaDisabled,
+      "aria-label": a11y.ariaLabel,
+      "aria-labelledby": a11y.ariaLabelledby,
+      "aria-describedby": a11y.ariaDescribedBy,
+      className: [kit.className, className].filter(Boolean).join(" "),
+      style: kit.vars,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mw-switch__track", children: /* @__PURE__ */ jsx("span", { className: "mw-switch__thumb" }) }),
+        children
+      ]
+    }
+  );
+}
+function cx14(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasContent5(value) {
+  if (value === void 0 || value === null || value === false) {
+    return false;
+  }
+  if (typeof value === "string") {
+    return value.trim().length > 0;
+  }
+  return true;
+}
+function SwitchField(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-switch-${reactId}`;
+  const hasDescription = hasContent5(props.description);
+  const hasError = hasContent5(props.error);
+  const { labelId, descriptionId, errorId, describedBy } = buildSwitchFieldA11yIds({
+    id,
+    hasDescription,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const disabled = props.switch.disabled || false;
+  const invalid = hasError;
+  const wrapperClass = cx14(
+    "mw-switch-field",
+    disabled && "mw-switch-field--disabled",
+    invalid && "mw-switch-field--invalid"
+  );
+  const {
+    ariaLabel: _ignoredAriaLabel,
+    ariaLabelledby: _ignoredAriaLabelledby,
+    ariaDescribedBy: _ignoredAriaDescribedBy,
+    children: _ignoredChildren,
+    ...switchProps
+  } = props.switch;
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, ...props.dataAttributes, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mw-switch-field__row", children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          ...switchProps,
+          id,
+          ariaLabelledby: labelId,
+          ...describedBy ? { ariaDescribedBy: describedBy } : {}
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "mw-switch-field__label", id: labelId, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) })
+    ] }),
+    hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-switch-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.description }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-switch-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
+  ] });
+}
+function FeatureToggle(props) {
+  return /* @__PURE__ */ jsx(
+    SwitchField,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "feature-toggle"
+      }
+    }
+  );
+}
+function PreferenceSwitch(props) {
+  return /* @__PURE__ */ jsx(
+    SwitchField,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "preference"
+      }
+    }
+  );
+}
+function PermissionSwitch(props) {
+  return /* @__PURE__ */ jsx(
+    SwitchField,
+    {
+      ...props,
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "permission"
+      }
+    }
+  );
+}
+function buildSliderOptions(options) {
+  const sliderOptions = {};
+  if (options.id !== void 0) sliderOptions.id = options.id;
+  if (options.name !== void 0) sliderOptions.name = options.name;
+  if (options.min !== void 0) sliderOptions.min = options.min;
+  if (options.max !== void 0) sliderOptions.max = options.max;
+  if (options.step !== void 0) sliderOptions.step = options.step;
+  if (options.value !== void 0) sliderOptions.value = options.value;
+  if (options.defaultValue !== void 0) sliderOptions.defaultValue = options.defaultValue;
+  if (options.disabled !== void 0) sliderOptions.disabled = options.disabled;
+  if (options.required !== void 0) sliderOptions.required = options.required;
+  if (options.showTooltip !== void 0) sliderOptions.showTooltip = options.showTooltip;
+  if (options.showTouchArea !== void 0) sliderOptions.showTouchArea = options.showTouchArea;
+  if (options.orientation !== void 0) sliderOptions.orientation = options.orientation;
+  if (options.ariaLabel !== void 0) sliderOptions.ariaLabel = options.ariaLabel;
+  if (options.ariaLabelledBy !== void 0) sliderOptions.ariaLabelledBy = options.ariaLabelledBy;
+  if (options.ariaDescribedBy !== void 0) sliderOptions.ariaDescribedBy = options.ariaDescribedBy;
+  if (options.ariaValueText !== void 0) sliderOptions.ariaValueText = options.ariaValueText;
+  return sliderOptions;
+}
+function resolveSliderValue(options) {
+  return createSliderRecipe(buildSliderOptions(options)).value;
+}
+var Slider = React6.forwardRef((props, ref) => {
+  const {
+    id,
+    name,
+    min,
+    max,
+    step,
+    value,
+    defaultValue,
+    disabled,
+    required,
+    showTooltip,
+    showTouchArea,
+    orientation,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    ariaValueText,
+    className: customClassName,
+    style: customStyle,
+    onValueChange,
+    onChange,
+    ...inputProps
+  } = props;
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React6.useState(
+    () => resolveSliderValue({ min, max, step, value, defaultValue })
+  );
+  React6.useEffect(() => {
+    if (!isControlled) {
+      setUncontrolledValue(resolveSliderValue({ min, max, step, defaultValue }));
+    }
+  }, [defaultValue, isControlled, max, min, step]);
+  const currentValue = isControlled ? resolveSliderValue({ min, max, step, value }) : uncontrolledValue;
+  const kit = createSliderRecipe(
+    buildSliderOptions({
+      id,
+      name,
+      min,
+      max,
+      step,
+      value: currentValue,
+      disabled,
+      required,
+      showTooltip,
+      showTouchArea,
+      orientation,
+      ariaLabel,
+      ariaLabelledBy,
+      ariaDescribedBy,
+      ariaValueText
+    })
+  );
+  useRenderKitDebug(kit, "Slider");
+  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
+  const style = { ...kit.vars, ...customStyle };
+  const handleChange = (event) => {
+    const nextValue = Number(event.currentTarget.value);
+    if (!isControlled) {
+      setUncontrolledValue(nextValue);
+    }
+    onChange?.(event);
+    onValueChange?.(nextValue);
+  };
+  return /* @__PURE__ */ jsx("div", { className, style, ...kit.dataAttributes, children: /* @__PURE__ */ jsxs("div", { className: "mw-slider__control", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...inputProps,
+        ref,
+        type: kit.a11y.type,
+        id: kit.a11y.id,
+        name: kit.a11y.name,
+        min: kit.a11y.min,
+        max: kit.a11y.max,
+        step: kit.a11y.step,
+        disabled: kit.a11y.disabled === true,
+        required: kit.a11y.required === true,
+        "aria-label": kit.a11y.ariaLabel,
+        "aria-labelledby": kit.a11y.ariaLabelledBy,
+        "aria-describedby": kit.a11y.ariaDescribedBy,
+        "aria-valuetext": kit.a11y.ariaValueText,
+        "aria-orientation": kit.a11y.ariaOrientation,
+        className: kit.inputClassName,
+        value: currentValue,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mw-slider__visual", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("span", { className: "mw-slider__track" }),
+      /* @__PURE__ */ jsx("span", { className: "mw-slider__fill" }),
+      /* @__PURE__ */ jsx("span", { className: "mw-slider__touch-area" }),
+      /* @__PURE__ */ jsx("span", { className: "mw-slider__thumb" })
+    ] }),
+    kit.showTooltip ? /* @__PURE__ */ jsx("span", { className: "mw-slider__tooltip", "aria-hidden": "true", children: currentValue }) : null
+  ] }) });
+});
+Slider.displayName = "Slider";
+function cx15(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasContent6(value) {
+  if (value === void 0 || value === null || value === false) {
+    return false;
+  }
+  if (typeof value === "string") {
+    return value.trim().length > 0;
+  }
+  return true;
+}
+function resolveEdgeValueLabel(value, fallback) {
+  return value ?? `${fallback}`;
+}
+function SliderField(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-slider-${reactId}`;
+  const hasDescription = hasContent6(props.description);
+  const hasError = hasContent6(props.error);
+  const { labelId, descriptionId, errorId, describedBy } = buildSliderFieldA11yIds({
+    id,
+    hasDescription,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const disabled = props.slider.disabled || false;
+  const labelPosition = props.labelPosition ?? "top";
+  const showEdgeValues = props.showEdgeValues !== false;
+  const minValue = props.slider.min ?? 0;
+  const maxValue = props.slider.max ?? 100;
+  const minValueLabel = resolveEdgeValueLabel(props.minValueLabel, minValue);
+  const maxValueLabel = resolveEdgeValueLabel(props.maxValueLabel, maxValue);
+  const wrapperClass = cx15(
+    "mw-slider-field",
+    labelPosition === "top" && "mw-slider-field--label-top",
+    labelPosition === "inline" && "mw-slider-field--label-inline",
+    disabled && "mw-slider-field--disabled",
+    hasError && "mw-slider-field--invalid"
+  );
+  const {
+    ariaLabel: _ignoredAriaLabel,
+    ariaLabelledBy: _ignoredAriaLabelledBy,
+    ariaDescribedBy: _ignoredAriaDescribedBy,
+    style: sliderStyle,
+    ...sliderProps
+  } = props.slider;
+  const renderEdgeValue = (position, value) => /* @__PURE__ */ jsx("span", { className: `mw-slider-field__edge-value mw-slider-field__edge-value--${position}`, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: value }) });
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, "data-label-position": labelPosition, ...props.dataAttributes, children: [
+    /* @__PURE__ */ jsx("div", { className: "mw-slider-field__header", children: /* @__PURE__ */ jsx("div", { className: "mw-slider-field__label", id: labelId, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) }) }),
+    hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-slider-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.description }) }),
+    labelPosition === "top" && showEdgeValues ? /* @__PURE__ */ jsxs("div", { className: "mw-slider-field__values-row", children: [
+      renderEdgeValue("min", minValueLabel),
+      renderEdgeValue("max", maxValueLabel)
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "mw-slider-field__control-row", children: [
+      labelPosition === "inline" && showEdgeValues ? renderEdgeValue("min", minValueLabel) : null,
+      /* @__PURE__ */ jsx("div", { className: "mw-slider-field__slider", children: /* @__PURE__ */ jsx(
+        Slider,
+        {
+          ...sliderProps,
+          id,
+          ariaLabelledBy: labelId,
+          ...describedBy ? { ariaDescribedBy: describedBy } : {},
+          "aria-invalid": hasError ? true : void 0,
+          style: { width: "100%", ...sliderStyle ?? {} }
+        }
+      ) }),
+      labelPosition === "inline" && showEdgeValues ? renderEdgeValue("max", maxValueLabel) : null
+    ] }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-slider-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
+  ] });
+}
+function VolumeSlider(props) {
+  const { orientation, slider, ...fieldProps } = props;
+  return /* @__PURE__ */ jsx(
+    SliderField,
+    {
+      ...fieldProps,
+      label: props.label ?? "Volume",
+      minValueLabel: props.minValueLabel ?? "0",
+      maxValueLabel: props.maxValueLabel ?? "100",
+      slider: {
+        min: 0,
+        max: 100,
+        step: 1,
+        showTooltip: true,
+        ...orientation !== void 0 ? { orientation } : {},
+        ...slider
+      },
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "volume"
+      }
+    }
+  );
+}
+function BrightnessSlider(props) {
+  const { orientation, slider, ...fieldProps } = props;
+  return /* @__PURE__ */ jsx(
+    SliderField,
+    {
+      ...fieldProps,
+      label: props.label ?? "Brightness",
+      minValueLabel: props.minValueLabel ?? "0",
+      maxValueLabel: props.maxValueLabel ?? "100",
+      slider: {
+        min: 0,
+        max: 100,
+        step: 1,
+        showTooltip: true,
+        ...orientation !== void 0 ? { orientation } : {},
+        ...slider
+      },
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "brightness"
+      }
+    }
+  );
+}
+function RadiusSlider(props) {
+  const { orientation, slider, ...fieldProps } = props;
+  return /* @__PURE__ */ jsx(
+    SliderField,
+    {
+      ...fieldProps,
+      label: props.label ?? "Radius",
+      minValueLabel: props.minValueLabel ?? "0px",
+      maxValueLabel: props.maxValueLabel ?? "48px",
+      slider: {
+        min: 0,
+        max: 48,
+        step: 2,
+        showTooltip: true,
+        ...orientation !== void 0 ? { orientation } : {},
+        ...slider
+      },
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "radius"
+      }
+    }
+  );
+}
+function Tab(props) {
+  const { children, className, onClick, id, ...coreProps } = props;
+  const kit = createTabRecipe(coreProps);
+  const { a11y } = kit;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      id,
+      className: [kit.className, className].filter(Boolean).join(" "),
+      style: Object.keys(kit.vars).length > 0 ? kit.vars : void 0,
+      role: a11y.role,
+      "aria-selected": a11y.ariaSelected,
+      "aria-disabled": a11y.ariaDisabled,
+      "aria-label": a11y.ariaLabel,
+      "aria-controls": a11y.ariaControls,
+      tabIndex: a11y.tabIndex,
+      disabled: coreProps.disabled,
+      onClick,
+      type: "button",
+      children
+    }
+  );
+}
+function cx16(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasContent7(value) {
+  if (value === void 0 || value === null || value === false) {
+    return false;
+  }
+  if (typeof value === "string") {
+    return value.trim().length > 0;
+  }
+  return true;
+}
+function focusTab(tabId) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const tab = document.getElementById(tabId);
+  if (tab instanceof HTMLButtonElement) {
+    tab.focus();
+  }
+}
+function toItemState(tab) {
+  const itemState = { value: tab.value };
+  if (tab.disabled) {
+    itemState.disabled = true;
+  }
+  return itemState;
+}
+function renderPanelContent(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsx(Paragraph, { size: "md", children });
+  }
+  return children;
+}
+function TabPanel(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: props.id,
+      role: "tabpanel",
+      "aria-labelledby": props.tabId,
+      className: cx16("mw-tab-group__panel", props.className),
+      hidden: props.hidden,
+      tabIndex: props.hidden ? void 0 : 0,
+      children: renderPanelContent(props.children)
+    }
+  );
+}
+function TabGroup(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-tab-group-${reactId}`;
+  const hasLabel = hasContent7(props.label);
+  const itemStates = React6.useMemo(
+    () => props.tabs.map((tab) => toItemState(tab)),
+    [props.tabs]
+  );
+  const isControlled = props.activeTab !== void 0;
+  const [internalActiveTab, setInternalActiveTab] = React6.useState(
+    () => resolveTabValue(itemStates, props.defaultActiveTab)
+  );
+  const resolvedActiveTab = React6.useMemo(
+    () => resolveTabValue(itemStates, isControlled ? props.activeTab : internalActiveTab),
+    [internalActiveTab, isControlled, itemStates, props.activeTab]
+  );
+  React6.useEffect(() => {
+    if (!isControlled) {
+      setInternalActiveTab(
+        (currentValue) => resolveTabValue(itemStates, currentValue ?? props.defaultActiveTab)
+      );
+    }
+  }, [isControlled, itemStates, props.defaultActiveTab]);
+  const a11yIds = React6.useMemo(
+    () => buildTabGroupA11yIds({
+      id,
+      itemValues: props.tabs.map((tab) => tab.value),
+      hasLabel
+    }),
+    [hasLabel, id, props.tabs]
+  );
+  const selectTab = React6.useCallback(
+    (nextValue) => {
+      const resolvedValue = resolveTabValue(itemStates, nextValue);
+      if (!resolvedValue) {
+        return;
+      }
+      if (!isControlled) {
+        setInternalActiveTab(resolvedValue);
+      }
+      if (resolvedValue !== resolvedActiveTab) {
+        props.onActiveTabChange?.(resolvedValue);
+      }
+    },
+    [isControlled, itemStates, props.onActiveTabChange, resolvedActiveTab]
+  );
+  const handleKeyDown = React6.useCallback(
+    (event) => {
+      let direction;
+      switch (event.key) {
+        case "ArrowRight":
+          direction = "next";
+          break;
+        case "ArrowLeft":
+          direction = "previous";
+          break;
+        case "Home":
+          direction = "start";
+          break;
+        case "End":
+          direction = "end";
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const nextValue = moveTabSelection(itemStates, resolvedActiveTab, direction);
+      if (!nextValue) {
+        return;
+      }
+      selectTab(nextValue);
+      const nextTabId = a11yIds.tabIds[nextValue];
+      if (nextTabId) {
+        focusTab(nextTabId);
+      }
+    },
+    [a11yIds.tabIds, itemStates, resolvedActiveTab, selectTab]
+  );
+  return /* @__PURE__ */ jsxs("section", { className: cx16("mw-tab-group", props.className), ...props.dataAttributes, children: [
+    hasLabel && /* @__PURE__ */ jsx("div", { className: "mw-tab-group__header", children: /* @__PURE__ */ jsx(Paragraph, { size: "md", id: a11yIds.labelId ?? `${id}-label`, children: props.label }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: a11yIds.tabListId,
+        className: "mw-tab-group__list",
+        role: "tablist",
+        "aria-label": hasLabel ? void 0 : props.ariaLabel ?? "Tabs",
+        "aria-labelledby": hasLabel ? a11yIds.labelId : void 0,
+        onKeyDown: handleKeyDown,
+        children: props.tabs.map((tab) => {
+          const tabId = a11yIds.tabIds[tab.value] ?? `${id}-tab-${tab.value}`;
+          const panelId = a11yIds.panelIds[tab.value] ?? `${id}-panel-${tab.value}`;
+          const tabProps = {
+            id: tabId,
+            selected: tab.value === resolvedActiveTab,
+            ariaControls: panelId,
+            onClick: () => selectTab(tab.value)
+          };
+          if (tab.disabled) {
+            tabProps.disabled = true;
+          }
+          if (tab.ariaLabel) {
+            tabProps.ariaLabel = tab.ariaLabel;
+          }
+          return /* @__PURE__ */ jsx(Tab, { ...tabProps, children: tab.label }, tab.value);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mw-tab-group__panels", children: props.tabs.map((tab) => {
+      const panelId = a11yIds.panelIds[tab.value] ?? `${id}-panel-${tab.value}`;
+      const tabId = a11yIds.tabIds[tab.value] ?? `${id}-tab-${tab.value}`;
+      return /* @__PURE__ */ jsx(
+        TabPanel,
+        {
+          id: panelId,
+          tabId,
+          hidden: tab.value !== resolvedActiveTab,
+          children: tab.panel
+        },
+        tab.value
+      );
+    }) })
+  ] });
+}
+function NavigationTabs(props) {
+  return /* @__PURE__ */ jsx(
+    TabGroup,
+    {
+      ...props,
+      ariaLabel: props.ariaLabel ?? "Navigation tabs",
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "navigation-tabs"
+      }
+    }
+  );
+}
+function ContentTabs(props) {
+  return /* @__PURE__ */ jsx(
+    TabGroup,
+    {
+      ...props,
+      ariaLabel: props.ariaLabel ?? "Content tabs",
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "content-tabs"
+      }
+    }
+  );
+}
+function SettingsTabs(props) {
+  return /* @__PURE__ */ jsx(
+    TabGroup,
+    {
+      ...props,
+      ariaLabel: props.ariaLabel ?? "Settings tabs",
+      dataAttributes: {
+        ...props.dataAttributes,
+        "data-purpose": "settings-tabs"
+      }
+    }
+  );
+}
+function cx17(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasContent8(value) {
+  if (value === void 0 || value === null || value === false) {
+    return false;
+  }
+  if (typeof value === "string") {
+    return value.trim().length > 0;
+  }
+  return true;
+}
+function Dialog(props) {
+  const reactId = React6.useId();
+  const id = props.id ?? `mw-dialog-${reactId}`;
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+  const hasTitle = hasContent8(props.title);
+  const hasDescription = hasContent8(props.description);
+  const hasFooter = hasContent8(props.footer) && (props.showFooter ?? true);
+  const dismissible = (props.dismissible ?? true) && props.onClose !== void 0;
+  const dialogOptions = {
+    showFooter: hasFooter,
+    dismissible,
+    ...props.modal !== void 0 ? { modal: props.modal } : {}
+  };
+  if (props.dataAttributes) {
+    dialogOptions.dataAttributes = props.dataAttributes;
+  }
+  if (props.size) {
+    dialogOptions.size = props.size;
+  }
+  if (props.ariaLabel) {
+    dialogOptions.ariaLabel = props.ariaLabel;
+  }
+  if (props.ariaLabelledBy) {
+    dialogOptions.ariaLabelledBy = props.ariaLabelledBy;
+  } else if (props.ariaLabel === void 0 && hasTitle) {
+    dialogOptions.ariaLabelledBy = titleId;
+  }
+  if (props.ariaDescribedBy) {
+    dialogOptions.ariaDescribedBy = props.ariaDescribedBy;
+  } else if (hasDescription) {
+    dialogOptions.ariaDescribedBy = descriptionId;
+  }
+  const kit = createDialogRecipe(dialogOptions);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id,
+      className: cx17(kit.className, props.className),
+      role: kit.a11y.role,
+      ...kit.a11y.ariaModal ? { "aria-modal": "true" } : {},
+      ...kit.a11y.ariaLabel ? { "aria-label": kit.a11y.ariaLabel } : {},
+      ...kit.a11y.ariaLabelledBy ? { "aria-labelledby": kit.a11y.ariaLabelledBy } : {},
+      ...kit.a11y.ariaDescribedBy ? { "aria-describedby": kit.a11y.ariaDescribedBy } : {},
+      tabIndex: -1,
+      ...kit.dataAttributes,
+      children: [
+        (hasTitle || kit.showCloseButton) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("header", { className: "mw-dialog__header", children: [
+            hasTitle ? /* @__PURE__ */ jsx("div", { className: "mw-dialog__heading-group", children: /* @__PURE__ */ jsx("h2", { className: "mw-dialog__title", id: titleId, children: props.title }) }) : /* @__PURE__ */ jsx("span", { className: "mw-dialog__spacer", "aria-hidden": "true" }),
+            kit.showCloseButton && props.onClose && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "mw-dialog__close",
+                "aria-label": "Close dialog",
+                onClick: props.onClose,
+                children: /* @__PURE__ */ jsx(Icon, { name: IconName.X, decorative: true })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mw-dialog__header-divider", "aria-hidden": "true" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mw-dialog__content", children: [
+          hasDescription && /* @__PURE__ */ jsx("p", { className: "mw-dialog__description", id: descriptionId, children: props.description }),
+          props.children
+        ] }),
+        hasFooter && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "mw-dialog__footer-divider", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("footer", { className: "mw-dialog__footer", children: props.footer })
+        ] })
+      ]
+    }
+  );
+}
+function cx18(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function getFocusableElements(container) {
+  if (!container) {
+    return [];
+  }
+  return Array.from(
+    container.querySelectorAll(
+      [
+        "button:not([disabled])",
+        "[href]",
+        "input:not([disabled])",
+        "select:not([disabled])",
+        "textarea:not([disabled])",
+        "[tabindex]:not([tabindex='-1'])"
+      ].join(",")
+    )
+  ).filter(
+    (element) => !element.hasAttribute("hidden") && element.getAttribute("aria-hidden") !== "true"
+  );
+}
+function focusFirstElement(container) {
+  const focusableElements = getFocusableElements(container);
+  const firstFocusable = focusableElements[0];
+  if (firstFocusable) {
+    firstFocusable.focus();
+    return;
+  }
+  container?.focus();
+}
+function DialogModal(props) {
+  const {
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    closeOnEscape = true,
+    closeOnScrimClick = true,
+    restoreFocus = true,
+    portalTarget,
+    overlayClassName,
+    footer,
+    ...dialogProps
+  } = props;
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = React6.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(() => {
+    if (!resolvedOpen) {
+      return;
+    }
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [isControlled, onOpenChange, resolvedOpen]);
+  React6.useEffect(() => {
+    if (!resolvedOpen || typeof document === "undefined") {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    lastFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    document.body.style.overflow = "hidden";
+    const frameId = window.requestAnimationFrame(() => {
+      const dialogElement = overlayRef.current?.querySelector(".mw-dialog") ?? null;
+      focusFirstElement(dialogElement);
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      document.body.style.overflow = previousOverflow;
+      if (restoreFocus) {
+        lastFocusedElementRef.current?.focus();
+      }
+    };
+  }, [resolvedOpen, restoreFocus]);
+  React6.useEffect(() => {
+    if (!resolvedOpen || !closeOnEscape || typeof document === "undefined") {
+      return;
+    }
+    const handleKeyDown2 = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        close();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown2);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown2);
+    };
+  }, [close, closeOnEscape, resolvedOpen]);
+  const handleKeyDown = React6.useCallback(
+    (event) => {
+      if (event.key === "Escape" && closeOnEscape) {
+        event.preventDefault();
+        event.stopPropagation();
+        close();
+        return;
+      }
+      if (event.key !== "Tab") {
+        return;
+      }
+      const dialogElement = overlayRef.current?.querySelector(".mw-dialog") ?? null;
+      const focusableElements = getFocusableElements(dialogElement);
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        dialogElement?.focus();
+        return;
+      }
+      const firstFocusable = focusableElements[0];
+      const lastFocusable = focusableElements[focusableElements.length - 1];
+      const activeElement = document.activeElement;
+      if (event.shiftKey && activeElement === firstFocusable) {
+        event.preventDefault();
+        lastFocusable?.focus();
+      } else if (!event.shiftKey && activeElement === lastFocusable) {
+        event.preventDefault();
+        firstFocusable?.focus();
+      }
+    },
+    [close, closeOnEscape]
+  );
+  const renderedFooter = React6.useMemo(
+    () => typeof footer === "function" ? footer({ close }) : footer,
+    [close, footer]
+  );
+  if (!resolvedOpen || typeof document === "undefined") {
+    return null;
+  }
+  const modalMarkup = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: overlayRef,
+      className: cx18("mw-dialog-modal", overlayClassName),
+      onClick: (event) => {
+        if (!closeOnScrimClick) {
+          return;
+        }
+        const clickTarget = event.target;
+        if (!(clickTarget instanceof Node)) {
+          return;
+        }
+        if (surfaceRef.current?.contains(clickTarget)) {
+          return;
+        }
+        close();
+      },
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mw-dialog-modal__scrim", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { ref: surfaceRef, className: "mw-dialog-modal__surface", children: /* @__PURE__ */ jsx(Dialog, { ...dialogProps, modal: true, footer: renderedFooter, onClose: close }) })
+      ]
+    }
+  );
+  if (portalTarget === null) {
+    return modalMarkup;
+  }
+  return createPortal(modalMarkup, portalTarget ?? document.body);
+}
+function ConfirmDialog(props) {
+  const {
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    onConfirm,
+    onCancel,
+    dataAttributes,
+    ...dialogProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    DialogModal,
+    {
+      ...dialogProps,
+      dataAttributes: {
+        ...dataAttributes,
+        ...createPurposeSemanticAttributes("confirm-dialog")
+      },
+      footer: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          CancelButton,
+          {
+            onClick: () => {
+              onCancel?.();
+              close();
+            },
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ConfirmButton,
+          {
+            onClick: () => {
+              onConfirm?.();
+              close();
+            },
+            children: confirmLabel
+          }
+        )
+      ] })
+    }
+  );
+}
+function DestructiveDialog(props) {
+  const {
+    confirmLabel = "Delete",
+    cancelLabel = "Cancel",
+    onConfirm,
+    onCancel,
+    dataAttributes,
+    ...dialogProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    DialogModal,
+    {
+      ...dialogProps,
+      dataAttributes: {
+        ...dataAttributes,
+        ...createPurposeSemanticAttributes("destructive-dialog")
+      },
+      footer: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          CancelButton,
+          {
+            onClick: () => {
+              onCancel?.();
+              close();
+            },
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DestructiveButton,
+          {
+            onClick: () => {
+              onConfirm?.();
+              close();
+            },
+            children: confirmLabel
+          }
+        )
+      ] })
+    }
+  );
+}
+function InfoDialog(props) {
+  const { acknowledgeLabel = "Okay", onAcknowledge, dataAttributes, ...dialogProps } = props;
+  return /* @__PURE__ */ jsx(
+    DialogModal,
+    {
+      ...dialogProps,
+      dataAttributes: {
+        ...dataAttributes,
+        ...createPurposeSemanticAttributes("info-dialog")
+      },
+      footer: ({ close }) => /* @__PURE__ */ jsx(
+        ConfirmButton,
+        {
+          onClick: () => {
+            onAcknowledge?.();
+            close();
+          },
+          children: acknowledgeLabel
+        }
+      )
+    }
+  );
 }
 
-export { Button, CancelButton, Checkbox, CheckboxField, CreateButton, CurrencyField, DangerButton, Divider, EmailField, H1, H2, H3, Icon, Input, InputField, LinkButton, MarwesProvider, Paragraph, PasswordField, PhoneField, PrimaryButton, SearchField, SecondaryButton, SubmitButton, TextButton, URLField, useRenderKitDebug, useSystem, useTheme };
+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