@marwes-ui/react 1.3.0 → 1.4.0

package/dist/index.js

@@ -1,7 +1,7 @@
 export { MarwesThemeScript, MarwesThemeStyle, createMarwesThemeScript, createMarwesThemeStyle } from './chunk-VFY2GW62.js';
 import '@marwes-ui/presets/firstEdition/styles.css';
-import { createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, createDividerRecipe, createSpacingRecipe, createSliderRecipe, richTextCommandByFormat, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, ThemeMode, resolveThemePreference, nextThemeMode, resolveThemeInput, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, createSkeletonRecipe, headingRecipe, createStatTileRecipe, createDatePickerRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, moveTabSelection, createDialogRecipe, sanitizeCurrencyValue, isThemePreference, themeToCSSVars, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
-export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, IconName, Spacings, SwitchSize, ThemeMode, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
+import { createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, createDividerRecipe, createSpacingRecipe, createSliderRecipe, richTextCommandByFormat, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, ThemeMode, resolveThemePreference, nextThemeMode, resolveThemeInput, createMwTheme, createSpinnerRecipe, createButtonRecipe, ButtonVariant, ButtonAction, IconName, textRecipe, buildInputFieldA11yIds, resolveSelectMode, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, createAvatarRecipe, createPurposeSemanticAttributes, createContextMenuRecipe, createBreadcrumbRecipe, createSkeletonRecipe, createProgressBarRecipe, headingRecipe, paragraphRecipe, createStatTileRecipe, createDrawerRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, buildAccordionFieldA11yIds, buildRadioGroupFieldA11yIds, createBadgeRecipe, createBannerRecipe, buildSwitchFieldA11yIds, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, moveTabSelection, createSkipLinkRecipe, createDialogRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, sanitizeCurrencyValue, isThemePreference, themeToCSSVars, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, createInputRecipe, sanitizeInputOtpValue, createInputOtpRecipe, createSelectRecipe, createTextareaRecipe, createDatePickerRecipe, createAccordionRecipe, radioRecipe, createSwitchRecipe, resolveSegmentedControlValue, moveSegmentedControlSelection, createSegmentedControlRecipe, createSegmentedControlItemRecipe, clampPaginationPage, createPaginationRecipe, createPaginationListRecipe, createPaginationListItemRecipe, createPaginationControlRecipe, resolvePaginationItemAriaLabel, createPaginationEllipsisRecipe, createPaginationPageRecipe, checkboxRecipe, buildGoogleFontsUrl, resolvePaginationAdaptiveProfile } from '@marwes-ui/core';
+export { AvatarSize, AvatarType, BadgeVariant, BannerVariant, ButtonAction, ButtonSize, ButtonVariant, IconName, Spacings, SwitchSize, TextVariant, ThemeMode, createFontStack, createMwTheme, createMwThemeMedia, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 import * as React2 from 'react';
 import { useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -157,7 +157,7 @@ function MarwesProvider({
   variableStrategy = "inline",
   children
 }) {
-  const rootRef = React2.useRef(null);
+  const [providerElement, setProviderElement] = React2.useState(null);
   const [internalPreference, setInternalPreference] = React2.useState(
     defaultPreference ?? defaultMode ?? ThemeMode.light
   );
@@ -208,22 +208,24 @@ function MarwesProvider({
     () => resolveThemeInput({ ...theme ?? {}, mode: activeMode }),
     [activeMode, theme]
   );
+  const mwTheme2 = React2.useMemo(() => createMwTheme(resolved), [resolved]);
+  const renderedChildren = typeof children === "function" ? children(mwTheme2) : children;
   const rootStyle = React2.useMemo(() => {
     if (variableStrategy === "style-tag") return void 0;
     return themeToRootStyle(resolved);
   }, [resolved, variableStrategy]);
   React2.useEffect(() => {
     if (variableStrategy === "style-tag") return;
-    if (rootRef.current) {
-      applyThemeToElement(rootRef.current, resolved);
+    if (providerElement) {
+      applyThemeToElement(providerElement, resolved);
     }
-  }, [resolved, variableStrategy]);
+  }, [providerElement, resolved, variableStrategy]);
   React2.useEffect(() => {
     if (target === "provider") return;
     const apply = () => {
       applyModeAttribute({
         target,
-        providerElement: rootRef.current,
+        providerElement: null,
         mode: activeMode,
         attribute
       });
@@ -245,19 +247,30 @@ function MarwesProvider({
       systemMode,
       setMode,
       setPreference,
-      toggleMode
+      toggleMode,
+      providerElement
     }),
-    [activeMode, activePreference, resolved, setMode, setPreference, systemMode, toggleMode]
+    [
+      activeMode,
+      activePreference,
+      providerElement,
+      resolved,
+      setMode,
+      setPreference,
+      systemMode,
+      toggleMode
+    ]
   );
   return /* @__PURE__ */ jsx(MarwesContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
-      ref: rootRef,
+      ref: setProviderElement,
       className: `mw-theme--${resolved.mode}`,
       "data-marwes-theme": "true",
       "data-marwes-mode": resolved.mode,
+      "data-marwes-personality": resolved.personality,
       style: rootStyle,
-      children
+      children: renderedChildren
     }
   ) });
 }
@@ -285,14 +298,7 @@ function useThemeMode() {
     isSystem: ctx.preference === "system"
   };
 }
-function Icon({
-  name,
-  size,
-  strokeWidth,
-  className,
-  "aria-label": ariaLabel,
-  decorative
-}) {
+function Icon({ name, size, strokeWidth, className, ariaLabel, decorative }) {
   const px = resolveIconSize(size ?? "sm");
   const sw = resolveIconStrokeWidth(strokeWidth ?? "md");
   const def = iconRegistry[name];
@@ -416,7 +422,12 @@ function EmptyStateSpinner(props) {
   );
 }
 function isFilledButtonVariant(variant) {
-  return variant === "primary" || variant === "success";
+  return variant === "primary" || variant === "success" || variant === "danger";
+}
+function hasRenderableLabel(label) {
+  if (label === void 0 || label === null || label === false) return false;
+  if (typeof label === "string") return label.length > 0;
+  return true;
 }
 function Button(props) {
   const kit = createButtonRecipe(props);
@@ -433,7 +444,7 @@ function Button(props) {
         inverted: isFilledButtonVariant(resolvedVariant)
       }
     ) : props.iconLeft ? /* @__PURE__ */ jsx(Icon, { name: props.iconLeft, size: "xs", strokeWidth: "sm", decorative: true }) : null,
-    visibleLabel,
+    hasRenderableLabel(visibleLabel) ? /* @__PURE__ */ jsx("span", { className: "mw-btn__label", children: visibleLabel }) : null,
     !resolvedLoading.isLoading && props.iconRight ? /* @__PURE__ */ jsx(Icon, { name: props.iconRight, size: "xs", strokeWidth: "sm", decorative: true }) : null
   ] });
   if (kit.tag === "button") {
@@ -443,6 +454,7 @@ function Button(props) {
         type: kit.a11y.type,
         disabled: kit.a11y.disabled,
         "aria-label": kit.a11y.ariaLabel,
+        "aria-labelledby": kit.a11y.ariaLabelledBy,
         "aria-busy": kit.a11y.ariaBusy,
         "aria-disabled": kit.a11y.ariaDisabled,
         "aria-pressed": kit.a11y.ariaPressed,
@@ -464,6 +476,7 @@ function Button(props) {
       role: kit.a11y.role,
       tabIndex: kit.a11y.tabIndex,
       "aria-label": kit.a11y.ariaLabel,
+      "aria-labelledby": kit.a11y.ariaLabelledBy,
       "aria-busy": kit.a11y.ariaBusy,
       "aria-disabled": kit.a11y.ariaDisabled,
       "aria-pressed": kit.a11y.ariaPressed,
@@ -484,6 +497,19 @@ function Button(props) {
     }
   );
 }
+function IconButton(props) {
+  const { icon, variant = ButtonVariant.neutral, ...buttonProps } = props;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...buttonProps,
+      variant,
+      iconLeft: icon,
+      iconOnly: true,
+      hasVisibleText: false
+    }
+  );
+}
 function isDevelopmentEnvironment() {
   const nodeProcess = globalThis.process;
   const nodeEnv = nodeProcess?.env?.NODE_ENV;
@@ -541,9 +567,8 @@ function DestructiveButton(props) {
     {
       ...forwardedProps,
       as: "button",
-      variant: ButtonVariant.primary,
+      variant: ButtonVariant.danger,
       action: ButtonAction.delete,
-      error: true,
       confirmation,
       dataAttributes: createPurposeButtonDataAttributes(
         "destructive",
@@ -858,6 +883,16 @@ function SuccessButton(props) {
     }
   );
 }
+function Text(props) {
+  const { children, className: customClassName, style: customStyle, ...opts } = props;
+  const theme = useTheme();
+  const kit = textRecipe(opts, theme);
+  const Tag = kit.tag;
+  const style = { ...kit.vars, ...customStyle };
+  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
+  return /* @__PURE__ */ jsx(Tag, { id: kit.a11y.id, className, style, children });
+}
+var TypographyText = Text;
 var RENDERKIT_EVENT = "marwes/renderkit/renderkit-update";
 var RENDERKIT_DEBUG_FLAG = "__MARWES_RENDERKIT_DEBUG__";
 function isRenderKitDebugEnabled() {
@@ -904,6 +939,7 @@ function Input(props) {
       readOnly: kit.a11y.readOnly,
       required: kit.a11y.required,
       "aria-label": kit.a11y.ariaLabel,
+      "aria-labelledby": kit.a11y.ariaLabelledBy,
       "aria-invalid": kit.a11y.ariaInvalid,
       "aria-describedby": kit.a11y.ariaDescribedBy,
       value: props.value,
@@ -912,6 +948,234 @@ function Input(props) {
     }
   );
 }
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasTextContent(value) {
+  return value !== void 0 && value.trim().length > 0;
+}
+function InputField(props) {
+  const reactId = React2.useId();
+  const id = props.id ?? `mw-input-${reactId}`;
+  const isPasswordField = props.input.type === "password";
+  const [showPassword, setShowPassword] = React2.useState(false);
+  const isSearchField = props.input.type === "search";
+  const [searchValue, setSearchValue] = React2.useState(
+    props.input.value || props.input.defaultValue || ""
+  );
+  const hasSearchValue = isSearchField && (props.input.value !== void 0 ? String(props.input.value).length > 0 : String(searchValue).length > 0);
+  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 showSearchClearButton = hasSearchValue && !disabled && !readOnly;
+  const showSearchIcon = isSearchField && !showSearchClearButton;
+  const wrapperClass = cx(
+    "mw-input-field",
+    disabled && "mw-input-field--disabled",
+    invalid && "mw-input-field--invalid",
+    readOnly && "mw-input-field--readonly"
+  );
+  const inputProps = {
+    ...props.input,
+    id,
+    invalid
+  };
+  if (isPasswordField && showPassword) {
+    inputProps.type = "text";
+  }
+  if (isSearchField) {
+    const originalOnValueChange = props.input.onValueChange;
+    if (props.input.value === void 0) {
+      inputProps.value = searchValue;
+    }
+    inputProps.onValueChange = (value) => {
+      setSearchValue(value);
+      originalOnValueChange?.(value);
+    };
+  }
+  if (mergedDescribedBy) {
+    inputProps.describedBy = mergedDescribedBy;
+  }
+  const handleTogglePassword = () => {
+    setShowPassword((prev) => !prev);
+  };
+  const handleClearSearch = () => {
+    setSearchValue("");
+    props.input.onValueChange?.("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    /* @__PURE__ */ jsx("label", { className: "mw-input-field__label", htmlFor: id, children: /* @__PURE__ */ jsx(Text, { variant: "label", 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 && !disabled && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "mw-input-field__toggle-password",
+          onClick: handleTogglePassword,
+          "aria-label": showPassword ? "Hide password" : "Show password",
+          tabIndex: 0,
+          children: /* @__PURE__ */ jsx(Icon, { name: showPassword ? "eyeOff" : "eye", size: "xs", decorative: true })
+        }
+      ),
+      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",
+          className: "mw-input-field__clear-search",
+          onClick: handleClearSearch,
+          "aria-label": "Clear search",
+          tabIndex: 0,
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "xs", decorative: true })
+        }
+      )
+    ] }),
+    hasHelperText && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.helperText }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
+  ] });
+}
+function cx2(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function InputOtp(props) {
+  const reactId = React2.useId();
+  const id = props.id ?? `mw-input-otp-${reactId}`;
+  const otpLength = Math.max(1, props.length ?? 6);
+  const isControlled = props.value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React2.useState(() => {
+    return sanitizeInputOtpValue(props.defaultValue, otpLength);
+  });
+  const currentValue = sanitizeInputOtpValue(
+    isControlled ? props.value : uncontrolledValue,
+    otpLength
+  );
+  const recipeOptions = {
+    id,
+    value: currentValue,
+    length: otpLength
+  };
+  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 (props.invalid) recipeOptions.invalid = true;
+  if (props.describedBy) recipeOptions.describedBy = props.describedBy;
+  if (props.ariaLabel) recipeOptions.ariaLabel = props.ariaLabel;
+  if (props.label) recipeOptions.label = props.label;
+  if (props.ariaLabelledBy) recipeOptions.ariaLabelledBy = props.ariaLabelledBy;
+  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",
+    {
+      className,
+      style,
+      "data-component": "input-otp",
+      "data-invalid": props.invalid ? "true" : void 0,
+      "data-disabled": props.disabled ? "true" : void 0,
+      children: /* @__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-labelledby": kit.a11y.ariaLabelledBy,
+            "aria-invalid": kit.a11y.ariaInvalid,
+            "aria-describedby": kit.a11y.ariaDescribedBy,
+            value: kit.displayValue,
+            onChange: handleChange
+          }
+        )
+      ] })
+    }
+  );
+}
+function cx3(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasTextContent2(value) {
+  return value !== void 0 && value.trim().length > 0;
+}
+function InputOtpField(props) {
+  const reactId = React2.useId();
+  const id = props.id ?? `mw-input-otp-${reactId}`;
+  const inputOtp = props.inputOtp ?? {};
+  const hasHelperText = hasTextContent2(props.helperText);
+  const hasError = hasTextContent2(props.error);
+  const invalid = hasError || inputOtp.invalid === true;
+  const {
+    helperTextId,
+    errorId,
+    describedBy: mergedDescribedBy
+  } = buildInputFieldA11yIds({
+    id,
+    hasHelperText,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const wrapperClass = cx3(
+    "mw-input-otp-field",
+    hasError && "mw-input-otp-field--invalid",
+    inputOtp.disabled && "mw-input-otp-field--disabled",
+    props.className
+  );
+  const otpProps = {
+    ...inputOtp,
+    id,
+    invalid,
+    ariaLabelledBy: `${id}-label`
+  };
+  if (mergedDescribedBy) {
+    otpProps.describedBy = mergedDescribedBy;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    /* @__PURE__ */ jsx("label", { className: "mw-input-otp-field__label", htmlFor: id, id: `${id}-label`, children: /* @__PURE__ */ jsx(Text, { variant: "label", children: props.label }) }),
+    /* @__PURE__ */ jsx(InputOtp, { ...otpProps }),
+    hasError ? /* @__PURE__ */ jsx("div", { className: "mw-input-otp-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) }) : hasHelperText ? /* @__PURE__ */ jsx("div", { className: "mw-input-otp-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.helperText }) }) : null
+  ] });
+}
 function SelectArrowIcon(props) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -948,7 +1212,6 @@ function getInitialSelectValue(props) {
 }
 function Select(props) {
   const kit = createSelectRecipe(props);
-  const mode = resolveSelectMode(props);
   const isControlled = props.value !== void 0;
   const [uncontrolledValue, setUncontrolledValue] = React2.useState(
     () => getInitialSelectValue(props)
@@ -977,6 +1240,7 @@ function Select(props) {
       disabled: kit.a11y.disabled,
       required: kit.a11y.required,
       "aria-label": kit.a11y.ariaLabel,
+      "aria-labelledby": kit.a11y.ariaLabelledBy,
       "aria-invalid": kit.a11y.ariaInvalid,
       "aria-describedby": kit.a11y.ariaDescribedBy,
       value,
@@ -995,386 +1259,305 @@ function Select(props) {
       ]
     }
   );
-  if (mode === "native") {
-    return selectElement;
-  }
   return /* @__PURE__ */ jsxs("span", { className: "mw-select__control", children: [
     selectElement,
     /* @__PURE__ */ jsx(SelectArrowIcon, { className: "mw-select__control-icon" })
   ] });
 }
-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
-    }
-  );
+function cx4(...parts) {
+  return parts.filter(Boolean).join(" ");
 }
-var formatLabels = {
-  bold: "Bold",
-  italic: "Italic",
-  underline: "Underline"
-};
-function getRichTextCommandDocument() {
-  return document;
+function hasTextContent3(value) {
+  return value !== void 0 && value.trim().length > 0;
 }
-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;
+function getInitialSelectValue2(props) {
+  if (props.value !== void 0) {
+    return props.value;
   }
-  return Array.from(activeFormats);
-}
-function ensureEditorSelection(editorElement) {
-  if (typeof window === "undefined") {
-    return;
+  if (props.defaultValue !== void 0) {
+    return props.defaultValue;
   }
-  editorElement.focus();
-  const selection = window.getSelection();
-  const anchorNode = selection?.anchorNode ?? null;
-  if (anchorNode && isNodeWithinEditor(anchorNode, editorElement)) {
-    return;
+  if (props.placeholder !== void 0) {
+    return "";
   }
-  const range = document.createRange();
-  range.selectNodeContents(editorElement);
-  range.collapse(false);
-  selection?.removeAllRanges();
-  selection?.addRange(range);
+  return props.options[0]?.value ?? "";
 }
-function getFormatTagNames(format) {
-  if (format === "bold") return ["strong", "b"];
-  if (format === "italic") return ["em", "i"];
-  return ["u"];
+function getFirstEnabledOptionIndex(options) {
+  return options.findIndex((option) => !option.disabled);
 }
-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;
+function getLastEnabledOptionIndex(options) {
+  for (let index = options.length - 1; index >= 0; index -= 1) {
+    if (!options[index]?.disabled) {
+      return index;
     }
-    currentNode = currentNode.parentNode;
   }
-  return null;
+  return -1;
 }
-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;
+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;
   }
-  const formatElement = findNearestFormatElement(anchorNode, editorElement, format);
-  if (!formatElement || !formatElement.parentNode) {
-    return false;
+  return getFirstEnabledOptionIndex(options);
+}
+function getNextEnabledOptionIndex(options, currentIndex, direction) {
+  if (options.length === 0) {
+    return -1;
   }
-  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();
+  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;
+    }
   }
-  const nextRange = document.createRange();
-  nextRange.setStart(caretTextNode, 1);
-  nextRange.collapse(true);
-  selection.removeAllRanges();
-  selection.addRange(nextRange);
-  return true;
+  return currentIndex;
 }
-var RichText = React2.forwardRef((props, forwardedRef) => {
-  const kit = createRichTextRecipe(props);
-  const allowedFormats = React2.useMemo(
-    () => resolveRichTextAllowedFormats(props.allowedFormats),
-    [props.allowedFormats]
-  );
-  const normalizedControlledValue = React2.useMemo(
-    () => normalizeRichTextHtml(props.value),
-    [props.value]
-  );
-  const initialUncontrolledValue = React2.useMemo(
-    () => normalizeRichTextHtml(props.defaultValue),
-    [props.defaultValue]
-  );
-  const isControlled = props.value !== void 0;
-  const [uncontrolledHtml, setUncontrolledHtml] = React2.useState(initialUncontrolledValue);
-  const [isEditorEmpty, setIsEditorEmpty] = React2.useState(
-    isRichTextHtmlEmpty(isControlled ? normalizedControlledValue : initialUncontrolledValue)
-  );
-  const [activeFormats, setActiveFormats] = React2.useState([]);
-  const editorElementRef = React2.useRef(null);
-  useRenderKitDebug(kit, "RichText");
-  const editorHtml = isControlled ? normalizedControlledValue : uncontrolledHtml;
-  const style = kit.vars;
-  const className = props.className ? `${kit.className} ${props.className}` : kit.className;
-  const showToolbar = !props.readOnly;
-  const syncEditorState = React2.useCallback(
-    (nextHtml) => {
-      const normalizedHtml = normalizeRichTextHtml(nextHtml);
-      const emptyState = isRichTextHtmlEmpty(normalizedHtml);
-      if (!isControlled) {
-        setUncontrolledHtml(normalizedHtml);
-      }
-      setIsEditorEmpty(emptyState);
-      props.onValueChange?.(normalizedHtml);
-      return normalizedHtml;
-    },
-    [isControlled, props]
+function MarwesSelectFieldControl(props) {
+  const { id, label, select } = props;
+  const listboxId = `${id}-listbox`;
+  const isControlled = select.value !== void 0;
+  const [internalValue, setInternalValue] = React2.useState(() => getInitialSelectValue2(select));
+  const value = isControlled ? select.value ?? "" : internalValue;
+  const [open, setOpen] = React2.useState(false);
+  const [activeIndex, setActiveIndex] = React2.useState(
+    () => getInitialActiveOptionIndex(select.options, value)
   );
-  const refreshActiveFormats = React2.useCallback(() => {
-    setActiveFormats(getActiveFormatsFromSelection(editorElementRef.current));
-  }, []);
-  React2.useLayoutEffect(() => {
-    const editorElement = editorElementRef.current;
-    if (!editorElement) {
+  const rootRef = React2.useRef(null);
+  const buttonRef = React2.useRef(null);
+  const selectedOption = select.options.find((option) => option.value === value) ?? (select.placeholder === void 0 ? select.options[0] : void 0);
+  const placeholderSelected = select.placeholder !== void 0 && value === "";
+  const displayText = placeholderSelected ? select.placeholder : selectedOption?.label ?? "";
+  const accessibleName = select.ariaLabel ?? (hasTextContent3(label) ? label : void 0) ?? (hasTextContent3(displayText) ? displayText : void 0);
+  React2.useEffect(() => {
+    if (!open) {
       return;
     }
-    const normalizedDomHtml = normalizeRichTextHtml(editorElement.innerHTML);
-    if (normalizedDomHtml !== editorHtml) {
-      editorElement.innerHTML = editorHtml;
-    }
-    setIsEditorEmpty(isRichTextHtmlEmpty(editorHtml));
-  }, [editorHtml]);
-  React2.useEffect(() => {
-    if (typeof document === "undefined") {
-      return void 0;
+    function handlePointerDown(event) {
+      if (rootRef.current?.contains(event.target)) {
+        return;
+      }
+      setOpen(false);
     }
-    const handleSelectionChange = () => {
-      refreshActiveFormats();
-    };
-    document.addEventListener("selectionchange", handleSelectionChange);
+    document.addEventListener("pointerdown", handlePointerDown);
     return () => {
-      document.removeEventListener("selectionchange", handleSelectionChange);
+      document.removeEventListener("pointerdown", handlePointerDown);
     };
-  }, [refreshActiveFormats]);
-  const handleInput = () => {
-    const editorElement = editorElementRef.current;
-    if (!editorElement || props.disabled || props.readOnly) {
+  }, [open]);
+  React2.useEffect(() => {
+    if (!open) {
       return;
     }
-    syncEditorState(editorElement.innerHTML);
-    refreshActiveFormats();
+    setActiveIndex(getInitialActiveOptionIndex(select.options, value));
+  }, [open, select.options, value]);
+  React2.useEffect(() => {
+    if (!select.disabled) {
+      return;
+    }
+    setOpen(false);
+  }, [select.disabled]);
+  const commitValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    select.onValueChange?.(nextValue);
   };
-  const toggleFormat = (format) => {
-    if (props.disabled || props.readOnly || typeof document === "undefined") {
+  const selectOptionAtIndex = (index) => {
+    const option = select.options[index];
+    if (!option || option.disabled) {
       return;
     }
-    const commandDocument = getRichTextCommandDocument();
-    const editorElement = editorElementRef.current;
-    if (!editorElement) {
+    commitValue(option.value);
+    setOpen(false);
+    buttonRef.current?.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (select.disabled) {
       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]);
+    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;
       }
-      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]);
-          }
+      case "ArrowUp": {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActiveIndex(getInitialActiveOptionIndex(select.options, value));
+          return;
         }
+        setActiveIndex(
+          (currentIndex) => getNextEnabledOptionIndex(select.options, currentIndex, -1)
+        );
+        return;
       }
-      syncEditorState(editorElement.innerHTML);
-      refreshActiveFormats();
-      return;
-    }
-    if (typeof commandDocument.execCommand === "function") {
-      commandDocument.execCommand(richTextCommandByFormat[format]);
+      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;
     }
-    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;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cx4("mw-select-field__control", open && "mw-select-field__control--open"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: buttonRef,
+            id,
+            type: "button",
+            className: cx4(
+              "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-label": accessibleName,
+            "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: cx4(
+                "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
+      ]
     }
-    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();
-  const kit = paragraphRecipe(opts, theme);
-  const style = { ...kit.vars, ...customStyle };
-  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
-  return /* @__PURE__ */ jsx("p", { id: kit.a11y.id, className, style, children });
-}
-function cx(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
-function hasTextContent(value) {
-  return value !== void 0 && value.trim().length > 0;
-}
-function InputField(props) {
-  const reactId = React2.useId();
-  const id = props.id ?? `mw-input-${reactId}`;
-  const isPasswordField = props.input.type === "password";
-  const [showPassword, setShowPassword] = React2.useState(false);
-  const isSearchField = props.input.type === "search";
-  const [searchValue, setSearchValue] = React2.useState(
-    props.input.value || props.input.defaultValue || ""
   );
-  const hasSearchValue = isSearchField && (props.input.value !== void 0 ? String(props.input.value).length > 0 : String(searchValue).length > 0);
-  const hasHelperText = hasTextContent(props.helperText);
-  const hasError = hasTextContent(props.error);
+}
+function SelectField(props) {
+  const reactId = React2.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,
@@ -1385,99 +1568,76 @@ function InputField(props) {
     hasError,
     externalDescribedBy: props.ariaDescribedBy
   });
-  const disabled = props.input.disabled || false;
-  const readOnly = props.input.readOnly || false;
-  const invalid = hasError || props.input.invalid || false;
-  const showSearchClearButton = hasSearchValue && !disabled && !readOnly;
-  const showSearchIcon = isSearchField && !showSearchClearButton;
-  const wrapperClass = cx(
+  const disabled = props.select.disabled || false;
+  const invalid = hasError || props.select.invalid || false;
+  const wrapperClass = cx4(
     "mw-input-field",
+    "mw-input-field--select",
+    mode === "marwes" && "mw-input-field--select-marwes",
+    props.variant === "date" && "mw-input-field--select-date",
     disabled && "mw-input-field--disabled",
-    invalid && "mw-input-field--invalid",
-    readOnly && "mw-input-field--readonly"
+    invalid && "mw-input-field--invalid"
   );
-  const inputProps = {
-    ...props.input,
+  const selectProps = {
+    ...props.select,
     id,
     invalid
   };
-  if (isPasswordField && showPassword) {
-    inputProps.type = "text";
-  }
-  if (isSearchField) {
-    const originalOnValueChange = props.input.onValueChange;
-    if (props.input.value === void 0) {
-      inputProps.value = searchValue;
-    }
-    inputProps.onValueChange = (value) => {
-      setSearchValue(value);
-      originalOnValueChange?.(value);
-    };
-  }
   if (mergedDescribedBy) {
-    inputProps.describedBy = mergedDescribedBy;
+    selectProps.describedBy = mergedDescribedBy;
   }
-  const handleTogglePassword = () => {
-    setShowPassword((prev) => !prev);
-  };
-  const handleClearSearch = () => {
-    setSearchValue("");
-    props.input.onValueChange?.("");
-  };
   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 && !disabled && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "mw-input-field__toggle-password",
-          onClick: handleTogglePassword,
-          "aria-label": showPassword ? "Hide password" : "Show password",
-          tabIndex: 0,
-          children: /* @__PURE__ */ jsx(Icon, { name: showPassword ? "eyeOff" : "eye", size: "xs", decorative: true })
-        }
-      ),
-      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",
-          className: "mw-input-field__clear-search",
-          onClick: handleClearSearch,
-          "aria-label": "Clear search",
-          tabIndex: 0,
-          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "xs", decorative: true })
-        }
-      )
-    ] }),
-    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 }) })
+    /* @__PURE__ */ jsx("label", { className: "mw-input-field__label", htmlFor: id, children: /* @__PURE__ */ jsx(Text, { variant: "label", 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, label: props.label, select: selectProps }) }),
+    hasHelperText && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.helperText }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
   ] });
 }
-function cx2(...parts) {
+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-labelledby": kit.a11y.ariaLabelledBy,
+      "aria-invalid": kit.a11y.ariaInvalid,
+      "aria-describedby": kit.a11y.ariaDescribedBy,
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: handleChange
+    }
+  );
+}
+function cx5(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function hasTextContent2(value) {
+function hasTextContent4(value) {
   return value !== void 0 && value.trim().length > 0;
 }
-function InputOtp(props) {
+function TextareaField(props) {
   const reactId = React2.useId();
-  const id = props.id ?? `mw-input-otp-${reactId}`;
-  const otpLength = Math.max(1, props.length ?? 6);
-  const hasHelperText = hasTextContent2(props.helperText);
-  const hasError = hasTextContent2(props.error);
-  const invalid = hasError || props.invalid === true;
-  const isControlled = props.value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = React2.useState(() => {
-    return sanitizeInputOtpValue(props.defaultValue, otpLength);
-  });
-  const currentValue = sanitizeInputOtpValue(
-    isControlled ? props.value : uncontrolledValue,
-    otpLength
-  );
+  const id = props.id ?? `mw-textarea-${reactId}`;
+  const hasHelperText = hasTextContent4(props.helperText);
+  const hasCounterText = hasTextContent4(props.counterText);
+  const hasError = hasTextContent4(props.error);
   const {
     helperTextId,
     errorId,
@@ -1488,466 +1648,349 @@ function InputOtp(props) {
     hasError,
     externalDescribedBy: props.ariaDescribedBy
   });
-  const recipeOptions = {
+  const disabled = props.textarea.disabled || false;
+  const readOnly = props.textarea.readOnly || false;
+  const invalid = hasError || props.textarea.invalid || false;
+  const wrapperClass = cx5(
+    "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,
-    value: currentValue,
-    length: otpLength,
     invalid
   };
-  if (props.name) {
-    recipeOptions.name = props.name;
-  }
-  if (props.placeholderCharacter) {
-    recipeOptions.placeholderCharacter = props.placeholderCharacter;
+  if (mergedDescribedBy) {
+    textareaProps.describedBy = mergedDescribedBy;
   }
-  if (props.disabled) {
-    recipeOptions.disabled = true;
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    /* @__PURE__ */ jsx("label", { className: "mw-input-field__label", htmlFor: id, children: /* @__PURE__ */ jsx(Text, { variant: "label", children: props.label }) }),
+    /* @__PURE__ */ jsx("div", { className: "mw-input-field__input-wrapper", children: /* @__PURE__ */ jsx(Textarea, { ...textareaProps }) }),
+    (hasHelperText || hasCounterText) && !hasError && /* @__PURE__ */ jsxs("div", { className: "mw-input-field__meta", children: [
+      hasHelperText ? /* @__PURE__ */ jsx("div", { className: "mw-input-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.helperText }) }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+      hasCounterText && /* @__PURE__ */ jsx("div", { className: "mw-input-field__counter", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.counterText }) })
+    ] }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
+  ] });
+}
+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;
   }
-  if (props.readOnly) {
-    recipeOptions.readOnly = true;
+  return editorElement.contains(node.nodeType === Node.TEXT_NODE ? node.parentNode : node);
+}
+function getActiveFormatsFromSelection(editorElement) {
+  if (!editorElement || typeof window === "undefined" || typeof document === "undefined") {
+    return [];
   }
-  if (props.required) {
-    recipeOptions.required = true;
+  const commandDocument = getRichTextCommandDocument();
+  const selection = window.getSelection();
+  const anchorNode = selection?.anchorNode ?? null;
+  if (!anchorNode || !isNodeWithinEditor(anchorNode, editorElement)) {
+    return [];
   }
-  if (mergedDescribedBy) {
-    recipeOptions.describedBy = mergedDescribedBy;
+  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 (props.ariaLabel) {
-    recipeOptions.ariaLabel = props.ariaLabel;
+  if (activeFormats.size > 0) {
+    return Array.from(activeFormats);
   }
-  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__ */ 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
-      ]
+  let currentNode = anchorNode.nodeType === Node.TEXT_NODE ? anchorNode.parentNode : anchorNode;
+  while (currentNode && currentNode !== editorElement) {
+    if (!(currentNode instanceof HTMLElement)) {
+      currentNode = currentNode.parentNode;
+      continue;
     }
-  );
-}
-function cx3(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
-function hasTextContent3(value) {
-  return value !== void 0 && value.trim().length > 0;
-}
-function getInitialSelectValue2(props) {
-  if (props.value !== void 0) {
-    return props.value;
+    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;
   }
-  if (props.defaultValue !== void 0) {
-    return props.defaultValue;
+  return Array.from(activeFormats);
+}
+function ensureEditorSelection(editorElement) {
+  if (typeof window === "undefined") {
+    return;
   }
-  if (props.placeholder !== void 0) {
-    return "";
+  editorElement.focus();
+  const selection = window.getSelection();
+  const anchorNode = selection?.anchorNode ?? null;
+  if (anchorNode && isNodeWithinEditor(anchorNode, editorElement)) {
+    return;
   }
-  return props.options[0]?.value ?? "";
+  const range = document.createRange();
+  range.selectNodeContents(editorElement);
+  range.collapse(false);
+  selection?.removeAllRanges();
+  selection?.addRange(range);
 }
-function getFirstEnabledOptionIndex(options) {
-  return options.findIndex((option) => !option.disabled);
+function getFormatTagNames(format) {
+  if (format === "bold") return ["strong", "b"];
+  if (format === "italic") return ["em", "i"];
+  return ["u"];
 }
-function getLastEnabledOptionIndex(options) {
-  for (let index = options.length - 1; index >= 0; index -= 1) {
-    if (!options[index]?.disabled) {
-      return index;
+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 -1;
-}
-function getSelectedOptionIndex(options, value) {
-  return options.findIndex((option) => option.value === value && !option.disabled);
+  return null;
 }
-function getInitialActiveOptionIndex(options, value) {
-  const selectedIndex = getSelectedOptionIndex(options, value);
-  if (selectedIndex !== -1) {
-    return selectedIndex;
+function exitActiveFormatAtCaret(editorElement, format) {
+  if (typeof window === "undefined") {
+    return false;
   }
-  return getFirstEnabledOptionIndex(options);
-}
-function getNextEnabledOptionIndex(options, currentIndex, direction) {
-  if (options.length === 0) {
-    return -1;
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return false;
   }
-  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;
-    }
+  const range = selection.getRangeAt(0);
+  const anchorNode = selection.anchorNode;
+  if (!range.collapsed || !anchorNode || !isNodeWithinEditor(anchorNode, editorElement)) {
+    return false;
   }
-  return currentIndex;
+  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;
 }
-function MarwesSelectFieldControl(props) {
-  const { id, label, select } = props;
-  const listboxId = `${id}-listbox`;
-  const isControlled = select.value !== void 0;
-  const [internalValue, setInternalValue] = React2.useState(() => getInitialSelectValue2(select));
-  const value = isControlled ? select.value ?? "" : internalValue;
-  const [open, setOpen] = React2.useState(false);
-  const [activeIndex, setActiveIndex] = React2.useState(
-    () => getInitialActiveOptionIndex(select.options, value)
+var RichText = React2.forwardRef((props, forwardedRef) => {
+  const kit = createRichTextRecipe(props);
+  const allowedFormats = React2.useMemo(
+    () => resolveRichTextAllowedFormats(props.allowedFormats),
+    [props.allowedFormats]
   );
-  const rootRef = React2.useRef(null);
-  const buttonRef = React2.useRef(null);
-  const selectedOption = select.options.find((option) => option.value === value) ?? (select.placeholder === void 0 ? select.options[0] : void 0);
-  const placeholderSelected = select.placeholder !== void 0 && value === "";
-  const displayText = placeholderSelected ? select.placeholder : selectedOption?.label ?? "";
-  const accessibleName = select.ariaLabel ?? (hasTextContent3(label) ? label : void 0) ?? (hasTextContent3(displayText) ? displayText : void 0);
-  React2.useEffect(() => {
-    if (!open) {
-      return;
-    }
-    function handlePointerDown(event) {
-      if (rootRef.current?.contains(event.target)) {
-        return;
+  const normalizedControlledValue = React2.useMemo(
+    () => normalizeRichTextHtml(props.value),
+    [props.value]
+  );
+  const initialUncontrolledValue = React2.useMemo(
+    () => normalizeRichTextHtml(props.defaultValue),
+    [props.defaultValue]
+  );
+  const isControlled = props.value !== void 0;
+  const [uncontrolledHtml, setUncontrolledHtml] = React2.useState(initialUncontrolledValue);
+  const [isEditorEmpty, setIsEditorEmpty] = React2.useState(
+    isRichTextHtmlEmpty(isControlled ? normalizedControlledValue : initialUncontrolledValue)
+  );
+  const [activeFormats, setActiveFormats] = React2.useState([]);
+  const editorElementRef = React2.useRef(null);
+  useRenderKitDebug(kit, "RichText");
+  const editorHtml = isControlled ? normalizedControlledValue : uncontrolledHtml;
+  const style = kit.vars;
+  const className = props.className ? `${kit.className} ${props.className}` : kit.className;
+  const showToolbar = !props.readOnly;
+  const syncEditorState = React2.useCallback(
+    (nextHtml) => {
+      const normalizedHtml = normalizeRichTextHtml(nextHtml);
+      const emptyState = isRichTextHtmlEmpty(normalizedHtml);
+      if (!isControlled) {
+        setUncontrolledHtml(normalizedHtml);
       }
-      setOpen(false);
-    }
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-    };
-  }, [open]);
-  React2.useEffect(() => {
-    if (!open) {
-      return;
-    }
-    setActiveIndex(getInitialActiveOptionIndex(select.options, value));
-  }, [open, select.options, value]);
-  React2.useEffect(() => {
-    if (!select.disabled) {
+      setIsEditorEmpty(emptyState);
+      props.onValueChange?.(normalizedHtml);
+      return normalizedHtml;
+    },
+    [isControlled, props]
+  );
+  const refreshActiveFormats = React2.useCallback(() => {
+    setActiveFormats(getActiveFormatsFromSelection(editorElementRef.current));
+  }, []);
+  React2.useLayoutEffect(() => {
+    const editorElement = editorElementRef.current;
+    if (!editorElement) {
       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;
+    const normalizedDomHtml = normalizeRichTextHtml(editorElement.innerHTML);
+    if (normalizedDomHtml !== editorHtml) {
+      editorElement.innerHTML = editorHtml;
     }
-    commitValue(option.value);
-    setOpen(false);
-    buttonRef.current?.focus();
-  };
-  const handleKeyDown = (event) => {
-    if (select.disabled) {
-      return;
+    setIsEditorEmpty(isRichTextHtmlEmpty(editorHtml));
+  }, [editorHtml]);
+  React2.useEffect(() => {
+    if (typeof document === "undefined") {
+      return void 0;
     }
-    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;
+    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();
   };
-  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-label": accessibleName,
-            "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" })
-            ]
+  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;
           }
-        ),
-        select.name ? /* @__PURE__ */ jsx(
-          "input",
-          {
-            "aria-hidden": "true",
-            className: "mw-select-field__proxy-input",
-            name: select.name,
-            type: "hidden",
-            value,
-            readOnly: true
+          if (!commandDocument.queryCommandState(richTextCommandByFormat[activeFormat])) {
+            commandDocument.execCommand(richTextCommandByFormat[activeFormat]);
           }
-        ) : 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
-      ]
+        }
+      }
+      syncEditorState(editorElement.innerHTML);
+      refreshActiveFormats();
+      return;
     }
-  );
-}
-function SelectField(props) {
-  const reactId = React2.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",
-    props.variant === "date" && "mw-input-field--select-date",
-    disabled && "mw-input-field--disabled",
-    invalid && "mw-input-field--invalid"
-  );
-  const selectProps = {
-    ...props.select,
-    id,
-    invalid
+    if (typeof commandDocument.execCommand === "function") {
+      commandDocument.execCommand(richTextCommandByFormat[format]);
+    }
+    syncEditorState(editorElement.innerHTML);
+    refreshActiveFormats();
   };
-  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, label: props.label, 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 = React2.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
+  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);
   };
-  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 }) })
+  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 })
   ] });
-}
-function cx5(...parts) {
+});
+RichText.displayName = "RichText";
+function cx6(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function hasTextContent5(value) {
@@ -1968,7 +2011,7 @@ function RichTextField(props) {
   const disabled = props.editor.disabled || false;
   const readOnly = props.editor.readOnly || false;
   const invalid = hasError || props.editor.invalid || false;
-  const wrapperClass = cx5(
+  const wrapperClass = cx6(
     "mw-input-field",
     "mw-input-field--rich-text",
     disabled && "mw-input-field--disabled",
@@ -1994,12 +2037,12 @@ function RichTextField(props) {
         onClick: () => {
           editorRef.current?.focus();
         },
-        children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label })
+        children: /* @__PURE__ */ jsx(Text, { variant: "label", 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 }) })
+    hasHelperText && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.helperText }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
   ] });
 }
 function DropdownField(props) {
@@ -2273,239 +2316,53 @@ function AvatarGroup(props) {
           {
             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 = React2.useRef(null);
-  React2.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 = React2.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 = React2.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] = React2.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 }) })
+          },
+          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")
+      }
+    }
+  );
+}
 var Divider = React2.forwardRef((props, ref) => {
   const { className: customClassName, style: customStyle, ...opts } = props;
   const kit = createDividerRecipe(opts);
@@ -2514,6 +2371,166 @@ var Divider = React2.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx("hr", { ref, ...kit.a11y, ...kit.dataAttributes, className, style });
 });
 Divider.displayName = "Divider";
+function cx7(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function ContextMenu(props) {
+  const { items, ariaLabel, dataAttributes, onSelect, className, ...restProps } = props;
+  const recipeOptions = { items };
+  if (ariaLabel !== void 0) {
+    recipeOptions.ariaLabel = ariaLabel;
+  }
+  if (dataAttributes !== void 0) {
+    recipeOptions.dataAttributes = dataAttributes;
+  }
+  const kit = createContextMenuRecipe(recipeOptions);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restProps,
+      ...kit.dataAttributes,
+      className: cx7(kit.className, className),
+      role: kit.a11y.role,
+      "aria-label": kit.a11y.ariaLabel,
+      children: kit.items.map((item) => {
+        if (item.kind === "divider") {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: item.className,
+              role: item.a11y.role,
+              "aria-orientation": item.a11y.ariaOrientation,
+              ...item.dataAttributes
+            },
+            item.key
+          );
+        }
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: item.a11y.type,
+            role: item.a11y.role,
+            disabled: item.a11y.disabled,
+            "aria-disabled": item.a11y.ariaDisabled,
+            className: item.className,
+            onClick: () => {
+              if (item.item.disabled) return;
+              onSelect?.(item.value, item.item);
+            },
+            ...item.dataAttributes,
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: "mw-context-menu__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { name: item.icon, decorative: true }) }),
+              /* @__PURE__ */ jsx("span", { className: "mw-context-menu__label", children: item.label })
+            ]
+          },
+          item.key
+        );
+      })
+    }
+  );
+}
+function cx8(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function Breadcrumb(props) {
+  const {
+    items,
+    ariaLabel,
+    showHome,
+    homeHref,
+    homeLabel,
+    dataAttributes,
+    onItemSelect,
+    onHomeClick,
+    className,
+    ...restProps
+  } = props;
+  const kit = createBreadcrumbRecipe({
+    items,
+    ...ariaLabel !== void 0 ? { ariaLabel } : {},
+    ...showHome !== void 0 ? { showHome } : {},
+    ...homeHref !== void 0 ? { homeHref } : {},
+    ...homeLabel !== void 0 ? { homeLabel } : {},
+    ...dataAttributes !== void 0 ? { dataAttributes } : {}
+  });
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ...restProps,
+      ...kit.dataAttributes,
+      className: cx8(kit.className, className),
+      "aria-label": kit.a11y.ariaLabel,
+      children: /* @__PURE__ */ jsx("ol", { className: kit.list.className, role: kit.list.a11y.role, children: kit.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: item.className, ...item.dataAttributes, children: [
+        index > 0 && /* @__PURE__ */ jsx("span", { className: kit.separator.className, "aria-hidden": kit.separator.a11y.ariaHidden, children: /* @__PURE__ */ jsx(Icon, { name: IconName.ChevronRight, decorative: true, size: 12 }) }),
+        item.kind === "home" ? renderHomeItem(item, onHomeClick) : /* @__PURE__ */ jsx(BreadcrumbAction, { item, onItemSelect })
+      ] }, item.key)) })
+    }
+  );
+}
+function renderHomeItem(item, onHomeClick) {
+  const commonProps = {
+    className: item.actionClassName,
+    "aria-label": item.a11y.ariaLabel,
+    "aria-current": item.current ? "page" : void 0
+  };
+  if (item.href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...commonProps,
+        href: item.href,
+        onClick: (event) => {
+          onHomeClick?.(event);
+        },
+        children: /* @__PURE__ */ jsx(Icon, { name: IconName.Home, decorative: true, size: 14 })
+      }
+    );
+  }
+  if (onHomeClick && !item.current) {
+    return /* @__PURE__ */ jsx("button", { type: "button", ...commonProps, onClick: onHomeClick, children: /* @__PURE__ */ jsx(Icon, { name: IconName.Home, decorative: true, size: 14 }) });
+  }
+  return /* @__PURE__ */ jsx("span", { ...commonProps, children: /* @__PURE__ */ jsx(Icon, { name: IconName.Home, decorative: true, size: 14 }) });
+}
+function BreadcrumbAction({ item, onItemSelect }) {
+  const sourceItem = item.item ?? {
+    label: item.label,
+    ...item.value ? { value: item.value } : {},
+    ...item.href ? { href: item.href } : {},
+    current: item.current
+  };
+  const commonProps = {
+    className: item.actionClassName,
+    "aria-label": item.a11y.ariaLabel,
+    "aria-current": item.a11y.ariaCurrent
+  };
+  if (item.current) {
+    return /* @__PURE__ */ jsx("span", { ...commonProps, children: item.label });
+  }
+  if (item.href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...commonProps,
+        href: item.href,
+        onClick: (event) => {
+          onItemSelect?.(item.value ?? item.label, sourceItem, event);
+        },
+        children: item.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...commonProps,
+      onClick: (event) => {
+        onItemSelect?.(item.value ?? item.label, sourceItem, event);
+      },
+      children: item.label
+    }
+  );
+}
 function Skeleton(props) {
   const {
     className,
@@ -2559,6 +2576,76 @@ function Skeleton(props) {
     }
   );
 }
+function ProgressBar(props) {
+  const {
+    className,
+    style,
+    dataAttributes,
+    id,
+    label,
+    value,
+    min,
+    max,
+    size,
+    state,
+    disabled,
+    showLabel,
+    showPercentage,
+    valueLabel,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    ...nativeDivProps
+  } = props;
+  const resolvedAriaLabel = ariaLabel ?? (typeof nativeDivProps["aria-label"] === "string" ? nativeDivProps["aria-label"] : void 0);
+  const kit = createProgressBarRecipe({
+    ...id !== void 0 ? { id } : {},
+    ...label !== void 0 ? { label } : {},
+    ...value !== void 0 ? { value } : {},
+    ...min !== void 0 ? { min } : {},
+    ...max !== void 0 ? { max } : {},
+    ...size !== void 0 ? { size } : {},
+    ...state !== void 0 ? { state } : {},
+    ...disabled !== void 0 ? { disabled } : {},
+    ...showLabel !== void 0 ? { showLabel } : {},
+    ...showPercentage !== void 0 ? { showPercentage } : {},
+    ...valueLabel !== void 0 ? { valueLabel } : {},
+    ...resolvedAriaLabel !== void 0 ? { ariaLabel: resolvedAriaLabel } : {},
+    ...ariaLabelledBy !== void 0 ? { ariaLabelledBy } : {},
+    ...ariaDescribedBy !== void 0 ? { ariaDescribedBy } : {}
+  });
+  useRenderKitDebug(kit, "ProgressBar");
+  const mergedClassName = [kit.className, className].filter(Boolean).join(" ");
+  const mergedStyle = { ...kit.vars, ...style };
+  const hasLabelRow = kit.showLabel || kit.showPercentage;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...nativeDivProps,
+      ...kit.dataAttributes,
+      ...dataAttributes,
+      id: kit.a11y.id,
+      role: kit.a11y.role,
+      "aria-valuemin": kit.a11y.ariaValueMin,
+      "aria-valuemax": kit.a11y.ariaValueMax,
+      "aria-valuenow": kit.a11y.ariaValueNow,
+      "aria-valuetext": kit.a11y.ariaValueText,
+      "aria-label": kit.a11y.ariaLabel,
+      "aria-labelledby": kit.a11y.ariaLabelledBy,
+      "aria-describedby": kit.a11y.ariaDescribedBy,
+      "aria-disabled": kit.a11y.ariaDisabled ? "true" : void 0,
+      className: mergedClassName,
+      style: mergedStyle,
+      children: [
+        hasLabelRow ? /* @__PURE__ */ jsxs("div", { className: "mw-progress-bar__label-row", children: [
+          kit.showLabel ? /* @__PURE__ */ jsx("span", { id: kit.labelId, className: kit.labelClassName, children: kit.label }) : null,
+          kit.showPercentage ? /* @__PURE__ */ jsx("span", { className: kit.percentageClassName, children: kit.percentageLabel }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: kit.trackClassName, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: kit.fillClassName }) })
+      ]
+    }
+  );
+}
 var Spacing = React2.forwardRef((props, ref) => {
   const { className: customClassName, scale, size, spacing, style: customStyle } = props;
   const resolvedSize = spacing ?? size;
@@ -2596,6 +2683,14 @@ function H3(props) {
   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 Paragraph(props) {
+  const { children, className: customClassName, style: customStyle, ...opts } = props;
+  const theme = useTheme();
+  const kit = paragraphRecipe(opts, theme);
+  const style = { ...kit.vars, ...customStyle };
+  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
+  return /* @__PURE__ */ jsx("p", { id: kit.a11y.id, className, style, children });
+}
 function StatTile(props) {
   const {
     className,
@@ -2648,6 +2743,9 @@ function DatePicker(props) {
     nextYearLabel,
     cancelLabel,
     applyLabel,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
     calendarLabel,
     dataAttributes,
     onPreviousYear,
@@ -2670,6 +2768,9 @@ function DatePicker(props) {
     ...nextYearLabel !== void 0 ? { nextYearLabel } : {},
     ...cancelLabel !== void 0 ? { cancelLabel } : {},
     ...applyLabel !== void 0 ? { applyLabel } : {},
+    ...ariaLabel !== void 0 ? { ariaLabel } : {},
+    ...ariaLabelledBy !== void 0 ? { ariaLabelledBy } : {},
+    ...ariaDescribedBy !== void 0 ? { ariaDescribedBy } : {},
     ...calendarLabel !== void 0 ? { calendarLabel } : {},
     ...dataAttributes !== void 0 ? { dataAttributes } : {}
   });
@@ -2680,7 +2781,9 @@ function DatePicker(props) {
       ...nativeProps,
       ...kit.dataAttributes,
       className: mergedClassName,
-      "aria-label": kit.labels.calendar,
+      "aria-label": kit.a11y.ariaLabel,
+      "aria-labelledby": kit.a11y.ariaLabelledBy,
+      "aria-describedby": kit.a11y.ariaDescribedBy,
       children: [
         /* @__PURE__ */ jsxs("header", { className: kit.slots.headerClassName, children: [
           /* @__PURE__ */ jsxs("div", { className: kit.slots.navGroupClassName, children: [
@@ -2779,6 +2882,151 @@ function DatePicker(props) {
     }
   );
 }
+function cx9(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasTextContent6(value) {
+  return value !== void 0 && value.trim().length > 0;
+}
+function DatePickerField(props) {
+  const reactId = React2.useId();
+  const id = props.id ?? `mw-date-picker-${reactId}`;
+  const labelId = `${id}-label`;
+  const hasHelperText = hasTextContent6(props.helperText);
+  const hasError = hasTextContent6(props.error);
+  const {
+    helperTextId,
+    errorId,
+    describedBy: mergedDescribedBy
+  } = buildInputFieldA11yIds({
+    id,
+    hasHelperText,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const wrapperClass = cx9(
+    "mw-date-picker-field",
+    hasError && "mw-date-picker-field--invalid",
+    props.className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    /* @__PURE__ */ jsx("span", { className: "mw-date-picker-field__label", id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "label", children: props.label }) }),
+    /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        ...props.datePicker,
+        ariaLabelledBy: labelId,
+        ...mergedDescribedBy ? { ariaDescribedBy: mergedDescribedBy } : {}
+      }
+    ),
+    hasHelperText && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-date-picker-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.helperText }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-date-picker-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
+  ] });
+}
+function cx10(...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 Drawer(props) {
+  const reactId = React2.useId();
+  const id = props.id ?? `mw-drawer-${reactId}`;
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+  const hasTitle = hasContent(props.title);
+  const hasDescription = hasContent(props.description);
+  const hasFooter = hasContent(props.footer) && (props.showFooter ?? true);
+  const dismissible = (props.dismissible ?? true) && props.onClose !== void 0;
+  const drawerOptions = {
+    showFooter: hasFooter,
+    dismissible,
+    ...props.modal !== void 0 ? { modal: props.modal } : {},
+    ...props.showScrim !== void 0 ? { showScrim: props.showScrim } : {}
+  };
+  if (props.dataAttributes) {
+    drawerOptions.dataAttributes = props.dataAttributes;
+  }
+  if (props.size) {
+    drawerOptions.size = props.size;
+  }
+  if (props.placement) {
+    drawerOptions.placement = props.placement;
+  }
+  if (props.ariaLabel) {
+    drawerOptions.ariaLabel = props.ariaLabel;
+  }
+  if (props.ariaLabelledBy) {
+    drawerOptions.ariaLabelledBy = props.ariaLabelledBy;
+  } else if (props.ariaLabel === void 0 && hasTitle) {
+    drawerOptions.ariaLabelledBy = titleId;
+  }
+  if (props.ariaDescribedBy) {
+    drawerOptions.ariaDescribedBy = props.ariaDescribedBy;
+  } else if (hasDescription) {
+    drawerOptions.ariaDescribedBy = descriptionId;
+  }
+  const kit = createDrawerRecipe(drawerOptions);
+  return /* @__PURE__ */ jsxs("div", { className: cx10(kit.className, props.className), style: kit.vars, ...kit.dataAttributes, children: [
+    kit.showScrim && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: kit.scrim.className,
+        style: kit.scrim.vars,
+        "aria-hidden": "true",
+        onClick: dismissible ? props.onClose : void 0,
+        ...kit.scrim.dataAttributes
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id,
+        className: cx10(kit.panel.className, props.panelClassName),
+        style: kit.panel.vars,
+        role: kit.panel.a11y.role,
+        ...kit.panel.a11y.ariaModal ? { "aria-modal": "true" } : {},
+        ...kit.panel.a11y.ariaLabel ? { "aria-label": kit.panel.a11y.ariaLabel } : {},
+        ...kit.panel.a11y.ariaLabelledBy ? { "aria-labelledby": kit.panel.a11y.ariaLabelledBy } : {},
+        ...kit.panel.a11y.ariaDescribedBy ? { "aria-describedby": kit.panel.a11y.ariaDescribedBy } : {},
+        tabIndex: -1,
+        ...kit.panel.dataAttributes,
+        children: [
+          (hasTitle || kit.showCloseButton) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "mw-drawer__header", children: [
+              hasTitle ? /* @__PURE__ */ jsx("div", { className: "mw-drawer__heading-group", children: /* @__PURE__ */ jsx("h2", { className: "mw-drawer__title", id: titleId, children: props.title }) }) : /* @__PURE__ */ jsx("span", { className: "mw-drawer__spacer", "aria-hidden": "true" }),
+              kit.showCloseButton && props.onClose && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "mw-drawer__close",
+                  "aria-label": "Close drawer",
+                  onClick: props.onClose,
+                  children: /* @__PURE__ */ jsx(Icon, { name: IconName.X, decorative: true })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mw-drawer__header-divider", "aria-hidden": "true" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mw-drawer__content", children: [
+            hasDescription && /* @__PURE__ */ jsx("p", { className: "mw-drawer__description", id: descriptionId, children: props.description }),
+            props.children
+          ] }),
+          hasFooter && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "mw-drawer__footer-divider", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("div", { className: "mw-drawer__footer", children: props.footer })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 function Card(props) {
   const { title, children, className, dataAttributes, ...nativeDivProps } = props;
   const kit = createCardRecipe(dataAttributes ? { dataAttributes } : {});
@@ -2831,7 +3079,7 @@ function StatCard(props) {
     }
   );
 }
-function cx8(...parts) {
+function cx11(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function Toast(props) {
@@ -2842,7 +3090,7 @@ function Toast(props) {
     "div",
     {
       id,
-      className: cx8(kit.className, className),
+      className: cx11(kit.className, className),
       role: a11y.role,
       "aria-live": a11y.ariaLive,
       "aria-atomic": "true",
@@ -2930,7 +3178,7 @@ function InfoToast(props) {
     }
   );
 }
-function cx9(...parts) {
+function cx12(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function renderToastByIntent(toast, onDismiss) {
@@ -3072,7 +3320,7 @@ function ToastViewportItem(props) {
 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(
+  return /* @__PURE__ */ jsx("div", { className: cx12("mw-toast-container", `mw-toast-container--${placement}`, props.className), children: visibleToasts.map((toast) => /* @__PURE__ */ jsx(
     ToastViewportItem,
     {
       toast,
@@ -3169,7 +3417,7 @@ function Tooltip(props) {
   );
 }
 var TOOLTIP_EXIT_DURATION_MS = 160;
-function cx10(...parts) {
+function cx13(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function TooltipGroup(props) {
@@ -3229,7 +3477,7 @@ function TooltipGroup(props) {
       ...nativeSpanProps,
       ...dataAttributes,
       id,
-      className: cx10("mw-tooltip-group", className),
+      className: cx13("mw-tooltip-group", className),
       "data-component": "tooltip-group",
       "data-open": resolvedOpen ? "true" : void 0,
       onMouseEnter: (event) => {
@@ -3273,7 +3521,7 @@ function TooltipGroup(props) {
           "button",
           {
             type: "button",
-            className: cx10("mw-tooltip-group__trigger", triggerClassName),
+            className: cx13("mw-tooltip-group__trigger", triggerClassName),
             "aria-label": triggerLabel,
             "aria-describedby": resolvedOpen ? resolvedTooltipId : void 0,
             children: /* @__PURE__ */ jsx(Icon, { name: icon, decorative: true })
@@ -3326,12 +3574,12 @@ function Accordion(props) {
     )
   ] });
 }
-function hasContent3(value) {
+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 cx11(...parts) {
+function cx14(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function resolveAccordionItemContent(item) {
@@ -3341,8 +3589,8 @@ function AccordionField(props) {
   const reactId = React2.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 hasDescription = hasContent2(props.description);
+  const hasError = hasContent2(props.error);
   const isInvalid = hasError || false;
   const { labelId, descriptionId, errorId, describedBy } = buildAccordionFieldA11yIds({
     id,
@@ -3370,7 +3618,7 @@ function AccordionField(props) {
     }
     props.onOpenItemsChange?.(nextOpenItems);
   };
-  const wrapperClass = cx11(
+  const wrapperClass = cx14(
     "mw-accordion-field",
     props.disabled && "mw-accordion-field--disabled",
     isInvalid && "mw-accordion-field--invalid"
@@ -3384,7 +3632,7 @@ function AccordionField(props) {
       "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("legend", { className: "mw-accordion-field__label", id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "label", 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);
@@ -3401,8 +3649,8 @@ function AccordionField(props) {
             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 }) })
+        hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-accordion-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.description }) }),
+        hasError && /* @__PURE__ */ jsx("div", { className: "mw-accordion-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
       ]
     }
   );
@@ -3473,19 +3721,19 @@ function Radio(props) {
     }
   );
 }
-function hasContent4(value) {
+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 cx12(...parts) {
+function cx15(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function RadioGroupField(props) {
   const reactId = React2.useId();
   const id = props.id ?? `mw-radio-group-${reactId}`;
-  const hasDescription = hasContent4(props.description);
-  const hasError = hasContent4(props.error);
+  const hasDescription = hasContent3(props.description);
+  const hasError = hasContent3(props.error);
   const isInvalid = hasError || false;
   const { labelId, descriptionId, errorId, describedBy } = buildRadioGroupFieldA11yIds({
     id,
@@ -3502,14 +3750,14 @@ function RadioGroupField(props) {
     }
     props.onChange?.(optionValue);
   };
-  const wrapperClass = cx12(
+  const wrapperClass = cx15(
     "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: "sm", 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", { className: "mw-radio-group-field__label", id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "label", children: props.label }) }),
+    hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-radio-group-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.description }) }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -3519,31 +3767,66 @@ function RadioGroupField(props) {
         "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 }) => {
+        children: props.options.map(({ value, label, description, disabled: optionDisabled }) => {
           const optionId = `${id}-option-${value}`;
+          const optionLabelId = `${optionId}-label`;
+          const optionDescriptionId = `${optionId}-description`;
+          const hasOptionDescription = hasContent3(description);
           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);
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: cx15(
+                "mw-radio-group-field__option",
+                hasOptionDescription && "mw-radio-group-field__option--with-description"
+              ),
+              htmlFor: optionId,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Radio,
+                  {
+                    id: optionId,
+                    name: props.name,
+                    value,
+                    ariaLabelledBy: optionLabelId,
+                    ...hasOptionDescription ? { ariaDescribedBy: optionDescriptionId } : {},
+                    checked: selectedValue === value,
+                    disabled: isDisabled,
+                    invalid: isInvalid,
+                    ...props.required ? { required: true } : {},
+                    onCheckedChange: (checked) => {
+                      if (checked) handleSelect(value);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "mw-radio-group-field__option-content", children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      id: optionLabelId,
+                      variant: "label",
+                      className: "mw-radio-group-field__option-label",
+                      children: label
+                    }
+                  ),
+                  hasOptionDescription && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      id: optionDescriptionId,
+                      variant: "label-small",
+                      className: "mw-radio-group-field__option-description",
+                      children: description
+                    }
+                  )
+                ] })
+              ]
+            },
+            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 }) })
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-radio-group-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
   ] });
 }
 function YesNoRadioGroup(props) {
@@ -3609,16 +3892,16 @@ function Badge(props) {
     }
   );
 }
-function cx13(...parts) {
+function cx16(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function BadgeGroup(props) {
   const reactId = React2.useId();
   const id = props.id ?? `mw-badge-group-${reactId}`;
   const labelId = `${id}-label`;
-  const className = cx13("mw-badge-group", props.className);
+  const className = cx16("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("legend", { className: "mw-badge-group__label", id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.label }) }),
     /* @__PURE__ */ jsx("div", { className: "mw-badge-group__items", children: props.children })
   ] });
 }
@@ -3658,6 +3941,88 @@ function NotificationBadge(props) {
     }
   );
 }
+function Banner(props) {
+  const { children, action, icon, onDismiss, className, id, ...coreProps } = props;
+  const kit = createBannerRecipe({
+    ...coreProps,
+    showAction: coreProps.showAction ?? Boolean(action)
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: [kit.root.className, className].filter(Boolean).join(" "),
+      role: kit.root.a11y.role,
+      "aria-label": kit.root.a11y.ariaLabel,
+      "aria-live": kit.root.a11y.ariaLive,
+      ...kit.root.dataAttributes,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: kit.content.className, children: [
+          kit.icon.visible && /* @__PURE__ */ jsx("span", { className: kit.icon.className, children: icon ?? /* @__PURE__ */ jsx(Icon, { name: IconName.Info, decorative: true }) }),
+          /* @__PURE__ */ jsx("span", { className: kit.message.className, children })
+        ] }),
+        kit.action.visible && action && /* @__PURE__ */ jsx("div", { className: kit.action.className, children: action }),
+        kit.dismiss.visible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: kit.dismiss.className,
+            "aria-label": kit.dismiss.ariaLabel,
+            onClick: onDismiss
+          }
+        )
+      ]
+    }
+  );
+}
+function InfoBanner(props) {
+  const purposeAttrs = createPurposeSemanticAttributes("info-banner");
+  return /* @__PURE__ */ jsx(
+    Banner,
+    {
+      ...props,
+      variant: "info",
+      "data-purpose": purposeAttrs["data-purpose"],
+      "data-intent": purposeAttrs["data-intent"]
+    }
+  );
+}
+function SuccessBanner(props) {
+  const purposeAttrs = createPurposeSemanticAttributes("success-banner");
+  return /* @__PURE__ */ jsx(
+    Banner,
+    {
+      ...props,
+      variant: "success",
+      "data-purpose": purposeAttrs["data-purpose"],
+      "data-intent": purposeAttrs["data-intent"]
+    }
+  );
+}
+function WarningBanner(props) {
+  const purposeAttrs = createPurposeSemanticAttributes("warning-banner");
+  return /* @__PURE__ */ jsx(
+    Banner,
+    {
+      ...props,
+      variant: "warning",
+      "data-purpose": purposeAttrs["data-purpose"],
+      "data-intent": purposeAttrs["data-intent"]
+    }
+  );
+}
+function ErrorBanner(props) {
+  const purposeAttrs = createPurposeSemanticAttributes("error-banner");
+  return /* @__PURE__ */ jsx(
+    Banner,
+    {
+      ...props,
+      variant: "error",
+      "data-purpose": purposeAttrs["data-purpose"],
+      "data-intent": purposeAttrs["data-intent"]
+    }
+  );
+}
 function Switch(props) {
   const { children, className, id, onCheckedChange, onClick, ...coreProps } = props;
   const kit = createSwitchRecipe(coreProps);
@@ -3680,7 +4045,7 @@ function Switch(props) {
       "aria-checked": a11y.ariaChecked,
       "aria-disabled": a11y.ariaDisabled,
       "aria-label": a11y.ariaLabel,
-      "aria-labelledby": a11y.ariaLabelledby,
+      "aria-labelledby": a11y.ariaLabelledBy,
       "aria-describedby": a11y.ariaDescribedBy,
       className: [kit.className, className].filter(Boolean).join(" "),
       style: kit.vars,
@@ -3692,10 +4057,10 @@ function Switch(props) {
     }
   );
 }
-function cx14(...parts) {
+function cx17(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function hasContent5(value) {
+function hasContent4(value) {
   if (value === void 0 || value === null || value === false) {
     return false;
   }
@@ -3707,8 +4072,8 @@ function hasContent5(value) {
 function SwitchField(props) {
   const reactId = React2.useId();
   const id = props.id ?? `mw-switch-${reactId}`;
-  const hasDescription = hasContent5(props.description);
-  const hasError = hasContent5(props.error);
+  const hasDescription = hasContent4(props.description);
+  const hasError = hasContent4(props.error);
   const { labelId, descriptionId, errorId, describedBy } = buildSwitchFieldA11yIds({
     id,
     hasDescription,
@@ -3717,14 +4082,14 @@ function SwitchField(props) {
   });
   const disabled = props.switch.disabled || false;
   const invalid = hasError;
-  const wrapperClass = cx14(
+  const wrapperClass = cx17(
     "mw-switch-field",
     disabled && "mw-switch-field--disabled",
     invalid && "mw-switch-field--invalid"
   );
   const {
     ariaLabel: _ignoredAriaLabel,
-    ariaLabelledby: _ignoredAriaLabelledby,
+    ariaLabelledBy: _ignoredAriaLabelledby,
     ariaDescribedBy: _ignoredAriaDescribedBy,
     children: _ignoredChildren,
     ...switchProps
@@ -3736,14 +4101,14 @@ function SwitchField(props) {
         {
           ...switchProps,
           id,
-          ariaLabelledby: labelId,
+          ariaLabelledBy: labelId,
           ...describedBy ? { ariaDescribedBy: describedBy } : {}
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: "mw-switch-field__label", id: labelId, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) })
+      /* @__PURE__ */ jsx("span", { className: "mw-switch-field__label", id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "label", 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 }) })
+    hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-switch-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.description }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-switch-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
   ] });
 }
 function FeatureToggle(props) {
@@ -3903,10 +4268,10 @@ var Slider = React2.forwardRef((props, ref) => {
   ] }) });
 });
 Slider.displayName = "Slider";
-function cx15(...parts) {
+function cx18(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function hasContent6(value) {
+function hasContent5(value) {
   if (value === void 0 || value === null || value === false) {
     return false;
   }
@@ -3921,8 +4286,8 @@ function resolveEdgeValueLabel(value, fallback) {
 function SliderField(props) {
   const reactId = React2.useId();
   const id = props.id ?? `mw-slider-${reactId}`;
-  const hasDescription = hasContent6(props.description);
-  const hasError = hasContent6(props.error);
+  const hasDescription = hasContent5(props.description);
+  const hasError = hasContent5(props.error);
   const { labelId, descriptionId, errorId, describedBy } = buildSliderFieldA11yIds({
     id,
     hasDescription,
@@ -3936,7 +4301,7 @@ function SliderField(props) {
   const maxValue = props.slider.max ?? 100;
   const minValueLabel = resolveEdgeValueLabel(props.minValueLabel, minValue);
   const maxValueLabel = resolveEdgeValueLabel(props.maxValueLabel, maxValue);
-  const wrapperClass = cx15(
+  const wrapperClass = cx18(
     "mw-slider-field",
     labelPosition === "top" && "mw-slider-field--label-top",
     labelPosition === "inline" && "mw-slider-field--label-inline",
@@ -3950,10 +4315,10 @@ function SliderField(props) {
     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 }) });
+  const renderEdgeValue = (position, value) => /* @__PURE__ */ jsx("span", { className: `mw-slider-field__edge-value mw-slider-field__edge-value--${position}`, children: /* @__PURE__ */ jsx(Text, { variant: "caption", 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 }) }),
+    /* @__PURE__ */ jsx("div", { className: "mw-slider-field__header", children: /* @__PURE__ */ jsx("div", { className: "mw-slider-field__label", id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "label", children: props.label }) }) }),
+    hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-slider-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.description }) }),
     labelPosition === "top" && showEdgeValues ? /* @__PURE__ */ jsxs("div", { className: "mw-slider-field__values-row", children: [
       renderEdgeValue("min", minValueLabel),
       renderEdgeValue("max", maxValueLabel)
@@ -3973,7 +4338,7 @@ function SliderField(props) {
       ) }),
       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 }) })
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-slider-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
   ] });
 }
 function VolumeSlider(props) {
@@ -4071,10 +4436,10 @@ function Tab(props) {
     }
   );
 }
-function cx16(...parts) {
+function cx19(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function hasContent7(value) {
+function hasContent6(value) {
   if (value === void 0 || value === null || value === false) {
     return false;
   }
@@ -4112,7 +4477,7 @@ function TabPanel(props) {
       id: props.id,
       role: "tabpanel",
       "aria-labelledby": props.tabId,
-      className: cx16("mw-tab-group__panel", props.className),
+      className: cx19("mw-tab-group__panel", props.className),
       hidden: props.hidden,
       tabIndex: props.hidden ? void 0 : 0,
       children: renderPanelContent(props.children)
@@ -4122,7 +4487,7 @@ function TabPanel(props) {
 function TabGroup(props) {
   const reactId = React2.useId();
   const id = props.id ?? `mw-tab-group-${reactId}`;
-  const hasLabel = hasContent7(props.label);
+  const hasLabel = hasContent6(props.label);
   const itemStates = React2.useMemo(
     () => props.tabs.map((tab) => toItemState(tab)),
     [props.tabs]
@@ -4197,8 +4562,8 @@ function TabGroup(props) {
     },
     [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 }) }),
+  return /* @__PURE__ */ jsxs("section", { className: cx19("mw-tab-group", props.className), ...props.dataAttributes, children: [
+    hasLabel && /* @__PURE__ */ jsx("div", { className: "mw-tab-group__header", children: /* @__PURE__ */ jsx(Text, { variant: "label", id: a11yIds.labelId ?? `${id}-label`, children: props.label }) }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -4253,39 +4618,573 @@ function NavigationTabs(props) {
         ...props.dataAttributes,
         "data-purpose": "navigation-tabs"
       }
-    }
-  );
-}
-function ContentTabs(props) {
-  return /* @__PURE__ */ jsx(
-    TabGroup,
+    }
+  );
+}
+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 toItemState2(item) {
+  const state = { value: item.value };
+  if (item.disabled) state.disabled = true;
+  return state;
+}
+function SegmentedControl(props) {
+  const {
+    items,
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    variant,
+    size,
+    disabled,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    fullWidth,
+    className,
+    id,
+    style
+  } = props;
+  const itemStates = React2.useMemo(
+    () => items.map(toItemState2),
+    [items]
+  );
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = React2.useState(
+    () => resolveSegmentedControlValue(itemStates, defaultValue)
+  );
+  const resolvedValue = React2.useMemo(
+    () => resolveSegmentedControlValue(itemStates, isControlled ? controlledValue : internalValue),
+    [itemStates, isControlled, controlledValue, internalValue]
+  );
+  const selectItem = React2.useCallback(
+    (nextValue) => {
+      const resolved = resolveSegmentedControlValue(itemStates, nextValue);
+      if (!resolved || resolved === resolvedValue) return;
+      if (!isControlled) setInternalValue(resolved);
+      onValueChange?.(resolved);
+    },
+    [itemStates, isControlled, resolvedValue, onValueChange]
+  );
+  const handleKeyDown = React2.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 = moveSegmentedControlSelection(itemStates, resolvedValue, direction);
+      if (nextValue) {
+        selectItem(nextValue);
+        const btn = event.currentTarget.querySelector(
+          `[data-value="${nextValue}"]`
+        );
+        btn?.focus();
+      }
+    },
+    [itemStates, resolvedValue, selectItem]
+  );
+  const trackKit = createSegmentedControlRecipe({
+    value: resolvedValue,
+    variant,
+    size,
+    disabled,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    fullWidth
+  });
+  const trackClassName = [trackKit.className, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: trackClassName,
+      role: trackKit.a11y.role,
+      "aria-label": trackKit.a11y.ariaLabel,
+      "aria-labelledby": trackKit.a11y.ariaLabelledBy,
+      "aria-describedby": trackKit.a11y.ariaDescribedBy,
+      "aria-disabled": trackKit.a11y.ariaDisabled,
+      onKeyDown: handleKeyDown,
+      style,
+      children: items.map((item) => {
+        const isSelected = item.value === resolvedValue;
+        const isItemDisabled = disabled || item.disabled;
+        const isIconOnly = item.icon != null && item.label == null;
+        const itemKit = createSegmentedControlItemRecipe({
+          value: item.value,
+          selected: isSelected,
+          disabled: isItemDisabled,
+          ariaLabel: item.ariaLabel,
+          iconOnly: isIconOnly
+        });
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: itemKit.className,
+            role: itemKit.a11y.role,
+            "aria-checked": itemKit.a11y.ariaChecked,
+            "aria-disabled": itemKit.a11y.ariaDisabled,
+            "aria-label": itemKit.a11y.ariaLabel,
+            tabIndex: itemKit.a11y.tabIndex,
+            disabled: isItemDisabled,
+            "data-value": item.value,
+            onClick: () => selectItem(item.value),
+            children: [
+              item.icon,
+              item.label
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function cx20(...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 SegmentedControlField(props) {
+  const reactId = React2.useId();
+  const id = props.id ?? `mw-segmented-control-${reactId}`;
+  const labelId = `${id}-label`;
+  const hasDescription = hasContent7(props.description);
+  const hasError = hasContent7(props.error);
+  const {
+    helperTextId: descriptionId,
+    errorId,
+    describedBy: mergedDescribedBy
+  } = buildInputFieldA11yIds({
+    id,
+    hasHelperText: hasDescription,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const wrapperClass = cx20(
+    "mw-segmented-control-field",
+    hasError && "mw-segmented-control-field--invalid",
+    props.className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    /* @__PURE__ */ jsx("span", { className: "mw-segmented-control-field__label", id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "label", children: props.label }) }),
+    hasDescription && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-segmented-control-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.description }) }),
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        ...props.segmentedControl,
+        ariaLabelledBy: labelId,
+        ...mergedDescribedBy ? { ariaDescribedBy: mergedDescribedBy } : {}
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-segmented-control-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
+  ] });
+}
+function Pagination(props) {
+  const {
+    pageCount,
+    page: controlledPage,
+    defaultPage,
+    onPageChange,
+    siblingCount,
+    boundaryCount,
+    maxVisibleItems,
+    controlDisplay = "auto",
+    adaptive = true,
+    showPrevNext,
+    showFirstLast,
+    disabled,
+    firstLabel = "First",
+    previousLabel = "Previous",
+    nextLabel = "Next",
+    lastLabel = "Last",
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    getItemAriaLabel,
+    className,
+    id,
+    style,
+    ...rest
+  } = props;
+  const isControlled = controlledPage !== void 0;
+  const rootRef = React2.useRef(null);
+  const adaptiveProfile = useAdaptivePaginationProfile(rootRef, {
+    adaptive,
+    pageCount,
+    ...siblingCount !== void 0 ? { siblingCount } : {},
+    ...boundaryCount !== void 0 ? { boundaryCount } : {},
+    ...maxVisibleItems !== void 0 ? { maxVisibleItems } : {},
+    controlDisplay
+  });
+  const [internalPage, setInternalPage] = React2.useState(
+    () => clampPaginationPage(defaultPage, pageCount)
+  );
+  const resolvedPage = clampPaginationPage(isControlled ? controlledPage : internalPage, pageCount);
+  const resolvedControlDisplay = adaptive && adaptiveProfile ? adaptiveProfile.controlDisplay : controlDisplay === "icon" ? "icon" : "label";
+  const resolvedMaxVisibleItems = adaptive && adaptiveProfile ? adaptiveProfile.maxVisibleItems : maxVisibleItems;
+  const rootKit = createPaginationRecipe({
+    page: resolvedPage,
+    pageCount,
+    ...siblingCount !== void 0 ? { siblingCount } : {},
+    ...boundaryCount !== void 0 ? { boundaryCount } : {},
+    ...resolvedMaxVisibleItems !== void 0 ? { maxVisibleItems: resolvedMaxVisibleItems } : {},
+    controlDisplay: resolvedControlDisplay,
+    ...showPrevNext !== void 0 ? { showPrevNext } : {},
+    ...showFirstLast !== void 0 ? { showFirstLast } : {},
+    ...disabled !== void 0 ? { disabled } : {},
+    ...ariaLabel !== void 0 ? { ariaLabel } : {},
+    ...ariaLabelledBy !== void 0 ? { ariaLabelledBy } : {},
+    ...ariaDescribedBy !== void 0 ? { ariaDescribedBy } : {},
+    firstLabel,
+    previousLabel,
+    nextLabel,
+    lastLabel,
+    ...getItemAriaLabel !== void 0 ? { getItemAriaLabel } : {}
+  });
+  const listKit = createPaginationListRecipe();
+  const listItemKit = createPaginationListItemRecipe();
+  const rootClassName = [rootKit.className, className].filter(Boolean).join(" ");
+  const selectPage = React2.useCallback(
+    (nextPage) => {
+      if (disabled) return;
+      const resolved = clampPaginationPage(nextPage, pageCount);
+      if (resolved === 0 || resolved === resolvedPage) return;
+      if (!isControlled) setInternalPage(resolved);
+      onPageChange?.(resolved);
+    },
+    [disabled, isControlled, onPageChange, pageCount, resolvedPage]
+  );
+  const previousDisabled = disabled || resolvedPage <= 1;
+  const nextDisabled = disabled || resolvedPage <= 0 || resolvedPage >= pageCount;
+  const firstDisabled = disabled || resolvedPage <= 1;
+  const lastDisabled = disabled || resolvedPage <= 0 || resolvedPage >= pageCount;
+  const firstKit = createPaginationControlRecipe({
+    direction: "first",
+    disabled: firstDisabled,
+    label: firstLabel,
+    ...getItemAriaLabel !== void 0 ? {
+      ariaLabel: resolvePaginationItemAriaLabel(getItemAriaLabel, {
+        type: "first",
+        page: 1,
+        selected: false
+      })
+    } : {}
+  });
+  const previousKit = createPaginationControlRecipe({
+    direction: "previous",
+    disabled: previousDisabled,
+    label: previousLabel,
+    ...getItemAriaLabel !== void 0 ? {
+      ariaLabel: resolvePaginationItemAriaLabel(getItemAriaLabel, {
+        type: "previous",
+        page: resolvedPage - 1,
+        selected: false
+      })
+    } : {}
+  });
+  const nextKit = createPaginationControlRecipe({
+    direction: "next",
+    disabled: nextDisabled,
+    label: nextLabel,
+    ...getItemAriaLabel !== void 0 ? {
+      ariaLabel: resolvePaginationItemAriaLabel(getItemAriaLabel, {
+        type: "next",
+        page: resolvedPage + 1,
+        selected: false
+      })
+    } : {}
+  });
+  const lastKit = createPaginationControlRecipe({
+    direction: "last",
+    disabled: lastDisabled,
+    label: lastLabel,
+    ...getItemAriaLabel !== void 0 ? {
+      ariaLabel: resolvePaginationItemAriaLabel(getItemAriaLabel, {
+        type: "last",
+        page: pageCount,
+        selected: false
+      })
+    } : {}
+  });
+  const renderControl = (direction, kit, controlDisabled, targetPage, label, iconName) => {
+    const isLeadingIcon = direction === "first" || direction === "previous";
+    const icon = /* @__PURE__ */ jsx("span", { className: "mw-pagination__control-icon", children: /* @__PURE__ */ jsx(Icon, { name: iconName, decorative: true, size: 12 }) });
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: kit.className,
+        "aria-label": kit.a11y.ariaLabel,
+        "aria-disabled": kit.a11y.ariaDisabled,
+        disabled: controlDisabled,
+        onClick: () => selectPage(targetPage),
+        children: [
+          isLeadingIcon && icon,
+          /* @__PURE__ */ jsx("span", { className: "mw-pagination__control-label", children: label }),
+          !isLeadingIcon && icon
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
     {
-      ...props,
-      ariaLabel: props.ariaLabel ?? "Content tabs",
-      dataAttributes: {
-        ...props.dataAttributes,
-        "data-purpose": "content-tabs"
-      }
+      ...rest,
+      ref: rootRef,
+      id,
+      className: rootClassName,
+      style: { ...rootKit.vars, ...style },
+      "aria-label": rootKit.a11y.ariaLabel,
+      "aria-labelledby": rootKit.a11y.ariaLabelledBy,
+      "aria-describedby": rootKit.a11y.ariaDescribedBy,
+      "data-component": "pagination",
+      "data-control-display": rootKit.controlDisplay,
+      children: [
+        rootKit.showFirstLast && renderControl("first", firstKit, firstDisabled, 1, firstLabel, IconName.ChevronsLeft),
+        rootKit.showPrevNext && renderControl(
+          "previous",
+          previousKit,
+          previousDisabled,
+          resolvedPage - 1,
+          previousLabel,
+          IconName.ChevronLeft
+        ),
+        /* @__PURE__ */ jsx("ul", { className: listKit.className, role: listKit.a11y.role, children: rootKit.items.map((item) => {
+          if (item.type !== "page") {
+            const ellipsisKit = createPaginationEllipsisRecipe();
+            return /* @__PURE__ */ jsx("li", { className: listItemKit.className, children: /* @__PURE__ */ jsx("span", { className: ellipsisKit.className, "aria-hidden": ellipsisKit.a11y.ariaHidden, children: "..." }) }, item.key);
+          }
+          const pageKit = createPaginationPageRecipe({
+            page: item.page,
+            selected: item.selected,
+            ...disabled !== void 0 ? { disabled } : {},
+            ...getItemAriaLabel !== void 0 ? {
+              ariaLabel: resolvePaginationItemAriaLabel(getItemAriaLabel, {
+                type: "page",
+                page: item.page,
+                selected: item.selected
+              })
+            } : {}
+          });
+          return /* @__PURE__ */ jsx("li", { className: listItemKit.className, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: pageKit.className,
+              "aria-label": pageKit.a11y.ariaLabel,
+              "aria-current": pageKit.a11y.ariaCurrent,
+              "aria-disabled": pageKit.a11y.ariaDisabled,
+              disabled,
+              onClick: () => selectPage(item.page),
+              children: item.page
+            }
+          ) }, item.key);
+        }) }),
+        rootKit.showPrevNext && renderControl(
+          "next",
+          nextKit,
+          nextDisabled,
+          resolvedPage + 1,
+          nextLabel,
+          IconName.ChevronRight
+        ),
+        rootKit.showFirstLast && renderControl("last", lastKit, lastDisabled, pageCount, lastLabel, IconName.ChevronsRight)
+      ]
     }
   );
 }
-function SettingsTabs(props) {
-  return /* @__PURE__ */ jsx(
-    TabGroup,
-    {
-      ...props,
-      ariaLabel: props.ariaLabel ?? "Settings tabs",
-      dataAttributes: {
-        ...props.dataAttributes,
-        "data-purpose": "settings-tabs"
-      }
+function parsePxValue(value, fallback) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+function resolveControlWidths(controls, itemSize) {
+  const labelControlWidth = controls.reduce((total, control) => {
+    const icon = control.querySelector(".mw-pagination__control-icon");
+    const label = control.querySelector(".mw-pagination__control-label");
+    const iconWidth = icon?.getBoundingClientRect().width ?? 0;
+    const labelWidth = label?.scrollWidth ?? label?.getBoundingClientRect().width ?? 0;
+    const labelGap = iconWidth > 0 && labelWidth > 0 ? 4 : 0;
+    const measuredLabelWidth = iconWidth + labelGap + labelWidth;
+    return total + Math.max(control.getBoundingClientRect().width, measuredLabelWidth);
+  }, 0);
+  return {
+    labelControlWidth,
+    iconControlWidth: controls.length * itemSize
+  };
+}
+function useAdaptivePaginationProfile(rootRef, opts) {
+  const [profile, setProfile] = React2.useState(void 0);
+  React2.useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!opts.adaptive || !root || typeof window === "undefined") {
+      setProfile(void 0);
+      return;
     }
+    const parent = root.parentElement;
+    if (!parent) return;
+    let frame = 0;
+    const measure = () => {
+      window.cancelAnimationFrame(frame);
+      frame = window.requestAnimationFrame(() => {
+        const rootStyles = window.getComputedStyle(root);
+        const parentStyles = window.getComputedStyle(parent);
+        const itemSize = parsePxValue(rootStyles.getPropertyValue("--mw-pagination-size"), 32);
+        const itemGap = parsePxValue(rootStyles.getPropertyValue("--mw-pagination-gap"), 2);
+        const sectionGap = parsePxValue(
+          rootStyles.getPropertyValue("--mw-pagination-section-gap"),
+          12
+        );
+        const parentWidth = parent.getBoundingClientRect().width - parsePxValue(parentStyles.paddingLeft, 0) - parsePxValue(parentStyles.paddingRight, 0);
+        if (parentWidth <= 0) {
+          setProfile(void 0);
+          return;
+        }
+        const controls = Array.from(root.querySelectorAll(".mw-pagination__control"));
+        const { labelControlWidth, iconControlWidth } = resolveControlWidths(controls, itemSize);
+        const nextProfile = resolvePaginationAdaptiveProfile({
+          containerWidth: parentWidth,
+          labelControlWidth,
+          iconControlWidth,
+          controlCount: controls.length,
+          itemSize,
+          itemGap,
+          sectionGap,
+          pageCount: opts.pageCount,
+          ...opts.siblingCount !== void 0 ? { siblingCount: opts.siblingCount } : {},
+          ...opts.boundaryCount !== void 0 ? { boundaryCount: opts.boundaryCount } : {},
+          ...opts.maxVisibleItems !== void 0 ? { maxVisibleItems: opts.maxVisibleItems } : {},
+          controlDisplay: opts.controlDisplay
+        });
+        setProfile(
+          (previous) => previous?.controlDisplay === nextProfile.controlDisplay && previous?.maxVisibleItems === nextProfile.maxVisibleItems && previous?.reservedItemCount === nextProfile.reservedItemCount ? previous : nextProfile
+        );
+      });
+    };
+    measure();
+    const Observer = window.ResizeObserver;
+    const resizeObserver = Observer ? new Observer(measure) : void 0;
+    resizeObserver?.observe(parent);
+    resizeObserver?.observe(root);
+    window.addEventListener("resize", measure);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [
+    opts.adaptive,
+    opts.boundaryCount,
+    opts.controlDisplay,
+    opts.maxVisibleItems,
+    opts.pageCount,
+    opts.siblingCount,
+    rootRef
+  ]);
+  return profile;
+}
+function cx21(...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 PaginationField(props) {
+  const reactId = React2.useId();
+  const id = props.id ?? `mw-pagination-${reactId}`;
+  const labelId = `${id}-label`;
+  const hasDescription = hasContent8(props.description);
+  const hasError = hasContent8(props.error);
+  const {
+    helperTextId: descriptionId,
+    errorId,
+    describedBy: mergedDescribedBy
+  } = buildInputFieldA11yIds({
+    id,
+    hasHelperText: hasDescription,
+    hasError,
+    externalDescribedBy: props.ariaDescribedBy
+  });
+  const wrapperClass = cx21(
+    "mw-pagination-field",
+    hasError && "mw-pagination-field--invalid",
+    props.className
   );
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    /* @__PURE__ */ jsx("span", { className: "mw-pagination-field__label", id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "label", children: props.label }) }),
+    hasDescription && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-pagination-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.description }) }),
+    /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        ...props.pagination,
+        ariaLabelledBy: labelId,
+        ...mergedDescribedBy ? { ariaDescribedBy: mergedDescribedBy } : {}
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-pagination-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
+  ] });
 }
-function cx17(...parts) {
+function SkipLink(props) {
+  const { href, children, className } = props;
+  const kit = createSkipLinkRecipe({ href, className });
+  return /* @__PURE__ */ jsx("a", { href, className: kit.className, children });
+}
+function cx22(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function hasContent8(value) {
+function hasContent9(value) {
   if (value === void 0 || value === null || value === false) {
     return false;
   }
@@ -4299,9 +5198,9 @@ function Dialog(props) {
   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 hasTitle = hasContent9(props.title);
+  const hasDescription = hasContent9(props.description);
+  const hasFooter = hasContent9(props.footer) && (props.showFooter ?? true);
   const dismissible = (props.dismissible ?? true) && props.onClose !== void 0;
   const dialogOptions = {
     showFooter: hasFooter,
@@ -4332,7 +5231,7 @@ function Dialog(props) {
     "section",
     {
       id,
-      className: cx17(kit.className, props.className),
+      className: cx22(kit.className, props.className),
       role: kit.a11y.role,
       ...kit.a11y.ariaModal ? { "aria-modal": "true" } : {},
       ...kit.a11y.ariaLabel ? { "aria-label": kit.a11y.ariaLabel } : {},
@@ -4369,7 +5268,7 @@ function Dialog(props) {
     }
   );
 }
-function cx18(...parts) {
+function cx23(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function getFocusableElements(container) {
@@ -4400,6 +5299,9 @@ function focusFirstElement(container) {
   }
   container?.focus();
 }
+function toCSSDimension(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
 function DialogModal(props) {
   const {
     open,
@@ -4410,12 +5312,16 @@ function DialogModal(props) {
     restoreFocus = true,
     portalTarget,
     overlayClassName,
+    surfaceWidth,
+    tone = "default",
+    divider = "visible",
     footer,
     ...dialogProps
   } = props;
   const isControlled = open !== void 0;
   const [internalOpen, setInternalOpen] = React2.useState(defaultOpen);
   const resolvedOpen = isControlled ? open : internalOpen;
+  const marwesContext = React2.useContext(MarwesContext);
   const overlayRef = React2.useRef(null);
   const surfaceRef = React2.useRef(null);
   const lastFocusedElementRef = React2.useRef(null);
@@ -4500,11 +5406,16 @@ function DialogModal(props) {
   if (!resolvedOpen || typeof document === "undefined") {
     return null;
   }
+  const modalStyle = surfaceWidth === void 0 ? void 0 : { "--mw-dialog-surface-width": toCSSDimension(surfaceWidth) };
   const modalMarkup = /* @__PURE__ */ jsxs(
     "div",
     {
       ref: overlayRef,
-      className: cx18("mw-dialog-modal", overlayClassName),
+      className: cx23("mw-dialog-modal", overlayClassName),
+      style: modalStyle,
+      "data-surface-width": surfaceWidth === void 0 ? void 0 : "custom",
+      "data-tone": tone,
+      "data-divider": divider,
       onClick: (event) => {
         if (!closeOnScrimClick) {
           return;
@@ -4528,7 +5439,8 @@ function DialogModal(props) {
   if (portalTarget === null) {
     return modalMarkup;
   }
-  return createPortal(modalMarkup, portalTarget ?? document.body);
+  const resolvedTarget = portalTarget ?? marwesContext?.providerElement ?? document.body;
+  return createPortal(modalMarkup, resolvedTarget);
 }
 function ConfirmDialog(props) {
   const {
@@ -4637,7 +5549,222 @@ function InfoDialog(props) {
     }
   );
 }
+function Checkbox(props) {
+  const { onCheckedChange, onChange, ...coreProps } = props;
+  const kit = checkboxRecipe({ ...coreProps });
+  const inputRef = React2.useRef(null);
+  React2.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 cx24(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function hasContent10(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 = React2.useId();
+  const id = props.id ?? `mw-checkbox-${reactId}`;
+  const hasDescription = hasContent10(props.description);
+  const hasError = hasContent10(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 = cx24(
+    "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(Text, { variant: "label", children: props.label }) })
+    ] }),
+    hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-checkbox-field__description", id: descId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.description }) }),
+    hasError && /* @__PURE__ */ jsx("div", { className: "mw-checkbox-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
+  ] });
+}
+function hasContent11(value) {
+  if (value === void 0 || value === null || value === false) return false;
+  if (typeof value === "string") return value.trim().length > 0;
+  return true;
+}
+function cx25(...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 = React2.useId();
+  const id = props.id ?? `mw-checkbox-group-${reactId}`;
+  const hasDescription = hasContent11(props.description);
+  const hasError = hasContent11(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] = React2.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 = cx25(
+    "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(Text, { variant: "label", children: props.label }) }),
+        hasDescription && /* @__PURE__ */ jsx("div", { className: "mw-checkbox-group-field__description", id: descriptionId, children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.description }) }),
+        /* @__PURE__ */ jsx("div", { className: "mw-checkbox-group-field__options", children: props.options.map((option, index) => {
+          const optionId = `${id}-option-${index}`;
+          const optionLabelId = `${optionId}-label`;
+          const optionDescriptionId = `${optionId}-description`;
+          const hasOptionDescription = hasContent11(option.description);
+          const isOptionDisabled = props.disabled || option.disabled || false;
+          const checkboxProps = {
+            ...props.checkbox ?? {},
+            id: optionId,
+            value: option.value,
+            ariaLabelledBy: optionLabelId,
+            checked: selectedValueSet.has(option.value),
+            disabled: isOptionDisabled,
+            invalid: isInvalid,
+            onCheckedChange: () => handleToggle(option.value)
+          };
+          if (hasOptionDescription) {
+            checkboxProps.ariaDescribedBy = optionDescriptionId;
+          }
+          if (props.name !== void 0) {
+            checkboxProps.name = props.name;
+          }
+          if (option.indeterminate !== void 0) {
+            checkboxProps.indeterminate = option.indeterminate;
+          }
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: cx25(
+                "mw-checkbox-group-field__option",
+                hasOptionDescription && "mw-checkbox-group-field__option--with-description"
+              ),
+              htmlFor: optionId,
+              children: [
+                /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps }),
+                /* @__PURE__ */ jsxs("span", { className: "mw-checkbox-group-field__option-content", children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      id: optionLabelId,
+                      variant: "label",
+                      className: "mw-checkbox-group-field__option-label",
+                      children: option.label
+                    }
+                  ),
+                  hasOptionDescription && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      id: optionDescriptionId,
+                      variant: "caption",
+                      className: "mw-checkbox-group-field__option-description",
+                      children: option.description
+                    }
+                  )
+                ] })
+              ]
+            },
+            option.value
+          );
+        }) }),
+        hasError && /* @__PURE__ */ jsx("div", { className: "mw-checkbox-group-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Text, { variant: "caption", children: props.error }) })
+      ]
+    }
+  );
+}
 
-export { Accordion, AccordionField, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeGroup, BrightnessSlider, Button, ButtonSpinner, CancelButton, Card, Checkbox, CheckboxField, CheckboxGroupField, CloseButton, ConfirmButton, ConfirmDialog, ContentTabs, CopyButton, CreateButton, CurrencyField, DateOfBirthField, DatePicker, 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, Skeleton, Slider, SliderField, SortButton, Spacer, Spacing, Spinner, StatCard, StatTile, 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 };
+export { AccordionField, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeGroup, Banner, Breadcrumb, BrightnessSlider, Button, ButtonSpinner, CancelButton, Card, CheckboxField, CheckboxGroupField, CloseButton, ConfirmButton, ConfirmDialog, ContentTabs, ContextMenu, CopyButton, CreateButton, CurrencyField, DateOfBirthField, DatePickerField, DestructiveButton, DestructiveDialog, Dialog, DialogModal, Divider, DownloadButton, Drawer, DropdownButton, DropdownField, EditButton, EmailField, EmptyStateSpinner, ErrorBanner, ErrorToast, FAQAccordion, FeatureToggle, FilterButton, H1, H2, H3, Icon, IconButton, InfoBanner, InfoDialog, InfoToast, InputField, InputOtpField, LinkButton, MarwesProvider, NavigationTabs, NotificationBadge, OptionRadioGroup, PaginationField, Paragraph, PasswordField, PermissionSwitch, PhoneField, PreferenceSwitch, PresenceAvatar, PrimaryButton, PriorityBadge, ProductCard, ProfileAvatar, ProfileCard, ProgressBar, RadioGroupField, RadiusSlider, RatingRadioGroup, RefreshButton, RichTextField, SaveButton, SearchButton, SearchField, SecondaryButton, SectionsAccordion, SegmentedControlField, SelectField, SettingsAccordion, SettingsTabs, Skeleton, SkipLink, SliderField, SortButton, Spacer, Spacing, Spinner, StatCard, StatTile, StatusBadge, SubmitButton, SuccessBanner, SuccessButton, SuccessToast, SwitchField, Tab, TabGroup, TabPanel, TeamAvatarGroup, Text, TextButton, TextareaField, Toast, ToastContainer, ToastProvider, Tooltip, TooltipGroup, TypographyText, URLField, UploadButton, VerifyButton, VolumeSlider, WarningBanner, WarningToast, YesNoRadioGroup, ZipCodeField, useTheme, useThemeMode, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map