@bug-on/md3-react 2.0.3 → 3.0.1

package/dist/index.js

@@ -1,13 +1,14 @@
 "use client";
 'use strict';
 
-var React31 = require('react');
+var React38 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var materialColorUtilities = require('@material/material-color-utilities');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var RadixDropdown = require('@radix-ui/react-dropdown-menu');
+var RxContextMenu = require('@radix-ui/react-context-menu');
 var react = require('motion/react');
+var DropdownMenu = require('@radix-ui/react-dropdown-menu');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var RadixScrollArea = require('@radix-ui/react-scroll-area');
@@ -32,8 +33,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React31__namespace = /*#__PURE__*/_interopNamespace(React31);
-var RadixDropdown__namespace = /*#__PURE__*/_interopNamespace(RadixDropdown);
+var React38__namespace = /*#__PURE__*/_interopNamespace(React38);
+var RxContextMenu__namespace = /*#__PURE__*/_interopNamespace(RxContextMenu);
+var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
 var RadixScrollArea__namespace = /*#__PURE__*/_interopNamespace(RadixScrollArea);
 var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
 
@@ -77,8 +79,8 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 function useMediaQuery(query) {
-  const [matches, setMatches] = React31.useState(false);
-  React31.useEffect(() => {
+  const [matches, setMatches] = React38.useState(false);
+  React38.useEffect(() => {
     const mql = window.matchMedia(query);
     const handler = (e) => setMatches(e.matches);
     setMatches(mql.matches);
@@ -94,8 +96,8 @@ function useRipple(options = {}) {
     opacity = 0.12,
     disabled = false
   } = options;
-  const ref = React31.useRef(null);
-  const onPointerDown = React31.useCallback(
+  const ref = React38.useRef(null);
+  const onPointerDown = React38.useCallback(
     (event) => {
       if (disabled || !ref.current) return;
       const el = ref.current;
@@ -176,6 +178,11 @@ function MaterialSymbolsPreconnect({
     )
   ] });
 }
+function resolveMode(mode) {
+  if (mode !== "system") return mode;
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
 function generateM3Theme(sourceColorHex, mode = "light") {
   const sourceColor = materialColorUtilities.argbFromHex(sourceColorHex);
   const theme = materialColorUtilities.themeFromSourceColor(sourceColor);
@@ -234,13 +241,14 @@ function generateM3Theme(sourceColorHex, mode = "light") {
   };
 }
 function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
-  const colors = generateM3Theme(sourceColorHex, mode);
+  const resolved = resolveMode(mode);
+  const colors = generateM3Theme(sourceColorHex, resolved);
   for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m43) => `-${m43.toLowerCase()}`);
+    const kebabKey = key.replace(/[A-Z]/g, (m47) => `-${m47.toLowerCase()}`);
     root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
     root.style.setProperty(`--color-m3-${kebabKey}`, value);
   }
-  root.setAttribute("data-theme", mode);
+  root.setAttribute("data-theme", resolved);
 }
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -433,6 +441,671 @@ function AppBarItemButton({ item }) {
   );
 }
 
+// src/ui/menu/menu-animations.ts
+var FAST_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 380,
+  damping: 28,
+  mass: 1
+};
+var FAST_EFFECTS_TRANSITION = {
+  duration: 0.15,
+  ease: [0.4, 0, 1, 1]
+  // FastOutLinearIn
+};
+var MENU_CONTAINER_VARIANTS = {
+  hidden: {
+    opacity: 0,
+    scale: 0.8
+  },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: FAST_SPATIAL_SPRING
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.8,
+    transition: FAST_EFFECTS_TRANSITION
+  }
+};
+var MENU_CHECK_ICON_SIZE = 20;
+var CHECK_ICON_VARIANTS = {
+  hidden: {
+    opacity: 0,
+    width: 0
+  },
+  visible: {
+    opacity: 1,
+    width: MENU_CHECK_ICON_SIZE,
+    transition: FAST_SPATIAL_SPRING
+  },
+  exit: {
+    opacity: 0,
+    width: 0,
+    transition: FAST_EFFECTS_TRANSITION
+  }
+};
+var SUBMENU_CONTAINER_VARIANTS = {
+  hidden: {
+    opacity: 0,
+    scale: 0.9,
+    x: -4
+  },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    x: 0,
+    transition: FAST_SPATIAL_SPRING
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.9,
+    x: -4,
+    transition: FAST_EFFECTS_TRANSITION
+  }
+};
+var MenuContext = React38__namespace.createContext({
+  variant: "baseline",
+  colorVariant: "standard",
+  menuPrimitive: "dropdown",
+  open: false,
+  onOpenChange: () => {
+  }
+});
+function MenuProvider({
+  variant = "baseline",
+  colorVariant = "standard",
+  menuPrimitive = "dropdown",
+  open,
+  onOpenChange,
+  children
+}) {
+  const value = React38__namespace.useMemo(
+    () => ({ variant, colorVariant, menuPrimitive, open, onOpenChange }),
+    [variant, colorVariant, menuPrimitive, open, onOpenChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children });
+}
+function useMenuContext() {
+  const ctx = React38__namespace.useContext(MenuContext);
+  return React38__namespace.useMemo(
+    () => __spreadProps(__spreadValues({}, ctx), {
+      isStatic: ctx.menuPrimitive === "static",
+      menuVariant: ctx.variant
+    }),
+    [ctx]
+  );
+}
+
+// src/ui/menu/menu-tokens.ts
+var MENU_BASELINE_ITEM_HORIZONTAL_PADDING = "px-3";
+var MENU_ITEM_MIN_HEIGHT = "min-h-11";
+var MENU_MIN_WIDTH = "min-w-28";
+var MENU_MAX_WIDTH = "max-w-70";
+var MENU_GROUP_GAP = "gap-0.5";
+var MENU_GROUP_PADDING_Y = "py-1";
+var MENU_POPUP_PADDING_Y = "py-2";
+var MENU_ICON_SIZE = 20;
+var MENU_CONTAINER_SHAPE = "rounded-[4px]";
+var BASELINE_ITEM_SHAPE = "rounded-none";
+var GROUP_SHAPES = {
+  /** Active standalone group shape: CornerLarge all corners (16px) */
+  standaloneActive: "16px",
+  /**
+   * Active leading group shape: top=CornerLarge(16px), bottom=CornerSmall(8px)
+   * Source: SegmentedMenuTokens — LeadingContainerShape:
+   * topStart=CornerLarge, topEnd=CornerLarge, bottomStart=CornerSmall, bottomEnd=CornerSmall
+   */
+  leadingActive: "16px 16px 8px 8px",
+  /** Active middle group shape: CornerExtraSmall all corners (4px) */
+  middleActive: "4px",
+  /**
+   * Active trailing group shape: top=CornerSmall(8px), bottom=CornerLarge(16px)
+   * Source: SegmentedMenuTokens — TrailingContainerShape:
+   * topStart=CornerSmall, topEnd=CornerSmall, bottomStart=CornerLarge, bottomEnd=CornerLarge
+   */
+  trailingActive: "8px 8px 16px 16px",
+  /** Inactive (default, pre-hover) shape for all groups: CornerExtraSmall (4px) */
+  inactive: "4px"
+};
+var ITEM_SHAPE_CLASSES = {
+  leading: "rounded-t-[12px] rounded-b-[4px]",
+  middle: "rounded-[4px]",
+  trailing: "rounded-t-[4px] rounded-b-[12px]",
+  standalone: "rounded-[4px]",
+  selected: "rounded-[12px]"
+};
+var STANDARD_COLORS = {
+  /** Group/popup container background (StandardMenuTokens.ContainerColor) */
+  containerBg: "bg-m3-surface-container-low",
+  /** Label text color (StandardMenuTokens.ItemLabelTextColor) */
+  labelText: "text-m3-on-surface",
+  /** Leading/trailing icon color (StandardMenuTokens.ItemLeadingIconColor) */
+  iconColor: "text-m3-on-surface-variant",
+  /** Supporting text below label (StandardMenuTokens.ItemSupportingTextColor) */
+  supportingTextColor: "text-m3-on-surface-variant",
+  /** Trailing supporting text (StandardMenuTokens.ItemTrailingSupportingTextColor) */
+  trailingSupportingTextColor: "text-m3-on-surface-variant",
+  /** Trailing icon color (StandardMenuTokens.ItemTrailingIconColor) */
+  trailingIconColor: "text-m3-on-surface-variant",
+  /** Hover state layer (OnSurface @ 8% opacity) */
+  hoverLayer: "hover:bg-m3-on-surface/8",
+  /** Focus state layer (OnSurface @ 12% opacity) */
+  focusLayer: "focus:bg-m3-on-surface/12",
+  /** Selected item background (StandardMenuTokens.ItemSelectedContainerColor) */
+  selectedBg: "bg-m3-tertiary-container",
+  /** Selected item text (StandardMenuTokens.ItemSelectedLabelTextColor) */
+  selectedText: "text-m3-on-tertiary-container",
+  /** Selected item icon (StandardMenuTokens.ItemSelectedLeadingIconColor) */
+  selectedIcon: "text-m3-on-tertiary-container",
+  /** Disabled opacity: 38% (StandardMenuTokens.ItemDisabledLabelTextOpacity) */
+  disabledOpacity: "data-disabled:opacity-[0.38]"
+};
+var BASELINE_COLORS = {
+  containerBg: "bg-m3-surface-container",
+  labelText: "text-m3-on-surface",
+  iconColor: "text-m3-on-surface-variant",
+  supportingTextColor: "text-m3-on-surface-variant",
+  trailingIconColor: "text-m3-on-surface-variant",
+  hoverLayer: "hover:bg-m3-on-surface/8",
+  focusLayer: "focus:bg-m3-on-surface/12",
+  selectedBg: "bg-m3-secondary-container",
+  selectedText: "text-m3-on-secondary-container",
+  selectedIcon: "text-m3-on-secondary-container"};
+var VIBRANT_COLORS = {
+  /** Group/popup container background (VibrantMenuTokens.ContainerColor) */
+  containerBg: "bg-m3-tertiary-container",
+  /** Label text color (VibrantMenuTokens.ItemLabelTextColor) */
+  labelText: "text-m3-on-tertiary-container",
+  /** Leading/trailing icon color (VibrantMenuTokens.ItemLeadingIconColor) */
+  iconColor: "text-m3-on-tertiary-container",
+  /** Supporting text below label (VibrantMenuTokens.ItemSupportingTextColor) */
+  supportingTextColor: "text-m3-on-tertiary-container",
+  /** Trailing supporting text (VibrantMenuTokens.ItemTrailingSupportingTextColor) */
+  trailingSupportingTextColor: "text-m3-on-tertiary-container",
+  /** Trailing icon color (VibrantMenuTokens.ItemTrailingIconColor) */
+  trailingIconColor: "text-m3-on-tertiary-container",
+  /** Hover state layer (OnTertiaryContainer @ 8% opacity) */
+  hoverLayer: "hover:bg-m3-on-tertiary-container/8",
+  /** Focus state layer (OnTertiaryContainer @ 12% opacity) */
+  focusLayer: "focus:bg-m3-on-tertiary-container/12",
+  /** Selected item background (VibrantMenuTokens.ItemSelectedContainerColor = Tertiary) */
+  selectedBg: "bg-m3-tertiary",
+  /** Selected item text (VibrantMenuTokens.ItemSelectedLabelTextColor = OnTertiary) */
+  selectedText: "text-m3-on-tertiary",
+  /** Selected item icon (VibrantMenuTokens.ItemSelectedLeadingIconColor = OnTertiary) */
+  selectedIcon: "text-m3-on-tertiary",
+  /** Disabled opacity: 38% (VibrantMenuTokens.ItemDisabledLabelTextOpacity) */
+  disabledOpacity: "data-disabled:opacity-[0.38]"
+};
+var DIVIDER_PADDING = "mx-3 my-0.5";
+var DIVIDER_COLOR = "bg-m3-outline-variant";
+function ContextMenu({
+  children,
+  variant = "baseline",
+  colorVariant = "standard"
+}) {
+  const [open, setOpen] = React38__namespace.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenuProvider,
+    {
+      variant,
+      colorVariant,
+      menuPrimitive: "context",
+      open,
+      onOpenChange: setOpen,
+      children: /* @__PURE__ */ jsxRuntime.jsx(RxContextMenu__namespace.Root, { onOpenChange: setOpen, children })
+    }
+  );
+}
+ContextMenu.displayName = "ContextMenu";
+var ContextMenuTrigger = React38__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { children, asChild = true } = _b, props = __objRest(_b, ["children", "asChild"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(RxContextMenu__namespace.Trigger, __spreadProps(__spreadValues({ ref, asChild }, props), { children }));
+});
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+var ContextMenuContent = React38__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      hasOverflow = false,
+      colorVariant: propColorVariant,
+      separatorStyle = "gap",
+      className
+    } = _b, props = __objRest(_b, [
+      "children",
+      "hasOverflow",
+      "colorVariant",
+      "separatorStyle",
+      "className"
+    ]);
+    const {
+      open,
+      variant,
+      colorVariant: contextColorVariant
+    } = useMenuContext();
+    const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
+    const colors = variant === "baseline" ? BASELINE_COLORS : colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
+    const isExpressiveGap = variant === "expressive" && separatorStyle === "gap";
+    const containerClassName = variant === "expressive" ? cn(
+      "z-50 flex flex-col w-full",
+      MENU_MIN_WIDTH,
+      MENU_MAX_WIDTH,
+      isExpressiveGap ? MENU_GROUP_GAP : "",
+      isExpressiveGap ? "bg-transparent" : colors.containerBg,
+      isExpressiveGap ? "" : "rounded-2xl",
+      isExpressiveGap ? "" : "elevation-2",
+      hasOverflow || isExpressiveGap ? "overflow-visible" : "overflow-hidden",
+      "outline-none",
+      className
+    ) : cn(
+      "z-50 flex flex-col",
+      MENU_MIN_WIDTH,
+      MENU_MAX_WIDTH,
+      MENU_POPUP_PADDING_Y,
+      MENU_GROUP_GAP,
+      colors.containerBg,
+      MENU_CONTAINER_SHAPE,
+      "elevation-2",
+      hasOverflow ? "overflow-visible" : "overflow-hidden",
+      "outline-none",
+      className
+    );
+    const flattenChildren = (nodes) => {
+      return React38__namespace.Children.toArray(nodes).reduce(
+        (acc, child) => {
+          if (React38__namespace.isValidElement(child)) {
+            if (child.type === React38__namespace.Fragment) {
+              return acc.concat(
+                flattenChildren(
+                  child.props.children
+                )
+              );
+            }
+            acc.push(child);
+          }
+          return acc;
+        },
+        []
+      );
+    };
+    let renderedChildren = children;
+    if (variant === "expressive") {
+      const validChildren = flattenChildren(children);
+      const groupCount = validChildren.length;
+      const enhancedChildren = validChildren.map(
+        (child, i) => React38__namespace.cloneElement(
+          child,
+          {
+            index: i,
+            count: groupCount,
+            isGapVariant: isExpressiveGap
+          }
+        )
+      );
+      renderedChildren = separatorStyle === "divider" ? enhancedChildren.reduce((acc, child, i) => {
+        if (i > 0) {
+          acc.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "hr",
+              {
+                className: cn(
+                  "mx-3 my-0.5 h-px border-0 bg-m3-outline-variant"
+                )
+              },
+              `divider-${child.key || i}`
+            )
+          );
+        }
+        acc.push(child);
+        return acc;
+      }, []) : enhancedChildren;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(RxContextMenu__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(RxContextMenu__namespace.Content, __spreadProps(__spreadValues({ ref, asChild: true, forceMount: true }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.m.div,
+      {
+        className: containerClassName,
+        initial: { opacity: 0, scale: 0.95, y: -4 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.95, y: -4 },
+        transition: FAST_SPATIAL_SPRING,
+        style: __spreadProps(__spreadValues({}, props.style), {
+          transformOrigin: "var(--radix-context-menu-content-transform-origin)"
+        }),
+        children: renderedChildren
+      }
+    ) })) }) });
+  }
+);
+ContextMenuContent.displayName = "ContextMenuContent";
+function Menu(_a) {
+  var _b = _a, {
+    children,
+    variant,
+    menuVariant,
+    colorVariant = "standard",
+    open: controlledOpen,
+    onOpenChange: controlledOnOpenChange,
+    defaultOpen
+  } = _b, props = __objRest(_b, [
+    "children",
+    "variant",
+    "menuVariant",
+    "colorVariant",
+    "open",
+    "onOpenChange",
+    "defaultOpen"
+  ]);
+  var _a2;
+  const resolvedVariant = (_a2 = variant != null ? variant : menuVariant) != null ? _a2 : "baseline";
+  const [internalOpen, setInternalOpen] = React38__namespace.useState(
+    () => defaultOpen != null ? defaultOpen : false
+  );
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const handleOpenChange = React38__namespace.useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      controlledOnOpenChange == null ? void 0 : controlledOnOpenChange(next);
+    },
+    [isControlled, controlledOnOpenChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenuProvider,
+    {
+      variant: resolvedVariant,
+      colorVariant,
+      open,
+      onOpenChange: handleOpenChange,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownMenu__namespace.Root,
+        __spreadProps(__spreadValues({}, props), {
+          defaultOpen,
+          open: isControlled ? open : void 0,
+          onOpenChange: handleOpenChange,
+          children
+        })
+      )
+    }
+  );
+}
+Menu.displayName = "Menu";
+var MenuTrigger = React38__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { children, asChild = true } = _b, props = __objRest(_b, ["children", "asChild"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, __spreadProps(__spreadValues({ ref, asChild }, props), { children }));
+});
+MenuTrigger.displayName = "MenuTrigger";
+var MenuContent = React38__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      sideOffset = 6,
+      side = "bottom",
+      align = "start",
+      hasOverflow = false,
+      colorVariant: propColorVariant,
+      separatorStyle = "gap",
+      className
+    } = _b, props = __objRest(_b, [
+      "children",
+      "sideOffset",
+      "side",
+      "align",
+      "hasOverflow",
+      "colorVariant",
+      "separatorStyle",
+      "className"
+    ]);
+    const {
+      open,
+      variant,
+      colorVariant: contextColorVariant
+    } = useMenuContext();
+    const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
+    const colors = variant === "baseline" ? BASELINE_COLORS : colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
+    const isExpressiveGap = variant === "expressive" && separatorStyle === "gap";
+    const containerClassName = variant === "expressive" ? cn(
+      "z-50 flex flex-col",
+      MENU_MIN_WIDTH,
+      MENU_MAX_WIDTH,
+      isExpressiveGap ? MENU_GROUP_GAP : "",
+      isExpressiveGap ? "bg-transparent" : colors.containerBg,
+      isExpressiveGap ? "" : "rounded-2xl",
+      isExpressiveGap ? "" : "elevation-2",
+      hasOverflow || isExpressiveGap ? "overflow-visible" : "overflow-hidden",
+      "outline-none",
+      className
+    ) : cn(
+      "z-50 flex flex-col",
+      MENU_MIN_WIDTH,
+      MENU_MAX_WIDTH,
+      MENU_POPUP_PADDING_Y,
+      MENU_GROUP_GAP,
+      colors.containerBg,
+      MENU_CONTAINER_SHAPE,
+      "elevation-2",
+      hasOverflow ? "overflow-visible" : "overflow-hidden",
+      "outline-none",
+      className
+    );
+    const flattenChildren = (nodes) => {
+      return React38__namespace.Children.toArray(nodes).reduce(
+        (acc, child) => {
+          if (React38__namespace.isValidElement(child)) {
+            if (child.type === React38__namespace.Fragment) {
+              return acc.concat(
+                flattenChildren(
+                  child.props.children
+                )
+              );
+            }
+            acc.push(child);
+          }
+          return acc;
+        },
+        []
+      );
+    };
+    let renderedChildren = children;
+    if (variant === "expressive") {
+      const validChildren = flattenChildren(children);
+      const groupCount = validChildren.length;
+      const enhancedChildren = validChildren.map(
+        (child, i) => React38__namespace.cloneElement(child, {
+          index: i,
+          count: groupCount,
+          isGapVariant: isExpressiveGap
+        })
+      );
+      renderedChildren = separatorStyle === "divider" ? enhancedChildren.reduce((acc, child, i) => {
+        if (i > 0) {
+          acc.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "hr",
+              {
+                className: cn(
+                  "mx-3 my-0.5 h-px border-0 bg-m3-outline-variant"
+                )
+              },
+              `divider-${child.key || i}`
+            )
+          );
+        }
+        acc.push(child);
+        return acc;
+      }, []) : enhancedChildren;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu__namespace.Content,
+      __spreadProps(__spreadValues({
+        ref,
+        sideOffset,
+        side,
+        align,
+        asChild: true,
+        forceMount: true
+      }, props), {
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.m.div,
+          {
+            role: "menu",
+            "aria-orientation": "vertical",
+            className: containerClassName,
+            variants: MENU_CONTAINER_VARIANTS,
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+            style: __spreadProps(__spreadValues({}, props.style), {
+              transformOrigin: "var(--radix-dropdown-menu-content-transform-origin)"
+            }),
+            children: renderedChildren
+          }
+        )
+      })
+    ) }) });
+  }
+);
+MenuContent.displayName = "MenuContent";
+var MenuDivider = React38__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    const { menuVariant } = useMenuContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Separator, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "hr",
+      __spreadValues({
+        ref,
+        className: cn(
+          // Baseline: 8dp vertical margin, 0 horizontal. Expressive: 12dp horizontal, 2dp vertical
+          menuVariant === "baseline" ? "my-2 mx-0" : "mx-3 my-0.5",
+          // 1px height line
+          "h-px border-0",
+          // outline-variant color
+          "bg-m3-outline-variant",
+          className
+        )
+      }, props)
+    ) });
+  }
+);
+MenuDivider.displayName = "MenuDivider";
+function getGroupPosition(index, count) {
+  if (count === 1) return "standalone";
+  if (index === 0) return "leading";
+  if (index === count - 1) return "trailing";
+  return "middle";
+}
+function getGroupActiveShape(position) {
+  return GROUP_SHAPES[`${position}Active`];
+}
+var MenuGroup = React38__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      label,
+      index = 0,
+      count = 1,
+      colorVariant: propColorVariant,
+      isGapVariant,
+      itemPosition,
+      className
+    } = _b, rest = __objRest(_b, [
+      "children",
+      "label",
+      "index",
+      "count",
+      "colorVariant",
+      "isGapVariant",
+      "itemPosition",
+      "className"
+    ]);
+    const {
+      menuVariant,
+      colorVariant: contextColorVariant,
+      isStatic
+    } = useMenuContext();
+    const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
+    const colors = menuVariant === "baseline" ? BASELINE_COLORS : colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
+    const position = getGroupPosition(index, count);
+    const activeShape = getGroupActiveShape(position);
+    const [isHovered, setIsHovered] = React38__namespace.useState(false);
+    const currentShape = isStatic || isHovered ? activeShape : GROUP_SHAPES.inactive;
+    const handlePointerEnter = React38__namespace.useCallback(() => setIsHovered(true), []);
+    const handlePointerLeave = React38__namespace.useCallback(() => setIsHovered(false), []);
+    const flattenChildren = (children2) => {
+      return React38__namespace.Children.toArray(children2).reduce(
+        (acc, child) => {
+          if (React38__namespace.isValidElement(child)) {
+            if (child.type === React38__namespace.Fragment) {
+              return acc.concat(
+                flattenChildren(
+                  child.props.children
+                )
+              );
+            }
+            acc.push(child);
+          }
+          return acc;
+        },
+        []
+      );
+    };
+    const validChildren = flattenChildren(children);
+    const itemCount = validChildren.length;
+    const enhancedChildren = validChildren.map((child, i) => {
+      const itemPosition2 = itemCount === 1 ? "standalone" : i === 0 ? "leading" : i === itemCount - 1 ? "trailing" : "middle";
+      return React38__namespace.cloneElement(child, {
+        itemPosition: itemPosition2,
+        colorVariant
+      });
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      react.m.div,
+      __spreadProps(__spreadValues({
+        ref,
+        role: "group",
+        "aria-label": label,
+        className: cn(
+          "relative",
+          // In baseline variant, MenuGroup is transparent so it shouldn't clip.
+          // In expressive variant, it needs overflow-hidden to clip hover states to its morphing shape.
+          menuVariant === "baseline" ? "" : "overflow-hidden",
+          // Vertical padding: 2dp for gap variant (to match Figma), 4dp for baseline
+          isGapVariant ? "py-0.5" : MENU_GROUP_PADDING_Y,
+          // Horizontal padding: 4dp for expressive menus (both static and popup), 0 for baseline
+          menuVariant === "expressive" ? "px-1" : "",
+          // Gap variant has floating segments, so each group manages its own shadow
+          isGapVariant ? "elevation-2" : "",
+          // Background based on color variant (transparent for baseline to avoid double-layering)
+          menuVariant === "baseline" ? "bg-transparent" : colors.containerBg,
+          className
+        ),
+        animate: { borderRadius: currentShape },
+        transition: FAST_SPATIAL_SPRING,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave
+      }, rest), {
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                // Padding: 12dp top, 12dp horizontal, 8dp bottom (MD3 spec)
+                "block pt-3 px-3 pb-2",
+                "text-label-small",
+                menuVariant === "baseline" ? "text-m3-on-surface-variant" : colorVariant === "vibrant" ? "text-m3-on-tertiary-container" : "text-m3-on-surface-variant"
+              ),
+              children: label
+            }
+          ),
+          enhancedChildren
+        ]
+      })
+    );
+  }
+);
+MenuGroup.displayName = "MenuGroup";
+
 // src/ui/shared/constants.ts
 var SPRING_TRANSITION_FAST = {
   type: "spring",
@@ -444,6 +1117,11 @@ var SPRING_TRANSITION = {
   bounce: 0,
   duration: 0.3
 };
+var SPRING_TRANSITION_EXPRESSIVE = {
+  type: "spring",
+  bounce: 0.35,
+  duration: 0.4
+};
 var ICON_SPAN_VARIANTS = {
   initial: { scale: 0.01 },
   animate: { scale: 1 },
@@ -464,7 +1142,7 @@ var VARIANT_FONT = {
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React31__namespace.forwardRef(
+var IconComponent = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -530,222 +1208,527 @@ var IconComponent = React31__namespace.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React31__namespace.memo(IconComponent);
-var MD3_MENU_ANIM = {
-  initial: { opacity: 0, scale: 0.96, y: -6 },
-  animate: {
-    opacity: 1,
-    scale: 1,
-    y: 0,
-    transition: {
-      type: "spring",
-      stiffness: 380,
-      damping: 30,
-      mass: 0.8
-    }
-  },
-  exit: { opacity: 0, scale: 0.97, y: -4, transition: { duration: 0.12 } }
-};
-var DropdownMenu = RadixDropdown__namespace.Root;
-DropdownMenu.displayName = "DropdownMenu";
-var DropdownMenuTrigger = RadixDropdown__namespace.Trigger;
-DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
-var DropdownMenuGroup = RadixDropdown__namespace.Group;
-var DropdownMenuPortal = RadixDropdown__namespace.Portal;
-var DropdownMenuSub = RadixDropdown__namespace.Sub;
-var DropdownMenuRadioGroup = RadixDropdown__namespace.RadioGroup;
-var DropdownMenuContent = React31__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, sideOffset = 6, children } = _b, props = __objRest(_b, ["className", "sideOffset", "children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixDropdown__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDropdown__namespace.Content,
-    __spreadProps(__spreadValues({
-      ref,
-      sideOffset,
-      asChild: true
-    }, props), {
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        react.m.div,
-        __spreadProps(__spreadValues({
-          className: cn(
-            "z-50 min-w-32 overflow-hidden",
-            "rounded-xl bg-m3-surface-container p-1",
-            "shadow-md",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-m3-primary",
-            className
-          )
-        }, MD3_MENU_ANIM), {
-          children
-        })
-      )
-    })
-  ) }) });
-});
-DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuSubContent = React31__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDropdown__namespace.SubContent,
-    __spreadValues({
-      ref,
-      className: cn(
-        "z-50 min-w-32 overflow-hidden",
-        "rounded-xl bg-m3-surface-container p-1 shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )
-    }, props)
+var Icon = React38__namespace.memo(IconComponent);
+function getItemShapeClass(position, selected, isStatic = false, menuVariant = "expressive") {
+  if (menuVariant === "baseline") return BASELINE_ITEM_SHAPE;
+  if (selected) return ITEM_SHAPE_CLASSES.selected;
+  if (isStatic && position === "standalone") return "rounded-[12px]";
+  return ITEM_SHAPE_CLASSES[position];
+}
+var MenuItem = React38__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      onClick,
+      leadingIcon,
+      trailingIcon,
+      supportingText,
+      trailingText,
+      selected,
+      disabled = false,
+      itemPosition = "standalone",
+      colorVariant: propColorVariant,
+      keepOpen = false,
+      className,
+      isSubTrigger,
+      value,
+      role
+    } = _b, rest = __objRest(_b, [
+      "children",
+      "onClick",
+      "leadingIcon",
+      "trailingIcon",
+      "supportingText",
+      "trailingText",
+      "selected",
+      "disabled",
+      "itemPosition",
+      "colorVariant",
+      "keepOpen",
+      "className",
+      "isSubTrigger",
+      "value",
+      "role"
+    ]);
+    const {
+      menuVariant,
+      colorVariant: contextColorVariant,
+      menuPrimitive
+    } = useMenuContext();
+    const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
+    const colors = menuVariant === "baseline" ? BASELINE_COLORS : colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
+    const isStaticMenu = menuPrimitive === "static";
+    const shapeClass = getItemShapeClass(
+      itemPosition,
+      !!selected,
+      isStaticMenu,
+      menuVariant
+    );
+    const isSelectable = selected !== void 0 && !isSubTrigger;
+    const isCheckbox = role === "menuitemcheckbox" || selected !== void 0 && !role && !isSubTrigger;
+    const isRadio = role === "menuitemradio";
+    const ItemPrimitive = isStaticMenu || isSubTrigger ? reactSlot.Slot : menuPrimitive === "context" ? isCheckbox ? RxContextMenu__namespace.CheckboxItem : isRadio ? RxContextMenu__namespace.RadioItem : RxContextMenu__namespace.Item : isCheckbox ? DropdownMenu__namespace.CheckboxItem : isRadio ? DropdownMenu__namespace.RadioItem : DropdownMenu__namespace.Item;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ItemPrimitive,
+      __spreadProps(__spreadValues({
+        ref
+      }, isStaticMenu || isSubTrigger ? {
+        role: role || (isCheckbox ? "menuitemcheckbox" : isRadio ? "menuitemradio" : "menuitem"),
+        "aria-checked": isCheckbox || isRadio ? !!selected : void 0,
+        "aria-disabled": disabled ? true : void 0,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick == null ? void 0 : onClick(e);
+          }
+        },
+        onClick
+      } : __spreadProps(__spreadValues(__spreadValues({
+        disabled,
+        onSelect: keepOpen ? (e) => e.preventDefault() : void 0,
+        onClick
+      }, isCheckbox || isRadio ? { checked: !!selected } : {}), isRadio ? { value: value != null ? value : "" } : {}), {
+        asChild: true
+      })), {
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          __spreadProps(__spreadValues({
+            className: cn(
+              // Layout
+              "relative flex w-full cursor-pointer select-none items-center outline-none",
+              // Sizing: min-h 48dp, min-w 112dp, max-w 280dp
+              "min-h-12 min-w-28 max-w-70",
+              // Horizontal padding
+              menuVariant === "baseline" ? MENU_BASELINE_ITEM_HORIZONTAL_PADDING : "px-4",
+              // Spacing between items
+              isStaticMenu ? "my-0.5" : "",
+              // Shape morphing (position-based + selected override)
+              shapeClass,
+              // Animate border-radius AND background-color together (FastEffects: 150ms)
+              "transition-[border-radius,background-color] duration-150 ease-in",
+              // Colors based on variant + selection
+              selected ? cn(colors.selectedBg, colors.selectedText) : cn(colors.labelText),
+              // State layers (only on unselected items)
+              !selected && colors.hoverLayer,
+              !selected && colors.focusLayer,
+              // Focus visible ring (WCAG 2.4.11 — visible focus indicator)
+              // Uses ring-inset so the ring doesn't overflow the item bounds.
+              "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-m3-primary",
+              // Disabled
+              disabled && "pointer-events-none opacity-[0.38]",
+              className
+            )
+          }, rest), {
+            children: [
+              (isSelectable || leadingIcon) && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flex h-5 w-5 shrink-0 items-center justify-center mr-3",
+                  "aria-hidden": "true",
+                  children: isSelectable ? /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, mode: "wait", children: selected ? /* @__PURE__ */ jsxRuntime.jsx(
+                    react.m.span,
+                    {
+                      className: cn(
+                        "flex h-full w-full items-center justify-center overflow-hidden",
+                        colors.selectedIcon
+                      ),
+                      variants: CHECK_ICON_VARIANTS,
+                      initial: "hidden",
+                      animate: "visible",
+                      exit: "exit",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", fill: 1, size: MENU_CHECK_ICON_SIZE })
+                    },
+                    "check"
+                  ) : leadingIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+                    react.m.span,
+                    {
+                      className: cn(
+                        "flex h-full w-full items-center justify-center overflow-hidden",
+                        colors.iconColor
+                      ),
+                      variants: CHECK_ICON_VARIANTS,
+                      initial: "hidden",
+                      animate: "visible",
+                      exit: "exit",
+                      children: leadingIcon
+                    },
+                    "icon"
+                  ) : (
+                    // Spacer for selectable items with no icon, to keep text aligned
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5" })
+                  ) }) : (
+                    // Static icon for non-selectable items
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "flex h-full w-full items-center justify-center",
+                          colors.iconColor
+                        ),
+                        children: leadingIcon
+                      }
+                    )
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-1 flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-large leading-snug", children }),
+                supportingText && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-body-medium leading-snug",
+                      // Source: StandardMenuTokens.ItemSupportingTextColor / VibrantMenuTokens
+                      selected ? colors.selectedText : colors.supportingTextColor
+                    ),
+                    children: supportingText
+                  }
+                )
+              ] }),
+              (trailingText || trailingIcon) && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    // Minimum 12dp gap from label column (ListTokens)
+                    "ml-3 flex shrink-0 items-center",
+                    // Source: StandardMenuTokens.ItemTrailingIconColor / VibrantMenuTokens
+                    selected ? colors.selectedText : colors.trailingIconColor
+                  ),
+                  "aria-hidden": trailingIcon ? "true" : void 0,
+                  children: trailingText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label-small tracking-wider", children: trailingText }) : trailingIcon
+                }
+              )
+            ]
+          })
+        )
+      })
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+function SubMenu({
+  children,
+  trigger,
+  side = "right",
+  colorVariant: propColorVariant,
+  hoverOpenDelay = 200,
+  hoverCloseDelay = 300
+}) {
+  const { colorVariant: contextColorVariant, menuPrimitive } = useMenuContext();
+  const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
+  const [open, setOpen] = React38__namespace.useState(false);
+  const openTimerRef = React38__namespace.useRef(null);
+  const closeTimerRef = React38__namespace.useRef(
+    null
   );
-});
-DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
-var DropdownMenuItem = React31__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
+  const clearTimers = React38__namespace.useCallback(() => {
+    if (openTimerRef.current) clearTimeout(openTimerRef.current);
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+  }, []);
+  const handleTriggerPointerEnter = React38__namespace.useCallback(() => {
+    clearTimers();
+    openTimerRef.current = setTimeout(() => setOpen(true), hoverOpenDelay);
+  }, [hoverOpenDelay, clearTimers]);
+  const handleTriggerPointerLeave = React38__namespace.useCallback(() => {
+    clearTimers();
+    closeTimerRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
+  }, [hoverCloseDelay, clearTimers]);
+  const handleContentPointerEnter = React38__namespace.useCallback(() => {
+    clearTimers();
+  }, [clearTimers]);
+  const handleContentPointerLeave = React38__namespace.useCallback(() => {
+    clearTimers();
+    closeTimerRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
+  }, [hoverCloseDelay, clearTimers]);
+  React38__namespace.useEffect(() => () => clearTimers(), [clearTimers]);
+  const Sub3 = menuPrimitive === "context" ? RxContextMenu__namespace.Sub : DropdownMenu__namespace.Sub;
+  const SubTrigger3 = menuPrimitive === "context" ? RxContextMenu__namespace.SubTrigger : DropdownMenu__namespace.SubTrigger;
+  const SubContent3 = menuPrimitive === "context" ? RxContextMenu__namespace.SubContent : DropdownMenu__namespace.SubContent;
+  const Portal7 = menuPrimitive === "context" ? RxContextMenu__namespace.Portal : DropdownMenu__namespace.Portal;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Sub3, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SubTrigger3,
+      {
+        className: "w-full outline-none",
+        onPointerEnter: handleTriggerPointerEnter,
+        onPointerLeave: handleTriggerPointerLeave,
+        children: React38__namespace.isValidElement(trigger) ? React38__namespace.cloneElement(trigger, {
+          isSubTrigger: true,
+          // Auto-add chevron if missing
+          trailingIcon: trigger.props.trailingIcon || /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_right", size: 20 })
+        }) : trigger
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Portal7, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      SubContent3,
+      {
+        sideOffset: 4,
+        alignOffset: -4,
+        forceMount: true,
+        className: "outline-none",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SubMenuContent,
+          {
+            side,
+            colorVariant,
+            onPointerEnter: handleContentPointerEnter,
+            onPointerLeave: handleContentPointerLeave,
+            children
+          }
+        )
+      }
+    ) }) })
+  ] });
+}
+SubMenu.displayName = "SubMenu";
+function SubMenuContent({
+  children,
+  side,
+  colorVariant: propColorVariant,
+  onPointerEnter,
+  onPointerLeave
+}) {
+  const { menuVariant, colorVariant: contextColorVariant } = useMenuContext();
+  const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
+  const colors = menuVariant === "baseline" ? BASELINE_COLORS : colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDropdown__namespace.Item,
-    __spreadValues({
-      ref,
-      className: cn(
-        // MD3 State Layer behavior
-        "relative flex cursor-pointer select-none items-center gap-2",
-        "rounded-lg px-3 py-2 text-sm text-m3-on-surface",
-        "outline-none transition-colors duration-150",
-        "hover:bg-m3-on-surface/8",
-        "focus:bg-m3-on-surface/12",
-        "data-disabled:pointer-events-none data-disabled:opacity-38",
-        "focus-visible:ring-0",
-        // Radix gốc handle ring internally
-        inset && "pl-8",
-        className
-      )
-    }, props)
-  );
-});
-DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuCheckboxItem = React31__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixDropdown__namespace.CheckboxItem,
-    __spreadProps(__spreadValues({
-      ref,
+    react.m.div,
+    {
+      role: "menu",
+      "aria-orientation": "vertical",
+      onPointerEnter,
+      onPointerLeave,
       className: cn(
-        "relative flex cursor-pointer select-none items-center gap-2",
-        "rounded-lg py-2 pl-8 pr-3 text-sm text-m3-on-surface",
-        "outline-none transition-colors duration-150",
-        "hover:bg-m3-on-surface/8 focus:bg-m3-on-surface/12",
-        "data-disabled:pointer-events-none data-disabled:opacity-38",
-        className
+        "z-50 flex flex-col",
+        // Width constraints
+        MENU_MIN_WIDTH,
+        MENU_MAX_WIDTH,
+        // Vertical padding: 8dp
+        MENU_POPUP_PADDING_Y,
+        // Gap between groups: 2dp
+        MENU_GROUP_GAP,
+        // Container background
+        colors.containerBg,
+        // Container shape: CornerExtraSmall (4px)
+        MENU_CONTAINER_SHAPE,
+        // Elevation-2 shadow
+        "elevation-2",
+        // Overflow clip
+        "overflow-hidden",
+        "outline-none"
       ),
-      checked
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(RadixDropdown__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", size: 16, "aria-hidden": "true" }) }) }),
-        children
-      ]
-    })
-  );
-});
-DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-var DropdownMenuRadioItem = React31__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixDropdown__namespace.RadioItem,
-    __spreadProps(__spreadValues({
-      ref,
-      className: cn(
-        "relative flex cursor-pointer select-none items-center gap-2",
-        "rounded-lg py-2 pl-8 pr-3 text-sm text-m3-on-surface",
-        "outline-none transition-colors duration-150",
-        "hover:bg-m3-on-surface/8 focus:bg-m3-on-surface/12",
-        "data-disabled:pointer-events-none data-disabled:opacity-38",
-        className
-      )
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(RadixDropdown__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "circle", fill: 1, size: 8, "aria-hidden": "true" }) }) }),
-        children
-      ]
-    })
-  );
-});
-DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuSeparator = React31__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDropdown__namespace.Separator,
-    __spreadValues({
-      ref,
-      className: cn("my-1 h-px bg-m3-outline-variant", className)
-    }, props)
+      variants: SUBMENU_CONTAINER_VARIANTS,
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      style: {
+        transformOrigin: side === "right" ? "top left" : "top right"
+      },
+      children
+    }
   );
-});
-DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var DropdownMenuLabel = React31__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
+}
+SubMenuContent.displayName = "SubMenuContent";
+var VerticalMenuDivider = React38__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, index, count, isGapVariant } = _b, props = __objRest(_b, ["className", "index", "count", "isGapVariant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDropdown__namespace.Label,
+    "hr",
     __spreadValues({
       ref,
       className: cn(
-        "px-3 py-1.5 text-xs font-medium text-m3-on-surface-variant uppercase tracking-wider",
-        inset && "pl-8",
+        // HorizontalDividerPadding: horizontal=12dp, vertical=2dp
+        "mx-3 my-0.5",
+        // 1px height, no default border
+        "h-px border-0",
+        // Source: MenuDefaults.HorizontalDividerPadding / outline-variant
+        "bg-m3-outline-variant",
         className
       )
     }, props)
   );
 });
-DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var DropdownMenuSubTrigger = React31__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixDropdown__namespace.SubTrigger,
-    __spreadProps(__spreadValues({
-      ref,
-      className: cn(
-        "flex cursor-default select-none items-center gap-2",
-        "rounded-lg px-3 py-2 text-sm text-m3-on-surface",
-        "outline-none transition-colors duration-150",
-        "hover:bg-m3-on-surface/8 focus:bg-m3-on-surface/12",
-        "data-[state=open]:bg-m3-on-surface/8",
-        inset && "pl-8",
-        className
-      )
-    }, props), {
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Icon,
-          {
-            name: "chevron_right",
-            size: 16,
-            className: "ml-auto",
-            "aria-hidden": "true"
+VerticalMenuDivider.displayName = "VerticalMenuDivider";
+var VerticalMenuGroup = MenuGroup;
+var VerticalMenuContent = React38__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      separatorStyle = "gap",
+      colorVariant: propColorVariant,
+      className
+    } = _b, props = __objRest(_b, [
+      "children",
+      "separatorStyle",
+      "colorVariant",
+      "className"
+    ]);
+    const { colorVariant: contextColorVariant } = useMenuContext();
+    const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
+    const colors = colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
+    const flattenChildren = (children2) => {
+      return React38__namespace.Children.toArray(children2).reduce(
+        (acc, child) => {
+          if (React38__namespace.isValidElement(child)) {
+            if (child.type === React38__namespace.Fragment) {
+              return acc.concat(
+                flattenChildren(
+                  child.props.children
+                )
+              );
+            }
+            acc.push(child);
           }
+          return acc;
+        },
+        []
+      );
+    };
+    const validChildren = flattenChildren(children);
+    const groupCount = validChildren.length;
+    const enhancedChildren = validChildren.map(
+      (child, i) => React38__namespace.cloneElement(child, {
+        index: i,
+        count: groupCount,
+        isGapVariant: separatorStyle === "gap"
+      })
+    );
+    const renderedChildren = separatorStyle === "divider" ? enhancedChildren.reduce((acc, child, i) => {
+      if (i > 0) {
+        acc.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            VerticalMenuDivider,
+            {},
+            `divider-${child.key || i}`
+          )
+        );
+      }
+      acc.push(child);
+      return acc;
+    }, []) : enhancedChildren;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "flex flex-col w-full",
+          // Gap variant: transparent background + 2dp gap — page bg shows through gaps.
+          // Divider variant: solid container background behind all groups.
+          separatorStyle === "gap" ? cn("bg-transparent", MENU_GROUP_GAP) : colors.containerBg,
+          className
         )
-      ]
-    })
+      }, props), {
+        children: renderedChildren
+      })
+    );
+  }
+);
+VerticalMenuContent.displayName = "VerticalMenuContent";
+var VerticalMenu = React38__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { children, colorVariant = "standard", className } = _b, props = __objRest(_b, ["children", "colorVariant", "className"]);
+  const noop = React38__namespace.useCallback(() => {
+  }, []);
+  const colors = colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
+  const containerRef = React38__namespace.useRef(null);
+  const mergedRef = React38__namespace.useCallback(
+    (node) => {
+      containerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    [ref]
   );
-});
-DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
-var DropdownMenuShortcut = (_a) => {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  const handleKeyDown = React38__namespace.useCallback(
+    (e) => {
+      var _a2;
+      if (!containerRef.current) return;
+      const items = Array.from(
+        containerRef.current.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"]):not([tabindex="-1"]),[role="menuitemcheckbox"]:not([aria-disabled="true"]):not([tabindex="-1"]),[role="menuitemradio"]:not([aria-disabled="true"]):not([tabindex="-1"])'
+        )
+      );
+      if (!items.length) return;
+      const idx = items.indexOf(document.activeElement);
+      let next = null;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          next = idx < items.length - 1 ? idx + 1 : 0;
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          next = idx > 0 ? idx - 1 : items.length - 1;
+          break;
+        case "Home":
+          e.preventDefault();
+          next = 0;
+          break;
+        case "End":
+          e.preventDefault();
+          next = items.length - 1;
+          break;
+        default:
+          return;
+      }
+      if (next !== null) (_a2 = items[next]) == null ? void 0 : _a2.focus();
+    },
+    []
+  );
+  const separatorStyle = detectSeparatorStyle(children);
+  const isGapVariant = separatorStyle !== "divider";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    __spreadValues({
-      className: cn(
-        "ml-auto text-xs tracking-widest text-m3-on-surface-variant",
-        className
+    MenuProvider,
+    {
+      variant: "expressive",
+      colorVariant,
+      menuPrimitive: "static",
+      open: true,
+      onOpenChange: noop,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        __spreadProps(__spreadValues({
+          ref: mergedRef,
+          role: "menu",
+          "aria-orientation": "vertical",
+          onKeyDown: handleKeyDown,
+          className: cn(
+            // Width constraints: 112dp min, 280dp max (MenuTokens)
+            MENU_MIN_WIDTH,
+            MENU_MAX_WIDTH,
+            "flex flex-col",
+            isGapVariant ? [
+              // GAP VARIANT: NO overflow-hidden — groups must morph freely.
+              "outline-none"
+              // NO background — transparent between segments.
+              // NO rounded corners — each group manages its own shape.
+              // Elevation is managed by each individual group.
+            ] : [
+              // DIVIDER VARIANT: Container clips the content.
+              "rounded-2xl",
+              "overflow-hidden",
+              colors.containerBg,
+              "elevation-2",
+              "outline-none"
+            ],
+            className
+          )
+        }, props), {
+          children
+        })
       )
-    }, props)
+    }
   );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+});
+VerticalMenu.displayName = "VerticalMenu";
+function detectSeparatorStyle(children) {
+  const child = React38__namespace.Children.toArray(children).find(React38__namespace.isValidElement);
+  if (child) {
+    const style = child.props.separatorStyle;
+    if (style) return style;
+  }
+  return "gap";
+}
 function MoreVertIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -760,10 +1743,14 @@ function OverflowItem({ item }) {
   var _a;
   if (item.type === "toggleable") {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownMenuCheckboxItem,
+      MenuItem,
       {
-        checked: (_a = item.checked) != null ? _a : false,
-        onCheckedChange: item.onCheckedChange,
+        role: "menuitemcheckbox",
+        selected: (_a = item.checked) != null ? _a : false,
+        onClick: () => {
+          var _a2;
+          return (_a2 = item.onCheckedChange) == null ? void 0 : _a2.call(item, !item.checked);
+        },
         disabled: item.enabled === false,
         children: item.label
       }
@@ -778,15 +1765,15 @@ function OverflowItem({ item }) {
       }
     }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: item.onClick, disabled: item.enabled === false, children: item.label });
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onClick: item.onClick, disabled: item.enabled === false, children: item.label });
 }
 function AppBarOverflowIndicator({
   items,
   className
 }) {
   if (items.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(Menu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -805,7 +1792,7 @@ function AppBarOverflowIndicator({
         children: /* @__PURE__ */ jsxRuntime.jsx(MoreVertIcon, {})
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", sideOffset: 4, children: items.map((item, index) => (
+    /* @__PURE__ */ jsxRuntime.jsx(MenuContent, { align: "end", sideOffset: 4, children: items.map((item, index) => (
       // biome-ignore lint/suspicious/noArrayIndexKey: static list from props
       /* @__PURE__ */ jsxRuntime.jsx(OverflowItem, { item }, index)
     )) })
@@ -816,11 +1803,11 @@ function AppBarColumn({
   maxItemCount,
   className
 }) {
-  const containerRef = React31__namespace.useRef(null);
-  const [visibleCount, setVisibleCount] = React31__namespace.useState(
+  const containerRef = React38__namespace.useRef(null);
+  const [visibleCount, setVisibleCount] = React38__namespace.useState(
     maxItemCount != null ? maxItemCount : items.length
   );
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     if (maxItemCount !== void 0) {
       setVisibleCount(Math.min(maxItemCount, items.length));
       return;
@@ -868,11 +1855,11 @@ function AppBarColumn({
   );
 }
 function AppBarRow({ items, maxItemCount, className }) {
-  const containerRef = React31__namespace.useRef(null);
-  const [visibleCount, setVisibleCount] = React31__namespace.useState(
+  const containerRef = React38__namespace.useRef(null);
+  const [visibleCount, setVisibleCount] = React38__namespace.useState(
     maxItemCount != null ? maxItemCount : items.length
   );
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     if (maxItemCount !== void 0) {
       setVisibleCount(Math.min(maxItemCount, items.length));
       return;
@@ -926,12 +1913,12 @@ function useAppBarScroll({
   collapsedHeight = 64,
   expandedHeight = 112
 } = {}) {
-  const [isScrolled, setIsScrolled] = React31__namespace.useState(false);
-  const [collapsedFraction, setCollapsedFraction] = React31__namespace.useState(0);
-  const [isHidden, setIsHidden] = React31__namespace.useState(false);
-  const prevScrollYRef = React31__namespace.useRef(0);
+  const [isScrolled, setIsScrolled] = React38__namespace.useState(false);
+  const [collapsedFraction, setCollapsedFraction] = React38__namespace.useState(0);
+  const [isHidden, setIsHidden] = React38__namespace.useState(false);
+  const prevScrollYRef = React38__namespace.useRef(0);
   const hideThreshold = 64;
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     var _a;
     const scrollDistance = expandedHeight - collapsedHeight;
     const getScrollY = () => {
@@ -1052,7 +2039,7 @@ function useFlexibleAppBar({
     expandedHeight
   });
   const scrollProgress = react.useMotionValue(0);
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     scrollProgress.set(
       shouldReduceMotion ? collapsedFraction > 0.5 ? 1 : 0 : collapsedFraction
     );
@@ -1393,7 +2380,7 @@ function SearchAppBar({
 }) {
   var _a, _b;
   const shouldReduceMotion = react.useReducedMotion();
-  const [isSearchOpen, setIsSearchOpen] = React31__namespace.useState(false);
+  const [isSearchOpen, setIsSearchOpen] = React38__namespace.useState(false);
   const { isScrolled } = useAppBarScroll({
     scrollElement,
     behavior: scrollBehavior === "exitUntilCollapsed" ? "pinned" : scrollBehavior
@@ -1507,8 +2494,8 @@ function SearchView({
   className
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React31__namespace.useRef(null);
-  React31__namespace.useEffect(() => {
+  const inputRef = React38__namespace.useRef(null);
+  React38__namespace.useEffect(() => {
     const timer = window.setTimeout(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -1778,9 +2765,9 @@ function formatBadgeLabel(children, max) {
   return "";
 }
 function detectBadgeHasContent(badge) {
-  return React31__namespace.isValidElement(badge) && badge.props.children != null;
+  return React38__namespace.isValidElement(badge) && badge.props.children != null;
 }
-var BadgeImpl = React31__namespace.forwardRef(
+var BadgeImpl = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1834,7 +2821,7 @@ var BadgeImpl = React31__namespace.forwardRef(
   }
 );
 BadgeImpl.displayName = "Badge";
-var Badge = React31__namespace.memo(BadgeImpl);
+var Badge = React38__namespace.memo(BadgeImpl);
 function BadgedBox({
   badge,
   children,
@@ -1900,11 +2887,11 @@ var ROTATE_KEY_SPLINES = [
 var ROTATE_VALUES = "0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24";
 var DETERMINATE_CIRCLE = "M24 7 C34.49 7 41 13.51 41 24 C41 34.49 34.49 41 24 41 C13.51 41 7 34.49 7 24 C7 13.51 13.51 7 24 7 Z";
 var DETERMINATE_SOFT_BURST = "M20.9 10.4 21.4 9.5 21.9 8.7 22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17.1 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.4 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.5 38.9 26.2 39.6 27 40.2 27.7 40.5 28.7 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.9 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.5 9.1 21.8 8.4 21 7.8 20.3 7.5 19.3 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.1 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1Z";
-var IndeterminateSvg = React31__namespace.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React38__namespace.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React31__namespace.useState(false);
-  React31__namespace.useEffect(() => {
+  const [ready, setReady] = React38__namespace.useState(false);
+  React38__namespace.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -1949,7 +2936,7 @@ var IndeterminateSvg = React31__namespace.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React31__namespace.memo(function DeterminateSvg2({
+var DeterminateSvg = React38__namespace.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -1974,7 +2961,7 @@ var DeterminateSvg = React31__namespace.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React31__namespace.forwardRef(
+var LoadingIndicator = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -2089,7 +3076,7 @@ function getSinePath(startX, endX, phase, wl, amp) {
   d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
   return d;
 }
-var CircularProgress = React31__namespace.forwardRef(
+var CircularProgress = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -2127,15 +3114,15 @@ var CircularProgress = React31__namespace.forwardRef(
     const isWavy = shape === "wavy";
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React31__namespace.useMemo(
+    const effectiveAmplitude = React38__namespace.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React31__namespace.useMemo(
+    const effectiveWavelength = React38__namespace.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React31__namespace.useMemo(
+    const wavyActivePath = React38__namespace.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -2144,8 +3131,8 @@ var CircularProgress = React31__namespace.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React31__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React31__namespace.useMemo(
+    const circumference = React38__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React38__namespace.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -2334,9 +3321,9 @@ var CircularProgress = React31__namespace.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React31__namespace.useState(0);
-  const observerRef = React31__namespace.useRef(null);
-  const ref = React31__namespace.useCallback((node) => {
+  const [width, setWidth] = React38__namespace.useState(0);
+  const observerRef = React38__namespace.useRef(null);
+  const ref = React38__namespace.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -2350,7 +3337,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -2360,7 +3347,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React31__namespace.useCallback(
+  return React38__namespace.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -2374,7 +3361,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React31__namespace.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React38__namespace.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -2450,7 +3437,7 @@ var FlatLinearTrack = React31__namespace.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React31__namespace.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React38__namespace.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -2469,13 +3456,13 @@ var WavyLinearTrack = React31__namespace.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React31__namespace.useId();
+  const titleId = React38__namespace.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React31__namespace.useRef(null);
-  const trackPathRef = React31__namespace.useRef(null);
+  const activePathRef = React38__namespace.useRef(null);
+  const trackPathRef = React38__namespace.useRef(null);
   const amplitudeMV = react.useMotionValue(amplitude);
   const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -2646,7 +3633,7 @@ var WavyLinearTrack = React31__namespace.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React31__namespace.forwardRef(
+var LinearProgress = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -2687,10 +3674,10 @@ var LinearProgress = React31__namespace.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React31__namespace.useRef(null);
+    const containerRef = React38__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React31__namespace.useState(false);
-    React31__namespace.useEffect(() => {
+    const [isRtl, setIsRtl] = React38__namespace.useState(false);
+    React38__namespace.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -2698,16 +3685,16 @@ var LinearProgress = React31__namespace.forwardRef(
     }, []);
     const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
-    const effectiveAmplitude = React31__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React31__namespace.useMemo(
+    const effectiveAmplitude = React38__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React38__namespace.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React31__namespace.useMemo(
+    const shouldShowStop = React38__namespace.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React31__namespace.useMemo(
+    const stopSize = React38__namespace.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -2780,14 +3767,14 @@ var LinearProgress = React31__namespace.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React31__namespace.forwardRef((props, ref) => {
+var ProgressIndicator = React38__namespace.forwardRef((props, ref) => {
   if (props.variant === "circular") {
     return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, __spreadValues({ ref }, props));
   }
   return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress, __spreadValues({ ref }, props));
 });
 ProgressIndicator.displayName = "ProgressIndicator";
-var RippleItem = React31__namespace.memo(function RippleItem2({
+var RippleItem = React38__namespace.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -2831,8 +3818,8 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React31__namespace.useState([]);
-  const onPointerDown = React31__namespace.useCallback(
+  const [ripples, setRipples] = React38__namespace.useState([]);
+  const onPointerDown = React38__namespace.useCallback(
     (e) => {
       if (disabled) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -2846,7 +3833,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React31__namespace.useCallback((id) => {
+  const removeRipple = React38__namespace.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -2975,15 +3962,12 @@ var buttonColorVariants = classVarianceAuthority.cva(
     defaultVariants: { colorStyle: "filled" }
   }
 );
-function toSentenceCase(text) {
-  return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
-}
 function resolveLabel(children, asChild) {
   if (asChild) {
-    const child = React31__namespace.Children.only(children);
+    const child = React38__namespace.Children.only(children);
     return child.props.children;
   }
-  return typeof children === "string" ? toSentenceCase(children) : children;
+  return children;
 }
 var MOTION_PROP_KEYS = [
   "animate",
@@ -3052,7 +4036,7 @@ function AnimatedIconSlot({
     }
   );
 }
-var ButtonComponent = React31__namespace.forwardRef(
+var ButtonComponent = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3101,15 +4085,15 @@ var ButtonComponent = React31__namespace.forwardRef(
     const { pressed: pressedRadius } = (_b2 = radiusMap[size]) != null ? _b2 : radiusMap.sm;
     const iconClass = (_c = SIZE_ICON_CLASS[size]) != null ? _c : "size-5";
     const mergedStyle = __spreadValues(__spreadValues({}, SIZE_STYLES[size]), style);
-    const labelText = React31__namespace.useMemo(
+    const labelText = React38__namespace.useMemo(
       () => resolveLabel(children, asChild),
       [children, asChild]
     );
     const computedAriaLabel = ariaLabelProp || (typeof children === "string" ? children : void 0);
     const needsTouchTarget = size === "xs" || size === "sm";
     const motionRadius = react.useMotionValue(animateRadius);
-    const asChildRef = React31__namespace.useRef(null);
-    const mergedRef = React31__namespace.useCallback(
+    const asChildRef = React38__namespace.useRef(null);
+    const mergedRef = React38__namespace.useCallback(
       (node) => {
         asChildRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -3118,27 +4102,27 @@ var ButtonComponent = React31__namespace.forwardRef(
       },
       [ref]
     );
-    React31__namespace.useEffect(
+    React38__namespace.useEffect(
       () => motionRadius.on("change", (v) => {
         if (asChildRef.current)
           asChildRef.current.style.borderRadius = `${v}px`;
       }),
       [motionRadius]
     );
-    React31__namespace.useEffect(() => {
+    React38__namespace.useEffect(() => {
       springAnimate(motionRadius, animateRadius);
     }, [animateRadius, motionRadius]);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React31__namespace.useCallback(
+    const handleClick = React38__namespace.useCallback(
       (e) => {
         if (loading) return e.preventDefault();
         onClick == null ? void 0 : onClick(e);
       },
       [loading, onClick]
     );
-    const handleKeyDown = React31__namespace.useCallback(
+    const handleKeyDown = React38__namespace.useCallback(
       (e) => {
         if (loading) return;
         if (onClick && (e.key === "Enter" || e.key === " ")) {
@@ -3172,7 +4156,7 @@ var ButtonComponent = React31__namespace.forwardRef(
         react.m.span,
         {
           layout: "size",
-          className: "inline-flex items-center gap-[inherit]",
+          className: "inline-flex items-center h-full gap-[inherit]",
           transition: SPRING_TRANSITION,
           children: labelText
         }
@@ -3181,7 +4165,7 @@ var ButtonComponent = React31__namespace.forwardRef(
     ] });
     if (asChild) {
       const htmlProps = stripMotionProps(restProps);
-      const child = React31__namespace.Children.only(children);
+      const child = React38__namespace.Children.only(children);
       const handleAsChildPointerDown = (e) => {
         springAnimate(motionRadius, pressedRadius);
         onPointerDown == null ? void 0 : onPointerDown(e);
@@ -3205,7 +4189,7 @@ var ButtonComponent = React31__namespace.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React31__namespace.cloneElement(child, { children: innerContent })
+          children: React38__namespace.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -3233,7 +4217,7 @@ var ButtonComponent = React31__namespace.forwardRef(
   }
 );
 ButtonComponent.displayName = "Button";
-var Button = React31__namespace.memo(ButtonComponent);
+var Button = React38__namespace.memo(ButtonComponent);
 var SIZE_PADDING_MAP = {
   xs: "0.75rem",
   sm: "1rem",
@@ -3262,7 +4246,7 @@ var PRESSED_RADIUS_MAP = {
   lg: 28,
   xl: 40
 };
-var ButtonGroupComponent = React31__namespace.forwardRef(
+var ButtonGroupComponent = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3283,13 +4267,13 @@ var ButtonGroupComponent = React31__namespace.forwardRef(
       "showCheck",
       "children"
     ]);
-    const [pressedIndex, setPressedIndex] = React31__namespace.useState(null);
-    const childrenArray = React31__namespace.useMemo(
-      () => React31__namespace.Children.toArray(children).filter(React31__namespace.isValidElement),
+    const [pressedIndex, setPressedIndex] = React38__namespace.useState(null);
+    const childrenArray = React38__namespace.useMemo(
+      () => React38__namespace.Children.toArray(children).filter(React38__namespace.isValidElement),
       [children]
     );
     const count = childrenArray.length;
-    const handlePointerLeaveAndUp = React31__namespace.useCallback(() => {
+    const handlePointerLeaveAndUp = React38__namespace.useCallback(() => {
       setPressedIndex(null);
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3428,7 +4412,7 @@ var ButtonGroupComponent = React31__namespace.forwardRef(
               duration: 0.2
             };
           }
-          return React31__namespace.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
+          return React38__namespace.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
             key: (_a2 = element.key) != null ? _a2 : index,
             tabIndex: isFirst ? 0 : -1,
             size: size || element.props.size,
@@ -3457,7 +4441,7 @@ var ButtonGroupComponent = React31__namespace.forwardRef(
   }
 );
 ButtonGroupComponent.displayName = "ButtonGroup";
-var ButtonGroup = React31__namespace.memo(ButtonGroupComponent);
+var ButtonGroup = React38__namespace.memo(ButtonGroupComponent);
 var SHADOW = {
   level0: "none",
   level1: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)",
@@ -3516,7 +4500,7 @@ function useCardElevation(variant, disabled) {
     }
   };
 }
-var CardImpl = React31__namespace.forwardRef(
+var CardImpl = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3614,7 +4598,7 @@ var CardImpl = React31__namespace.forwardRef(
   }
 );
 CardImpl.displayName = "Card";
-var Card = React31__namespace.memo(CardImpl);
+var Card = React38__namespace.memo(CardImpl);
 var MD3_STANDARD = [0.2, 0, 0, 1];
 var MD3_FAST_EFFECTS = [0.3, 0, 1, 1];
 var CHECKMARK_PATH = "M 4.5 9.5 L 7.5 12.5 L 13.5 5.5";
@@ -3628,7 +4612,7 @@ var NEXT_STATE = {
   checked: "indeterminate",
   indeterminate: "unchecked"
 };
-var CheckboxVisual = React31__namespace.memo(function CheckboxVisual2({
+var CheckboxVisual = React38__namespace.memo(function CheckboxVisual2({
   isSelected,
   isIndeterminate,
   containerBg,
@@ -3699,7 +4683,7 @@ var CheckboxVisual = React31__namespace.memo(function CheckboxVisual2({
   );
 });
 function useMergedRef2(externalRef, internalRef) {
-  return React31__namespace.useCallback(
+  return React38__namespace.useCallback(
     (node) => {
       internalRef.current = node;
       if (!externalRef) return;
@@ -3712,7 +4696,7 @@ function useMergedRef2(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var CheckboxComponent = React31__namespace.forwardRef(
+var CheckboxComponent = React38__namespace.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -3734,20 +4718,20 @@ var CheckboxComponent = React31__namespace.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-    const generatedId = React31__namespace.useId();
+    const generatedId = React38__namespace.useId();
     const inputId = idProp != null ? idProp : label ? `checkbox-${generatedId}` : void 0;
-    const [internalState, setInternalState] = React31__namespace.useState(
+    const [internalState, setInternalState] = React38__namespace.useState(
       () => defaultChecked ? "checked" : "unchecked"
     );
     const isControlled = stateProp !== void 0 || checked !== void 0;
     const baseState = isControlled ? resolveState(checked, false, stateProp) : internalState;
     const effectiveState = indeterminate ? "indeterminate" : baseState;
-    const [ripples, setRipples] = React31__namespace.useState([]);
-    const removeRipple = React31__namespace.useCallback(
+    const [ripples, setRipples] = React38__namespace.useState([]);
+    const removeRipple = React38__namespace.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
-    const onPointerDown = React31__namespace.useCallback(
+    const onPointerDown = React38__namespace.useCallback(
       (e) => {
         if (disabled) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -3761,7 +4745,7 @@ var CheckboxComponent = React31__namespace.forwardRef(
       },
       [disabled]
     );
-    const handleChange = React31__namespace.useCallback(
+    const handleChange = React38__namespace.useCallback(
       (e) => {
         if (disabled) return;
         if (stateProp !== void 0) {
@@ -3787,9 +4771,9 @@ var CheckboxComponent = React31__namespace.forwardRef(
         onCheckedChange
       ]
     );
-    const inputRef = React31__namespace.useRef(null);
+    const inputRef = React38__namespace.useRef(null);
     const mergedRef = useMergedRef2(ref, inputRef);
-    React31__namespace.useEffect(() => {
+    React38__namespace.useEffect(() => {
       if (inputRef.current) {
         inputRef.current.indeterminate = effectiveState === "indeterminate";
       }
@@ -3914,13 +4898,13 @@ var CheckboxComponent = React31__namespace.forwardRef(
   }
 );
 CheckboxComponent.displayName = "Checkbox";
-var Checkbox = React31__namespace.memo(CheckboxComponent);
-var TriStateCheckboxComponent = React31__namespace.forwardRef((_a, ref) => {
+var Checkbox = React38__namespace.memo(CheckboxComponent);
+var TriStateCheckboxComponent = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { state, onStateChange } = _b, rest = __objRest(_b, ["state", "onStateChange"]);
   return /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadValues({ ref, state, onStateChange }, rest));
 });
 TriStateCheckboxComponent.displayName = "TriStateCheckbox";
-var TriStateCheckbox = React31__namespace.memo(TriStateCheckboxComponent);
+var TriStateCheckbox = React38__namespace.memo(TriStateCheckboxComponent);
 function CheckIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -4014,7 +4998,7 @@ var chipVariants = classVarianceAuthority.cva(
     defaultVariants: { variant: "assist" }
   }
 );
-var ChipImpl = React31__namespace.forwardRef(
+var ChipImpl = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "assist",
@@ -4050,7 +5034,7 @@ var ChipImpl = React31__namespace.forwardRef(
     const showCheckmark = isFilter && selected;
     const hasTrailingContent = !!trailingIcon || !!onRemove;
     const hasLeadingContent = isFilter || !!resolvedLeadingIcon;
-    const paddingClass = React31__namespace.useMemo(
+    const paddingClass = React38__namespace.useMemo(
       () => cn(
         !isInput && !hasLeadingContent && !hasTrailingContent && "px-4",
         !isInput && hasLeadingContent && !hasTrailingContent && "pl-2 pr-4",
@@ -4063,7 +5047,7 @@ var ChipImpl = React31__namespace.forwardRef(
       ),
       [isInput, hasLeadingContent, hasTrailingContent]
     );
-    const stateClass = React31__namespace.useMemo(
+    const stateClass = React38__namespace.useMemo(
       () => cn(
         (isFilter || isInput) && selected && "bg-m3-secondary-container text-m3-on-secondary-container border-none before:bg-m3-on-secondary-container",
         elevated && !selected && "bg-m3-surface-container-low border-none elevation-1",
@@ -4074,7 +5058,7 @@ var ChipImpl = React31__namespace.forwardRef(
       ),
       [isFilter, isInput, selected, elevated, disabled]
     );
-    const leadingIconColorClass = React31__namespace.useMemo(
+    const leadingIconColorClass = React38__namespace.useMemo(
       () => cn(
         (variant === "assist" || variant === "suggestion") && "text-m3-primary",
         isFilter && !selected && "text-m3-primary",
@@ -4085,7 +5069,7 @@ var ChipImpl = React31__namespace.forwardRef(
       [variant, isFilter, isInput, selected]
     );
     const isCompound = !!onRemove;
-    const Root5 = isCompound ? "div" : "button";
+    const Root6 = isCompound ? "div" : "button";
     const containerClass = cn(
       chipVariants({ variant }),
       !isCompound && paddingClass,
@@ -4155,7 +5139,7 @@ var ChipImpl = React31__namespace.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: label })
     ] });
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Root5,
+      Root6,
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         ref: !isCompound ? ref : void 0,
         type: !isCompound ? "button" : void 0
@@ -4246,8 +5230,8 @@ var ChipImpl = React31__namespace.forwardRef(
   }
 );
 ChipImpl.displayName = "Chip";
-var Chip = React31__namespace.memo(ChipImpl);
-var ScrollArea = React31__namespace.forwardRef(
+var Chip = React38__namespace.memo(ChipImpl);
+var ScrollArea = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4306,7 +5290,7 @@ var ScrollArea = React31__namespace.forwardRef(
   }
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollAreaScrollbar = React31__namespace.forwardRef((_a, ref) => {
+var ScrollAreaScrollbar = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixScrollArea__namespace.Scrollbar,
@@ -4336,7 +5320,7 @@ var ScrollAreaScrollbar = React31__namespace.forwardRef((_a, ref) => {
   );
 });
 ScrollAreaScrollbar.displayName = RadixScrollArea__namespace.Scrollbar.displayName;
-var ScrollAreaCorner = React31__namespace.forwardRef((_a, ref) => {
+var ScrollAreaCorner = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixScrollArea__namespace.Corner,
@@ -4431,7 +5415,7 @@ function mapDomToReact(node, key) {
         props[propName] = attr.value;
       }
     }
-    return React31.createElement(
+    return React38.createElement(
       tagName,
       props,
       Array.from(el.childNodes).map((child, i) => mapDomToReact(child, i))
@@ -4440,8 +5424,8 @@ function mapDomToReact(node, key) {
   return null;
 }
 function CodeContent({ html, code }) {
-  const [parsedContent, setParsedContent] = React31.useState(null);
-  React31.useEffect(() => {
+  const [parsedContent, setParsedContent] = React38.useState(null);
+  React38.useEffect(() => {
     if (html) {
       const parser = new DOMParser();
       const doc = parser.parseFromString(html, "text/html");
@@ -4471,8 +5455,8 @@ function CodeBlock({
   className,
   html
 }) {
-  const [copied, setCopied] = React31.useState(false);
-  const handleCopy = React31.useCallback(async () => {
+  const [copied, setCopied] = React38.useState(false);
+  const handleCopy = React38.useCallback(async () => {
     try {
       await navigator.clipboard.writeText(code);
       setCopied(true);
@@ -4613,7 +5597,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React31__namespace.forwardRef(
+var IconButtonComponent = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4647,18 +5631,18 @@ var IconButtonComponent = React31__namespace.forwardRef(
     var _a2, _b2;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React31__namespace.useMemo(
+    const resolvedColorClass = React38__namespace.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React31__namespace.useMemo(
+    const outlineWidthClass = React38__namespace.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React31__namespace.useMemo(
+    const disabledBgClass = React38__namespace.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -4677,7 +5661,7 @@ var IconButtonComponent = React31__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React31__namespace.useCallback(
+    const handleClick = React38__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -4687,7 +5671,7 @@ var IconButtonComponent = React31__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React31__namespace.useCallback(
+    const handleKeyDown = React38__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -4775,7 +5759,7 @@ var IconButtonComponent = React31__namespace.forwardRef(
   }
 );
 IconButtonComponent.displayName = "IconButton";
-var IconButton = React31__namespace.memo(IconButtonComponent);
+var IconButton = React38__namespace.memo(IconButtonComponent);
 var MD3_SPRING = {
   type: "spring",
   stiffness: 400,
@@ -4812,9 +5796,9 @@ DialogTrigger.displayName = "DialogTrigger";
 var DialogPortal = ({
   open,
   children
-}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ? React31__namespace.Children.toArray(children) : null }) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ? React38__namespace.Children.toArray(children) : null }) });
 DialogPortal.displayName = "DialogPortal";
-var DialogOverlay = React31__namespace.forwardRef((_a, ref) => {
+var DialogOverlay = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
@@ -4825,7 +5809,7 @@ var DialogOverlay = React31__namespace.forwardRef((_a, ref) => {
   ) }));
 });
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React31__namespace.forwardRef((_a, ref) => {
+var DialogContent = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Content,
@@ -4865,7 +5849,7 @@ var DialogContent = React31__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogContent.displayName = "DialogContent";
-var DialogIcon = React31__namespace.forwardRef((_a, ref) => {
+var DialogIcon = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -4888,7 +5872,7 @@ var DialogHeader = (_a) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mb-4", className) }, props));
 };
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React31__namespace.forwardRef((_a, ref) => {
+var DialogTitle = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Title,
@@ -4903,7 +5887,7 @@ var DialogTitle = React31__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React31__namespace.forwardRef((_a, ref) => {
+var DialogDescription = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Description,
@@ -4915,7 +5899,7 @@ var DialogDescription = React31__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogDescription.displayName = "DialogDescription";
-var DialogBody = React31__namespace.forwardRef((_a, ref) => {
+var DialogBody = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, dir } = _b, props = __objRest(_b, ["className", "children", "dir"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ScrollArea,
@@ -4946,7 +5930,7 @@ var DialogFooter = (_a) => {
 };
 DialogFooter.displayName = "DialogFooter";
 var DialogClose = RadixDialog__namespace.Close;
-var DialogFullScreenContent = React31__namespace.forwardRef(
+var DialogFullScreenContent = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5029,7 +6013,7 @@ function buildWavePath(startX, endX, amplitude = 2, wavelength = 32, yCenter = 4
   }
   return d;
 }
-var DividerImpl = React31__namespace.forwardRef(
+var DividerImpl = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "full-bleed",
@@ -5149,7 +6133,7 @@ var DividerImpl = React31__namespace.forwardRef(
   }
 );
 DividerImpl.displayName = "Divider";
-var Divider = React31__namespace.memo(DividerImpl);
+var Divider = React38__namespace.memo(DividerImpl);
 var MD3_DRAWER_SPRING = {
   type: "spring",
   stiffness: 350,
@@ -5186,7 +6170,7 @@ var DrawerPortal = ({
   open,
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: open && children }) });
-var DrawerOverlay = React31__namespace.forwardRef((_a, ref) => {
+var DrawerOverlay = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
@@ -5197,7 +6181,7 @@ var DrawerOverlay = React31__namespace.forwardRef((_a, ref) => {
   ) }));
 });
 DrawerOverlay.displayName = "DrawerOverlay";
-var DrawerContent = React31__namespace.forwardRef(
+var DrawerContent = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5276,7 +6260,7 @@ var DrawerFooter = (_a) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mt-4", className) }, props));
 };
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React31__namespace.forwardRef((_a, ref) => {
+var DrawerTitle = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Title,
@@ -5290,7 +6274,7 @@ var DrawerTitle = React31__namespace.forwardRef((_a, ref) => {
   );
 });
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React31__namespace.forwardRef((_a, ref) => {
+var DrawerDescription = React38__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Description,
@@ -5371,7 +6355,7 @@ function FABPosition({
     }
   );
 }
-var FABComponent = React31__namespace.forwardRef(
+var FABComponent = React38__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5416,7 +6400,7 @@ var FABComponent = React31__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React31__namespace.useCallback(
+    const handleClick = React38__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -5426,7 +6410,7 @@ var FABComponent = React31__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React31__namespace.useCallback(
+    const handleKeyDown = React38__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -5535,7 +6519,7 @@ var FABComponent = React31__namespace.forwardRef(
   }
 );
 FABComponent.displayName = "FAB";
-var FAB = React31__namespace.memo(FABComponent);
+var FAB = React38__namespace.memo(FABComponent);
 var SPRING_NORMAL = { stiffness: 700, damping: 40 };
 var SPRING_REDUCED = { stiffness: 1e4, damping: 100 };
 var FOCUS_DELAY_MS = 50;
@@ -5600,7 +6584,7 @@ var ALIGNMENT_TRANSFORM_ORIGIN = {
   center: "bottom"
 };
 var ITEM_SPRING = { type: "spring", stiffness: 700, damping: 25 };
-var MENU_CONTAINER_VARIANTS = {
+var MENU_CONTAINER_VARIANTS2 = {
   open: { transition: { staggerChildren: 0.033, staggerDirection: 1 } },
   closed: { transition: { staggerChildren: 0.02, staggerDirection: -1 } }
 };
@@ -5643,7 +6627,7 @@ function CloseIcon3() {
 function defaultFabIcon(progress) {
   return progress > 0.5 ? /* @__PURE__ */ jsxRuntime.jsx(CloseIcon3, {}) : /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {});
 }
-var ToggleFABComponent = React31__namespace.forwardRef(
+var ToggleFABComponent = React38__namespace.forwardRef(
   ({
     expanded,
     onToggle,
@@ -5661,7 +6645,7 @@ var ToggleFABComponent = React31__namespace.forwardRef(
     const sizeTokens = (_b = TOGGLE_FAB_SIZES[fabSize]) != null ? _b : TOGGLE_FAB_SIZES.baseline;
     const springConfig = prefersReduced ? SPRING_REDUCED : SPRING_NORMAL;
     const checkedProgress = react.useSpring(expanded ? 1 : 0, springConfig);
-    React31__namespace.useEffect(() => {
+    React38__namespace.useEffect(() => {
       checkedProgress.set(expanded ? 1 : 0);
     }, [expanded, checkedProgress]);
     const borderRadius = react.useTransform(
@@ -5669,12 +6653,12 @@ var ToggleFABComponent = React31__namespace.forwardRef(
       [0, 1],
       [`${sizeTokens.initialRadius}px`, `${sizeTokens.finalRadius}px`]
     );
-    const [iconProgress, setIconProgress] = React31__namespace.useState(expanded ? 1 : 0);
-    React31__namespace.useEffect(() => {
+    const [iconProgress, setIconProgress] = React38__namespace.useState(expanded ? 1 : 0);
+    React38__namespace.useEffect(() => {
       return checkedProgress.on("change", setIconProgress);
     }, [checkedProgress]);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
-    const handleClick = React31__namespace.useCallback(() => {
+    const handleClick = React38__namespace.useCallback(() => {
       onToggle(!expanded);
     }, [expanded, onToggle]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5723,7 +6707,7 @@ var ToggleFABComponent = React31__namespace.forwardRef(
   }
 );
 ToggleFABComponent.displayName = "ToggleFAB";
-var ToggleFAB = React31__namespace.memo(ToggleFABComponent);
+var ToggleFAB = React38__namespace.memo(ToggleFABComponent);
 function FABMenuItem({
   icon,
   label,
@@ -5736,7 +6720,7 @@ function FABMenuItem({
   var _a;
   const colors = (_a = MENU_ITEM_COLORS[colorVariant]) != null ? _a : MENU_ITEM_COLORS.primary;
   const { ripples, onPointerDown, removeRipple } = useRippleState({ disabled });
-  const handleClick = React31__namespace.useCallback(
+  const handleClick = React38__namespace.useCallback(
     (e) => {
       if (disabled) {
         e.preventDefault();
@@ -5746,7 +6730,7 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  const handleKeyDown = React31__namespace.useCallback(
+  const handleKeyDown = React38__namespace.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -5813,13 +6797,13 @@ function FABMenu({
   focusLast = true,
   "aria-label": ariaLabel
 }) {
-  const fabId = React31__namespace.useId();
-  const menuId = React31__namespace.useId();
-  const toggleRef = React31__namespace.useRef(null);
-  const itemRefs = React31__namespace.useRef([]);
-  const [focusedIndex, setFocusedIndex] = React31__namespace.useState(-1);
-  const reversedItems = React31__namespace.useMemo(() => [...items].reverse(), [items]);
-  const focusItem = React31__namespace.useCallback((index) => {
+  const fabId = React38__namespace.useId();
+  const menuId = React38__namespace.useId();
+  const toggleRef = React38__namespace.useRef(null);
+  const itemRefs = React38__namespace.useRef([]);
+  const [focusedIndex, setFocusedIndex] = React38__namespace.useState(-1);
+  const reversedItems = React38__namespace.useMemo(() => [...items].reverse(), [items]);
+  const focusItem = React38__namespace.useCallback((index) => {
     var _a;
     const clampedIndex = Math.max(
       0,
@@ -5828,8 +6812,8 @@ function FABMenu({
     setFocusedIndex(clampedIndex);
     (_a = itemRefs.current[clampedIndex]) == null ? void 0 : _a.focus();
   }, []);
-  const wasExpandedRef = React31__namespace.useRef(false);
-  React31__namespace.useEffect(() => {
+  const wasExpandedRef = React38__namespace.useRef(false);
+  React38__namespace.useEffect(() => {
     var _a;
     if (expanded) {
       wasExpandedRef.current = true;
@@ -5844,7 +6828,7 @@ function FABMenu({
     wasExpandedRef.current = false;
     setFocusedIndex(-1);
   }, [expanded, focusLast, items.length, focusItem]);
-  const handleMenuKeyDown = React31__namespace.useCallback(
+  const handleMenuKeyDown = React38__namespace.useCallback(
     (e) => {
       if (!expanded) return;
       const lastIndex = items.length - 1;
@@ -5905,7 +6889,7 @@ function FABMenu({
               role: "menu",
               "aria-labelledby": fabId,
               "aria-orientation": "vertical",
-              variants: MENU_CONTAINER_VARIANTS,
+              variants: MENU_CONTAINER_VARIANTS2,
               initial: "closed",
               animate: "open",
               exit: "closed",
@@ -5968,7 +6952,7 @@ function FABMenu({
     )
   ] });
 }
-var NavigationRailContext = React31__namespace.createContext({ variant: "collapsed", labelVisibility: "labeled", xr: false });
+var NavigationRailContext = React38__namespace.createContext({ variant: "collapsed", labelVisibility: "labeled", xr: false });
 var MD3_MODAL_TRANSITION = {
   type: "tween",
   ease: [0.05, 0.7, 0.1, 1],
@@ -6004,9 +6988,9 @@ var railContainerVariants = classVarianceAuthority.cva(
   }
 );
 function cloneIconWithFill(icon, selected) {
-  if (!React31__namespace.isValidElement(icon)) return icon;
+  if (!React38__namespace.isValidElement(icon)) return icon;
   if (icon.type === Icon) {
-    return React31__namespace.cloneElement(
+    return React38__namespace.cloneElement(
       icon,
       { fill: selected ? 1 : 0, animateFill: true }
     );
@@ -6034,11 +7018,11 @@ function ActivePill({ layoutId, disableInitial = false }) {
     {
       layoutId,
       className: "absolute inset-0 bg-m3-secondary-container pointer-events-none",
-      style: { borderRadius: 9999, zIndex: 0 },
-      initial: disableInitial ? false : { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: SPRING_TRANSITION
+      style: { borderRadius: 9999, zIndex: 0, originX: 0.5, originY: 0.5 },
+      initial: disableInitial ? false : { opacity: 0, scale: 0.5 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.5, transition: { duration: 0.15 } },
+      transition: SPRING_TRANSITION_EXPRESSIVE
     }
   );
 }
@@ -6064,7 +7048,7 @@ function IconContainer({ selected, badge, children }) {
     }
   );
 }
-var NavigationRailItemComponent = React31__namespace.forwardRef(
+var NavigationRailItemComponent = React38__namespace.forwardRef(
   ({
     selected,
     icon,
@@ -6075,18 +7059,18 @@ var NavigationRailItemComponent = React31__namespace.forwardRef(
     className,
     "aria-label": ariaLabelProp
   }, ref) => {
-    const { variant, labelVisibility } = React31__namespace.useContext(
+    const { variant, labelVisibility } = React38__namespace.useContext(
       NavigationRailContext
     );
     const isExpanded = variant === "expanded" || variant === "modal";
     const isModal = variant === "modal";
     const enableLayout = !isModal;
-    const activePillId = `rail-pill-${React31__namespace.useId()}`;
+    const activePillId = `rail-pill-${React38__namespace.useId()}`;
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
     });
     const showLabel = isExpanded || labelVisibility === "labeled" || labelVisibility === "auto" && selected;
-    const handleClick = React31__namespace.useCallback(
+    const handleClick = React38__namespace.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -6188,9 +7172,9 @@ var NavigationRailItemComponent = React31__namespace.forwardRef(
   }
 );
 NavigationRailItemComponent.displayName = "NavigationRailItem";
-var NavigationRailItem = React31__namespace.memo(NavigationRailItemComponent);
+var NavigationRailItem = React38__namespace.memo(NavigationRailItemComponent);
 function useRoving(navRef) {
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     if (!navRef.current) return;
     const items = getMenuItems(navRef.current);
     const selected = items.find(
@@ -6200,7 +7184,7 @@ function useRoving(navRef) {
     const firstFocusable = selected != null ? selected : items[0];
     if (firstFocusable) firstFocusable.tabIndex = 0;
   }, [navRef]);
-  return React31__namespace.useCallback(
+  return React38__namespace.useCallback(
     (e) => {
       if (!navRef.current) return;
       const items = getMenuItems(navRef.current);
@@ -6228,7 +7212,7 @@ function useRoving(navRef) {
     [navRef]
   );
 }
-var NavigationRailComponent = React31__namespace.forwardRef(
+var NavigationRailComponent = React38__namespace.forwardRef(
   ({
     variant = "collapsed",
     labelVisibility = "labeled",
@@ -6248,9 +7232,9 @@ var NavigationRailComponent = React31__namespace.forwardRef(
     const xrMode = xr === "spatialized" ? "spatialized" : "contained";
     const isSpatial = isXr && xrMode === "spatialized";
     const applyAnimation = !isXr || !isSpatial;
-    const navRef = React31__namespace.useRef(null);
+    const navRef = React38__namespace.useRef(null);
     const handleKeyDown = useRoving(navRef);
-    const setRefs = React31__namespace.useCallback(
+    const setRefs = React38__namespace.useCallback(
       (node) => {
         navRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -6343,7 +7327,7 @@ var NavigationRailComponent = React31__namespace.forwardRef(
               children: fab
             }
           ),
-          React31__namespace.cloneElement(
+          React38__namespace.cloneElement(
             navElement,
             {
               className: cn(navBaseClasses, "pointer-events-auto")
@@ -6381,13 +7365,13 @@ var NavigationRailComponent = React31__namespace.forwardRef(
   }
 );
 NavigationRailComponent.displayName = "NavigationRail";
-var NavigationRail = React31__namespace.memo(NavigationRailComponent);
+var NavigationRail = React38__namespace.memo(NavigationRailComponent);
 var MD3_FAST_EFFECTS2 = [0.3, 0, 1, 1];
-var RadioGroupContext = React31__namespace.createContext(
+var RadioGroupContext = React38__namespace.createContext(
   null
 );
 function useMergedRef3(externalRef, internalRef) {
-  return React31__namespace.useCallback(
+  return React38__namespace.useCallback(
     (node) => {
       internalRef.current = node;
       if (!externalRef) return;
@@ -6400,7 +7384,7 @@ function useMergedRef3(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var RadioVisual = React31__namespace.memo(function RadioVisual2({
+var RadioVisual = React38__namespace.memo(function RadioVisual2({
   isSelected,
   disabled,
   error,
@@ -6453,7 +7437,7 @@ var RadioVisual = React31__namespace.memo(function RadioVisual2({
     }
   );
 });
-var RadioButtonComponent = React31__namespace.forwardRef(
+var RadioButtonComponent = React38__namespace.forwardRef(
   ({
     selected,
     defaultSelected = false,
@@ -6472,23 +7456,23 @@ var RadioButtonComponent = React31__namespace.forwardRef(
     required: requiredProp
   }, ref) => {
     var _a, _b;
-    const group = React31__namespace.useContext(RadioGroupContext);
+    const group = React38__namespace.useContext(RadioGroupContext);
     const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-    const generatedId = React31__namespace.useId();
+    const generatedId = React38__namespace.useId();
     const inputId = idProp != null ? idProp : label ? `radio-${generatedId}` : void 0;
     const name = (_b = group == null ? void 0 : group.name) != null ? _b : nameProp;
     const disabled = (group == null ? void 0 : group.disabled) || disabledProp;
     const error = (group == null ? void 0 : group.error) || errorProp || color === "error";
     const required = (group == null ? void 0 : group.required) || requiredProp;
-    const [internalSelected, setInternalSelected] = React31__namespace.useState(defaultSelected);
+    const [internalSelected, setInternalSelected] = React38__namespace.useState(defaultSelected);
     const isControlled = selected !== void 0;
     const isSelected = group ? group.selectedValue === value : isControlled ? selected != null ? selected : false : internalSelected;
-    const [ripples, setRipples] = React31__namespace.useState([]);
-    const removeRipple = React31__namespace.useCallback(
+    const [ripples, setRipples] = React38__namespace.useState([]);
+    const removeRipple = React38__namespace.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
-    const onPointerDown = React31__namespace.useCallback(
+    const onPointerDown = React38__namespace.useCallback(
       (e) => {
         if (disabled) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -6502,12 +7486,12 @@ var RadioButtonComponent = React31__namespace.forwardRef(
       },
       [disabled]
     );
-    const [isHovered, setIsHovered] = React31__namespace.useState(false);
-    const onPointerEnter = React31__namespace.useCallback(() => {
+    const [isHovered, setIsHovered] = React38__namespace.useState(false);
+    const onPointerEnter = React38__namespace.useCallback(() => {
       if (!disabled) setIsHovered(true);
     }, [disabled]);
-    const onPointerLeave = React31__namespace.useCallback(() => setIsHovered(false), []);
-    const handleChange = React31__namespace.useCallback(
+    const onPointerLeave = React38__namespace.useCallback(() => setIsHovered(false), []);
+    const handleChange = React38__namespace.useCallback(
       (_e) => {
         if (disabled || onClick === null) return;
         if (group) {
@@ -6521,7 +7505,7 @@ var RadioButtonComponent = React31__namespace.forwardRef(
       },
       [disabled, onClick, group, value, isControlled]
     );
-    const inputRef = React31__namespace.useRef(null);
+    const inputRef = React38__namespace.useRef(null);
     const mergedRef = useMergedRef3(ref, inputRef);
     const stateLayerBg = error ? "before:bg-m3-error" : "before:bg-m3-primary";
     const stateLayerClass = cn(
@@ -6632,8 +7616,8 @@ var RadioButtonComponent = React31__namespace.forwardRef(
   }
 );
 RadioButtonComponent.displayName = "RadioButton";
-var RadioButton = React31__namespace.memo(RadioButtonComponent);
-var RadioGroupComponent = React31__namespace.forwardRef(
+var RadioButton = React38__namespace.memo(RadioButtonComponent);
+var RadioGroupComponent = React38__namespace.forwardRef(
   ({
     name,
     value: valueProp,
@@ -6648,19 +7632,19 @@ var RadioGroupComponent = React31__namespace.forwardRef(
     children,
     className
   }, ref) => {
-    const [internalValue, setInternalValue] = React31__namespace.useState(defaultValue);
+    const [internalValue, setInternalValue] = React38__namespace.useState(defaultValue);
     const isControlled = valueProp !== void 0;
     const selectedValue = isControlled ? valueProp : internalValue;
-    const handleValueChange = React31__namespace.useCallback(
+    const handleValueChange = React38__namespace.useCallback(
       (val) => {
         if (!isControlled) setInternalValue(val);
         onValueChange == null ? void 0 : onValueChange(val);
       },
       [isControlled, onValueChange]
     );
-    const groupRef = React31__namespace.useRef(null);
+    const groupRef = React38__namespace.useRef(null);
     const mergedRef = useMergedRef3(ref, groupRef);
-    const onKeyDown = React31__namespace.useCallback(
+    const onKeyDown = React38__namespace.useCallback(
       (e) => {
         var _a, _b;
         if (disabled) return;
@@ -6684,7 +7668,7 @@ var RadioGroupComponent = React31__namespace.forwardRef(
       },
       [disabled, handleValueChange]
     );
-    const contextValue = React31__namespace.useMemo(
+    const contextValue = React38__namespace.useMemo(
       () => ({
         name,
         selectedValue,
@@ -6719,7 +7703,7 @@ var RadioGroupComponent = React31__namespace.forwardRef(
   }
 );
 RadioGroupComponent.displayName = "RadioGroup";
-var RadioGroup2 = React31__namespace.memo(RadioGroupComponent);
+var RadioGroup = React38__namespace.memo(RadioGroupComponent);
 function useSearchKeyboard({
   active,
   onActiveChange,
@@ -6728,14 +7712,14 @@ function useSearchKeyboard({
   itemCount,
   onSelectSuggestion
 }) {
-  const [activeIndex, setActiveIndex] = React31__namespace.useState(-1);
-  const resetKeyRef = React31__namespace.useRef(`${active}:${query}`);
+  const [activeIndex, setActiveIndex] = React38__namespace.useState(-1);
+  const resetKeyRef = React38__namespace.useRef(`${active}:${query}`);
   const currentKey = `${active}:${query}`;
   if (resetKeyRef.current !== currentKey) {
     resetKeyRef.current = currentKey;
     setActiveIndex(-1);
   }
-  const handleKeyDown = React31__namespace.useCallback(
+  const handleKeyDown = React38__namespace.useCallback(
     (e) => {
       if (!active) return;
       switch (e.key) {
@@ -6775,7 +7759,7 @@ function useSearchKeyboard({
       query
     ]
   );
-  const resetActiveIndex = React31__namespace.useCallback(() => {
+  const resetActiveIndex = React38__namespace.useCallback(() => {
     setActiveIndex(-1);
   }, []);
   return { activeIndex, handleKeyDown, resetActiveIndex };
@@ -6863,10 +7847,10 @@ function AnimatedPlaceholder({
   className
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const containerRef = React31__namespace.useRef(null);
-  const spanRef = React31__namespace.useRef(null);
-  const [xOffset, setXOffset] = React31__namespace.useState(0);
-  const recalculate = React31__namespace.useCallback(() => {
+  const containerRef = React38__namespace.useRef(null);
+  const spanRef = React38__namespace.useRef(null);
+  const [xOffset, setXOffset] = React38__namespace.useState(0);
+  const recalculate = React38__namespace.useCallback(() => {
     const container = containerRef.current;
     const span = spanRef.current;
     if (!container || !span || textAlign === "left") {
@@ -6881,10 +7865,10 @@ function AnimatedPlaceholder({
       setXOffset(Math.max(0, containerWidth - textWidth));
     }
   }, [textAlign]);
-  React31__namespace.useLayoutEffect(() => {
+  React38__namespace.useLayoutEffect(() => {
     recalculate();
   }, [recalculate]);
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(recalculate);
@@ -6953,10 +7937,10 @@ function SearchBar({
   activeIndex
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React31__namespace.useRef(null);
-  const prevActiveRef = React31__namespace.useRef(active);
-  const isRestoringFocusRef = React31__namespace.useRef(false);
-  React31__namespace.useEffect(() => {
+  const inputRef = React38__namespace.useRef(null);
+  const prevActiveRef = React38__namespace.useRef(active);
+  const isRestoringFocusRef = React38__namespace.useRef(false);
+  React38__namespace.useEffect(() => {
     var _a;
     let rafId;
     if (prevActiveRef.current === true && active === false) {
@@ -7075,7 +8059,7 @@ function SearchBar({
     ) })
   );
 }
-var SearchContext = React31__namespace.createContext(null);
+var SearchContext = React38__namespace.createContext(null);
 function SearchProvider({
   children,
   value
@@ -7083,15 +8067,15 @@ function SearchProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(SearchContext.Provider, { value, children });
 }
 function useSearch() {
-  const context = React31__namespace.useContext(SearchContext);
+  const context = React38__namespace.useContext(SearchContext);
   if (!context) {
     return { listboxId: "", activeIndex: -1 };
   }
   return context;
 }
 function useClickOutside(handler, enabled = true) {
-  const ref = React31.useRef(null);
-  React31.useEffect(() => {
+  const ref = React38.useRef(null);
+  React38.useEffect(() => {
     if (!enabled) return;
     const listener = (event) => {
       const el = ref.current;
@@ -7110,7 +8094,7 @@ function useClickOutside(handler, enabled = true) {
   return ref;
 }
 function useSearchViewFocus(inputRef, active) {
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     if (!active) return;
     let raf2;
     const raf1 = requestAnimationFrame(() => {
@@ -7184,7 +8168,7 @@ function SearchViewDocked({
   activeIndex
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React31__namespace.useRef(null);
+  const inputRef = React38__namespace.useRef(null);
   useSearchViewFocus(inputRef, active);
   const dropdownRef = useClickOutside(() => {
     onActiveChange(false);
@@ -7330,10 +8314,10 @@ function SearchViewFullScreen({
   activeIndex
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React31__namespace.useRef(null);
+  const inputRef = React38__namespace.useRef(null);
   useSearchViewFocus(inputRef, active);
-  const [mounted, setMounted] = React31__namespace.useState(false);
-  React31__namespace.useEffect(() => {
+  const [mounted, setMounted] = React38__namespace.useState(false);
+  React38__namespace.useEffect(() => {
     setMounted(true);
   }, []);
   const handleFormSubmit = (e) => {
@@ -7491,10 +8475,10 @@ function SearchComponent({
   className,
   viewClassName
 }) {
-  const generatedId = React31__namespace.useId();
+  const generatedId = React38__namespace.useId();
   const searchId = id != null ? id : generatedId;
   const listboxId = `${searchId}-listbox`;
-  const itemCount = React31__namespace.Children.count(children);
+  const itemCount = React38__namespace.Children.count(children);
   const { activeIndex, handleKeyDown } = useSearchKeyboard({
     active,
     onActiveChange,
@@ -7592,7 +8576,7 @@ function useSliderMath({
   max,
   step
 }) {
-  return React31.useMemo(
+  return React38.useMemo(
     () => ({
       coerce: (v) => coerceValue(v, min, max),
       snap: (v) => snapToStep(v, min, step),
@@ -7730,7 +8714,7 @@ var SLIDER_INDICATOR_TRANSITION = {
   stiffness: 450,
   damping: 32
 };
-var ValueIndicator = React31__namespace.memo(function ValueIndicator2({
+var ValueIndicator = React38__namespace.memo(function ValueIndicator2({
   value,
   visible,
   orientation,
@@ -7777,7 +8761,7 @@ var ValueIndicator = React31__namespace.memo(function ValueIndicator2({
     "value-indicator"
   ) });
 });
-var SliderThumb = React31__namespace.memo(function SliderThumb2({
+var SliderThumb = React38__namespace.memo(function SliderThumb2({
   value,
   percent,
   min,
@@ -7809,11 +8793,11 @@ var SliderThumb = React31__namespace.memo(function SliderThumb2({
     [posTarget]: `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`
   };
   const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-  const [isDragging, setIsDragging] = React31__namespace.useState(false);
-  const [isHovered, setIsHovered] = React31__namespace.useState(false);
-  const [isFocused, setIsFocused] = React31__namespace.useState(false);
-  const pointerIdRef = React31__namespace.useRef(null);
-  const thumbRef = React31__namespace.useRef(null);
+  const [isDragging, setIsDragging] = React38__namespace.useState(false);
+  const [isHovered, setIsHovered] = React38__namespace.useState(false);
+  const [isFocused, setIsFocused] = React38__namespace.useState(false);
+  const pointerIdRef = React38__namespace.useRef(null);
+  const thumbRef = React38__namespace.useRef(null);
   const showIndicator = showValueIndicator && (isDragging || isHovered || isFocused);
   const positionStyle = isHorizontal ? __spreadProps(__spreadValues({
     position: "absolute"
@@ -7828,7 +8812,7 @@ var SliderThumb = React31__namespace.memo(function SliderThumb2({
     transform: "translate(-50%, 50%)",
     zIndex
   });
-  const getDeltaFromPointer = React31__namespace.useCallback(
+  const getDeltaFromPointer = React38__namespace.useCallback(
     (e) => {
       const trackEl = trackRef.current;
       if (!trackEl) return percent;
@@ -7855,7 +8839,7 @@ var SliderThumb = React31__namespace.memo(function SliderThumb2({
     },
     [isHorizontal, max, min, percent, step, trackRef, trackSize]
   );
-  const handlePointerDown = React31__namespace.useCallback(
+  const handlePointerDown = React38__namespace.useCallback(
     (e) => {
       if (disabled) return;
       e.preventDefault();
@@ -7866,7 +8850,7 @@ var SliderThumb = React31__namespace.memo(function SliderThumb2({
     },
     [disabled]
   );
-  const handlePointerMove = React31__namespace.useCallback(
+  const handlePointerMove = React38__namespace.useCallback(
     (e) => {
       if (!isDragging || e.pointerId !== pointerIdRef.current) return;
       const newValue = getDeltaFromPointer(e.nativeEvent);
@@ -7874,7 +8858,7 @@ var SliderThumb = React31__namespace.memo(function SliderThumb2({
     },
     [isDragging, getDeltaFromPointer, onValueChange]
   );
-  const handlePointerUp = React31__namespace.useCallback(
+  const handlePointerUp = React38__namespace.useCallback(
     (e) => {
       if (e.pointerId !== pointerIdRef.current) return;
       e.currentTarget.releasePointerCapture(e.pointerId);
@@ -7884,7 +8868,7 @@ var SliderThumb = React31__namespace.memo(function SliderThumb2({
     },
     [onValueChangeEnd, value]
   );
-  const handleKeyDown = React31__namespace.useCallback(
+  const handleKeyDown = React38__namespace.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Home") {
@@ -7988,7 +8972,7 @@ var SliderThumb = React31__namespace.memo(function SliderThumb2({
     }
   );
 });
-var RangeTrack = React31__namespace.memo(function RangeTrack2({
+var RangeTrack = React38__namespace.memo(function RangeTrack2({
   startPercent,
   endPercent,
   trackSize,
@@ -8233,7 +9217,7 @@ var RangeTrack = React31__namespace.memo(function RangeTrack2({
     }
   );
 });
-var RangeSliderComponent = React31__namespace.forwardRef(
+var RangeSliderComponent = React38__namespace.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -8257,7 +9241,7 @@ var RangeSliderComponent = React31__namespace.forwardRef(
     const isHorizontal = orientation === "horizontal";
     const defaultStart = (_a = defaultValue == null ? void 0 : defaultValue[0]) != null ? _a : min;
     const defaultEnd = (_b = defaultValue == null ? void 0 : defaultValue[1]) != null ? _b : max;
-    const [internalValue, setInternalValue] = React31__namespace.useState([
+    const [internalValue, setInternalValue] = React38__namespace.useState([
       defaultStart,
       defaultEnd
     ]);
@@ -8271,10 +9255,10 @@ var RangeSliderComponent = React31__namespace.forwardRef(
     const endValue = snap(coerce(resolvedValue[1]));
     const startPercent = toPercent(startValue);
     const endPercent = toPercent(endValue);
-    const [topThumb, setTopThumb] = React31__namespace.useState("end");
-    const trackRef = React31__namespace.useRef(null);
+    const [topThumb, setTopThumb] = React38__namespace.useState("end");
+    const trackRef = React38__namespace.useRef(null);
     const minGap = step > 0 ? step : (max - min) / 1e3;
-    const handleStartChange = React31__namespace.useCallback(
+    const handleStartChange = React38__namespace.useCallback(
       (newStart) => {
         setTopThumb("start");
         const clamped = Math.min(newStart, endValue - minGap);
@@ -8286,7 +9270,7 @@ var RangeSliderComponent = React31__namespace.forwardRef(
       },
       [controlledValue, coerce, endValue, minGap, onValueChange, snap]
     );
-    const handleEndChange = React31__namespace.useCallback(
+    const handleEndChange = React38__namespace.useCallback(
       (newEnd) => {
         setTopThumb("end");
         const clamped = Math.max(newEnd, startValue + minGap);
@@ -8298,15 +9282,15 @@ var RangeSliderComponent = React31__namespace.forwardRef(
       },
       [controlledValue, coerce, minGap, onValueChange, snap, startValue]
     );
-    const handleStartChangeEnd = React31__namespace.useCallback(
+    const handleStartChangeEnd = React38__namespace.useCallback(
       (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([v, endValue]),
       [endValue, onValueChangeEnd]
     );
-    const handleEndChangeEnd = React31__namespace.useCallback(
+    const handleEndChangeEnd = React38__namespace.useCallback(
       (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([startValue, v]),
       [onValueChangeEnd, startValue]
     );
-    const handleTrackPointerDown = React31__namespace.useCallback(
+    const handleTrackPointerDown = React38__namespace.useCallback(
       (e) => {
         if (disabled) return;
         const trackEl = trackRef.current;
@@ -8350,7 +9334,7 @@ var RangeSliderComponent = React31__namespace.forwardRef(
         trackSize
       ]
     );
-    const id = React31__namespace.useId();
+    const id = React38__namespace.useId();
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -8430,7 +9414,7 @@ var RangeSliderComponent = React31__namespace.forwardRef(
   }
 );
 RangeSliderComponent.displayName = "RangeSlider";
-var RangeSlider = React31__namespace.memo(RangeSliderComponent);
+var RangeSlider = React38__namespace.memo(RangeSliderComponent);
 function getHorizontalRadius(isLeading, innerR, outerR) {
   if (isLeading) {
     return {
@@ -8469,7 +9453,7 @@ var allInnerRadius = (innerR) => ({
   borderTopRightRadius: innerR,
   borderBottomRightRadius: innerR
 });
-var InsetIcon = React31__namespace.memo(function InsetIcon2({
+var InsetIcon = React38__namespace.memo(function InsetIcon2({
   icon,
   isOnActiveSegment,
   position,
@@ -8563,7 +9547,7 @@ function Ticks({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style, "aria-hidden": "true" }, tick);
   }) });
 }
-var SliderTrack = React31__namespace.memo(function SliderTrack2({
+var SliderTrack = React38__namespace.memo(function SliderTrack2({
   percent,
   trackSize,
   orientation,
@@ -8598,8 +9582,8 @@ var SliderTrack = React31__namespace.memo(function SliderTrack2({
   const gapWithThumbStr = `${thumbGap + thumbHalfWidth}px`;
   const hasAnyInsetIcon = Boolean(insetIcon || insetIconTrailing);
   const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-  const [trackWidth, setTrackWidth] = React31__namespace.useState(0);
-  React31__namespace.useLayoutEffect(() => {
+  const [trackWidth, setTrackWidth] = React38__namespace.useState(0);
+  React38__namespace.useLayoutEffect(() => {
     const el = trackRef.current;
     if (!el || !hasAnyInsetIcon) return;
     setTrackWidth(isHorizontal ? el.clientWidth : el.clientHeight);
@@ -8616,8 +9600,8 @@ var SliderTrack = React31__namespace.memo(function SliderTrack2({
   const iconTotalWidth = activeIconSize + SliderTokens.insetIconPadding * 2 + thumbGap + thumbHalfWidth;
   const iconThreshold = trackWidth > 0 ? iconTotalWidth / trackWidth : 0.15;
   const HYSTERESIS_GAP = 0.04;
-  const trailingActiveRef = React31__namespace.useRef(1 - percent <= iconThreshold);
-  const leadingActiveRef = React31__namespace.useRef(percent > iconThreshold);
+  const trailingActiveRef = React38__namespace.useRef(1 - percent <= iconThreshold);
+  const leadingActiveRef = React38__namespace.useRef(percent > iconThreshold);
   const trailingPercent = 1 - percent;
   if (trailingActiveRef.current) {
     if (trailingPercent > iconThreshold + HYSTERESIS_GAP) {
@@ -9124,7 +10108,7 @@ var SliderTrack = React31__namespace.memo(function SliderTrack2({
     }
   );
 });
-var SliderComponent = React31__namespace.forwardRef(
+var SliderComponent = React38__namespace.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -9153,7 +10137,7 @@ var SliderComponent = React31__namespace.forwardRef(
     const isHorizontal = orientation === "horizontal";
     const midpoint = min + (max - min) / 2;
     const initialValue = defaultValue != null ? defaultValue : midpoint;
-    const [internalValue, setInternalValue] = React31__namespace.useState(initialValue);
+    const [internalValue, setInternalValue] = React38__namespace.useState(initialValue);
     const resolvedValue = controlledValue !== void 0 ? controlledValue : internalValue;
     const { coerce, snap, toPercent, ticks } = useSliderMath({
       min,
@@ -9162,8 +10146,8 @@ var SliderComponent = React31__namespace.forwardRef(
     });
     const safeValue = snap(coerce(resolvedValue));
     const percent = toPercent(safeValue);
-    const trackRef = React31__namespace.useRef(null);
-    const handleValueChange = React31__namespace.useCallback(
+    const trackRef = React38__namespace.useRef(null);
+    const handleValueChange = React38__namespace.useCallback(
       (newValue) => {
         const clamped = snap(coerce(newValue));
         if (controlledValue === void 0) {
@@ -9173,13 +10157,13 @@ var SliderComponent = React31__namespace.forwardRef(
       },
       [coerce, controlledValue, onValueChange, snap]
     );
-    const handleValueChangeEnd = React31__namespace.useCallback(
+    const handleValueChangeEnd = React38__namespace.useCallback(
       (newValue) => {
         onValueChangeEnd == null ? void 0 : onValueChangeEnd(snap(coerce(newValue)));
       },
       [coerce, onValueChangeEnd, snap]
     );
-    const handleTrackPointerDown = React31__namespace.useCallback(
+    const handleTrackPointerDown = React38__namespace.useCallback(
       (e) => {
         if (disabled) return;
         const trackEl = trackRef.current;
@@ -9214,7 +10198,7 @@ var SliderComponent = React31__namespace.forwardRef(
         trackSize
       ]
     );
-    const id = React31__namespace.useId();
+    const id = React38__namespace.useId();
     const thumbId = `slider-thumb-${id}`;
     const supportsInsetIcon = !isCentered && SliderTokens.trackSizes[trackSize] >= 40;
     const hasAnyInsetIcon = !!(insetIcon || insetIconTrailing);
@@ -9286,7 +10270,7 @@ var SliderComponent = React31__namespace.forwardRef(
   }
 );
 SliderComponent.displayName = "Slider";
-var Slider = React31__namespace.memo(SliderComponent);
+var Slider = React38__namespace.memo(SliderComponent);
 var DURATION_MAP = {
   short: 4e3,
   long: 7e3
@@ -9332,9 +10316,9 @@ function toSnackbarData(item) {
   return { id: generateId(), visuals: item.visuals, resolve: item.resolve };
 }
 function useSnackbarState() {
-  const [current, setCurrent] = React31__namespace.useState(null);
-  const queueRef = React31__namespace.useRef([]);
-  const showSnackbar = React31__namespace.useCallback(
+  const [current, setCurrent] = React38__namespace.useState(null);
+  const queueRef = React38__namespace.useRef([]);
+  const showSnackbar = React38__namespace.useCallback(
     (visuals) => {
       return new Promise((resolve) => {
         const item = { visuals, resolve };
@@ -9347,14 +10331,14 @@ function useSnackbarState() {
     },
     []
   );
-  const _dismiss = React31__namespace.useCallback((result) => {
+  const _dismiss = React38__namespace.useCallback((result) => {
     setCurrent((prev) => {
       if (prev) prev.resolve(result);
       const next = queueRef.current.shift();
       return next ? toSnackbarData(next) : null;
     });
   }, []);
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     return () => {
       for (const item of queueRef.current) {
         item.resolve(RESULT.DISMISSED);
@@ -9364,7 +10348,7 @@ function useSnackbarState() {
   }, []);
   return { current, showSnackbar, _dismiss };
 }
-var Snackbar = React31__namespace.memo(function Snackbar2({
+var Snackbar = React38__namespace.memo(function Snackbar2({
   data,
   className
 }) {
@@ -9378,15 +10362,15 @@ var Snackbar = React31__namespace.memo(function Snackbar2({
   } = visuals;
   const reducedMotion = react.useReducedMotion();
   const durationMs = resolveDuration(duration);
-  React31__namespace.useEffect(() => {
+  React38__namespace.useEffect(() => {
     const timer = setTimeout(() => resolve(RESULT.DISMISSED), durationMs);
     return () => clearTimeout(timer);
   }, [resolve, durationMs]);
-  const handleAction = React31__namespace.useCallback(
+  const handleAction = React38__namespace.useCallback(
     () => resolve(RESULT.ACTION),
     [resolve]
   );
-  const handleDismiss = React31__namespace.useCallback(
+  const handleDismiss = React38__namespace.useCallback(
     () => resolve(RESULT.DISMISSED),
     [resolve]
   );
@@ -9454,7 +10438,7 @@ var Snackbar = React31__namespace.memo(function Snackbar2({
 Snackbar.displayName = "Snackbar";
 function SnackbarHost({ state, className }) {
   const { current, _dismiss } = state;
-  const wrappedData = React31__namespace.useMemo(() => {
+  const wrappedData = React38__namespace.useMemo(() => {
     if (!current) return null;
     return __spreadProps(__spreadValues({}, current), { resolve: _dismiss });
   }, [current, _dismiss]);
@@ -9472,12 +10456,12 @@ function SnackbarHost({ state, className }) {
   ) });
 }
 SnackbarHost.displayName = "SnackbarHost";
-var SnackbarContext = React31__namespace.createContext(
+var SnackbarContext = React38__namespace.createContext(
   null
 );
 function SnackbarProvider({ children }) {
   const state = useSnackbarState();
-  const contextValue = React31__namespace.useMemo(
+  const contextValue = React38__namespace.useMemo(
     () => ({ showSnackbar: state.showSnackbar }),
     [state.showSnackbar]
   );
@@ -9488,7 +10472,7 @@ function SnackbarProvider({ children }) {
 }
 SnackbarProvider.displayName = "SnackbarProvider";
 function useSnackbar() {
-  const ctx = React31__namespace.useContext(SnackbarContext);
+  const ctx = React38__namespace.useContext(SnackbarContext);
   if (!ctx) {
     throw new Error("useSnackbar must be used within a <SnackbarProvider>.");
   }
@@ -9551,7 +10535,7 @@ var SwitchColors = {
   // Focus indicator
   focusIndicator: "var(--md-sys-color-secondary)"
 };
-var FAST_SPATIAL_SPRING = {
+var FAST_SPATIAL_SPRING2 = {
   type: "spring",
   stiffness: 500,
   damping: 40
@@ -9592,7 +10576,7 @@ function isIconVisible(thumbContent, icons, showOnlySelectedIcon, checked) {
   if (icons) return true;
   return showOnlySelectedIcon && checked;
 }
-var SwitchVisual = React31__namespace.memo(function SwitchVisual2({
+var SwitchVisual = React38__namespace.memo(function SwitchVisual2({
   checked,
   disabled,
   isPressed,
@@ -9683,9 +10667,9 @@ var SwitchVisual = React31__namespace.memo(function SwitchVisual2({
               backgroundColor: thumbBg
             },
             transition: prefersReduced ? { duration: 0 } : isPressed ? SNAP_TRANSITION : {
-              x: FAST_SPATIAL_SPRING,
-              width: FAST_SPATIAL_SPRING,
-              height: FAST_SPATIAL_SPRING,
+              x: FAST_SPATIAL_SPRING2,
+              width: FAST_SPATIAL_SPRING2,
+              height: FAST_SPATIAL_SPRING2,
               backgroundColor: colorTransition
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: showIcon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9712,7 +10696,7 @@ var SwitchVisual = React31__namespace.memo(function SwitchVisual2({
     }
   );
 });
-var SwitchComponent = React31__namespace.forwardRef(
+var SwitchComponent = React38__namespace.forwardRef(
   ({
     checked,
     onCheckedChange,
@@ -9730,16 +10714,16 @@ var SwitchComponent = React31__namespace.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-    const [isPressed, setIsPressed] = React31__namespace.useState(false);
-    const [isHovered, setIsHovered] = React31__namespace.useState(false);
-    const [isFocused, setIsFocused] = React31__namespace.useState(false);
-    const [ripples, setRipples] = React31__namespace.useState([]);
-    const generatedId = React31__namespace.useId();
+    const [isPressed, setIsPressed] = React38__namespace.useState(false);
+    const [isHovered, setIsHovered] = React38__namespace.useState(false);
+    const [isFocused, setIsFocused] = React38__namespace.useState(false);
+    const [ripples, setRipples] = React38__namespace.useState([]);
+    const generatedId = React38__namespace.useId();
     const switchId = label ? `switch-${generatedId}` : void 0;
-    const handleClick = React31__namespace.useCallback(() => {
+    const handleClick = React38__namespace.useCallback(() => {
       if (!disabled) onCheckedChange(!checked);
     }, [disabled, checked, onCheckedChange]);
-    const handleKeyDown = React31__namespace.useCallback(
+    const handleKeyDown = React38__namespace.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === " " || e.key === "Enter") {
@@ -9749,7 +10733,7 @@ var SwitchComponent = React31__namespace.forwardRef(
       },
       [disabled, checked, onCheckedChange]
     );
-    const handlePointerDown = React31__namespace.useCallback(
+    const handlePointerDown = React38__namespace.useCallback(
       (e) => {
         if (disabled) return;
         setIsPressed(true);
@@ -9764,19 +10748,19 @@ var SwitchComponent = React31__namespace.forwardRef(
       },
       [disabled]
     );
-    const handlePointerUp = React31__namespace.useCallback(() => {
+    const handlePointerUp = React38__namespace.useCallback(() => {
       setIsPressed(false);
     }, []);
-    const handlePointerEnter = React31__namespace.useCallback(() => {
+    const handlePointerEnter = React38__namespace.useCallback(() => {
       if (!disabled) setIsHovered(true);
     }, [disabled]);
-    const handlePointerLeave = React31__namespace.useCallback(() => {
+    const handlePointerLeave = React38__namespace.useCallback(() => {
       setIsHovered(false);
       setIsPressed(false);
     }, []);
-    const handleFocus = React31__namespace.useCallback(() => setIsFocused(true), []);
-    const handleBlur = React31__namespace.useCallback(() => setIsFocused(false), []);
-    const removeRipple = React31__namespace.useCallback(
+    const handleFocus = React38__namespace.useCallback(() => setIsFocused(true), []);
+    const handleBlur = React38__namespace.useCallback(() => setIsFocused(false), []);
+    const removeRipple = React38__namespace.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
@@ -9861,10 +10845,54 @@ var SwitchComponent = React31__namespace.forwardRef(
   }
 );
 SwitchComponent.displayName = "Switch";
-var Switch = React31__namespace.memo(SwitchComponent);
-var TabsContext = React31__namespace.createContext(null);
+var Switch = React38__namespace.memo(SwitchComponent);
+var typographyVariants = classVarianceAuthority.cva("m-0 p-0 text-m3-on-surface", {
+  variants: {
+    variant: {
+      "display-lg": "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
+      "display-md": "text-[45px] leading-[52px] font-normal tracking-[0px]",
+      "display-sm": "text-[36px] leading-[44px] font-normal tracking-[0px]",
+      "headline-lg": "text-[32px] leading-[40px] font-normal tracking-[0px]",
+      "headline-md": "text-[28px] leading-[36px] font-normal tracking-[0px]",
+      "headline-sm": "text-[24px] leading-[32px] font-normal tracking-[0px]",
+      "title-lg": "text-[22px] leading-[28px] font-normal tracking-[0px]",
+      "title-md": "text-[16px] leading-[24px] font-medium tracking-[0.15px]",
+      "title-sm": "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
+      "label-lg": "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
+      "label-md": "text-[12px] leading-[16px] font-medium tracking-[0.5px]",
+      "label-sm": "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
+      "body-lg": "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
+      "body-md": "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
+      "body-sm": "text-[12px] leading-[16px] font-normal tracking-[0.4px]"
+    }
+  },
+  defaultVariants: {
+    variant: "body-md"
+  }
+});
+var Text = React38__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, as: Component } = _b, props = __objRest(_b, ["className", "variant", "as"]);
+    const defaultComponent = React38__namespace.useMemo(() => {
+      if ((variant == null ? void 0 : variant.startsWith("display")) || (variant == null ? void 0 : variant.startsWith("headline")))
+        return "h1";
+      if (variant == null ? void 0 : variant.startsWith("title")) return "h2";
+      return "p";
+    }, [variant]);
+    const Tag = Component || defaultComponent;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Tag,
+      __spreadValues({
+        ref,
+        className: cn(typographyVariants({ variant, className }))
+      }, props)
+    );
+  }
+);
+Text.displayName = "Text";
+var TabsContext = React38__namespace.createContext(null);
 function useTabsContext() {
-  const ctx = React31__namespace.useContext(TabsContext);
+  const ctx = React38__namespace.useContext(TabsContext);
   if (!ctx) {
     throw new Error(
       "[MD3 Tabs] Component must be used within a <Tabs> root. Ensure <TabsList>, <Tab>, and <TabsContent> are descendants of <Tabs>."
@@ -9872,7 +10900,7 @@ function useTabsContext() {
   }
   return ctx;
 }
-var TabsComponent = React31__namespace.forwardRef(
+var TabsComponent = React38__namespace.forwardRef(
   ({
     value: controlledValue,
     defaultValue = "",
@@ -9881,35 +10909,35 @@ var TabsComponent = React31__namespace.forwardRef(
     children,
     className
   }, ref) => {
-    const [internalValue, setInternalValue] = React31__namespace.useState(defaultValue);
+    const [internalValue, setInternalValue] = React38__namespace.useState(defaultValue);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const handleValueChange = React31__namespace.useCallback(
+    const handleValueChange = React38__namespace.useCallback(
       (newValue) => {
         if (!isControlled) setInternalValue(newValue);
         onValueChange == null ? void 0 : onValueChange(newValue);
       },
       [isControlled, onValueChange]
     );
-    const [focusedValue, setFocusedValue] = React31__namespace.useState(value);
-    React31__namespace.useEffect(() => {
+    const [focusedValue, setFocusedValue] = React38__namespace.useState(value);
+    React38__namespace.useEffect(() => {
       setFocusedValue(value);
     }, [value]);
-    const [tabValues, setTabValues] = React31__namespace.useState([]);
-    const registerTab = React31__namespace.useCallback((tabValue) => {
+    const [tabValues, setTabValues] = React38__namespace.useState([]);
+    const registerTab = React38__namespace.useCallback((tabValue) => {
       setTabValues((prev) => {
         if (prev.includes(tabValue)) return prev;
         return [...prev, tabValue];
       });
     }, []);
-    const unregisterTab = React31__namespace.useCallback((tabValue) => {
+    const unregisterTab = React38__namespace.useCallback((tabValue) => {
       setTabValues((prev) => prev.filter((v) => v !== tabValue));
     }, []);
-    const hasAutoSelected = React31__namespace.useRef(false);
-    const [disabledValues, setDisabledValues] = React31__namespace.useState(
+    const hasAutoSelected = React38__namespace.useRef(false);
+    const [disabledValues, setDisabledValues] = React38__namespace.useState(
       /* @__PURE__ */ new Set()
     );
-    const markTabDisabled = React31__namespace.useCallback(
+    const markTabDisabled = React38__namespace.useCallback(
       (tabValue, disabled) => {
         setDisabledValues((prev) => {
           const next = new Set(prev);
@@ -9923,7 +10951,7 @@ var TabsComponent = React31__namespace.forwardRef(
       },
       []
     );
-    React31__namespace.useEffect(() => {
+    React38__namespace.useEffect(() => {
       if (isControlled || hasAutoSelected.current || tabValues.length === 0) {
         return;
       }
@@ -9938,9 +10966,9 @@ var TabsComponent = React31__namespace.forwardRef(
         setFocusedValue(firstEnabled);
       }
     }, [tabValues, disabledValues, isControlled, value]);
-    const id = React31__namespace.useId();
+    const id = React38__namespace.useId();
     const layoutGroupId = `tabs-${id}`;
-    const contextValue = React31__namespace.useMemo(
+    const contextValue = React38__namespace.useMemo(
       () => ({
         value,
         onValueChange: handleValueChange,
@@ -9971,12 +10999,12 @@ var TabsComponent = React31__namespace.forwardRef(
   }
 );
 TabsComponent.displayName = "Tabs";
-var Tabs = React31__namespace.memo(TabsComponent);
-var TabsListContext = React31__namespace.createContext(
+var Tabs = React38__namespace.memo(TabsComponent);
+var TabsListContext = React38__namespace.createContext(
   null
 );
 function useTabsListContext() {
-  const ctx = React31__namespace.useContext(TabsListContext);
+  const ctx = React38__namespace.useContext(TabsListContext);
   return ctx != null ? ctx : { variant: "primary", scrollable: false };
 }
 
@@ -10060,7 +11088,7 @@ var TABS_CONTENT_TRANSITION = {
   ease: "easeInOut"
 };
 var INDICATOR_MIN_WIDTH = 24;
-var TabComponent = React31__namespace.forwardRef(
+var TabComponent = React38__namespace.forwardRef(
   ({
     value,
     icon,
@@ -10090,9 +11118,9 @@ var TabComponent = React31__namespace.forwardRef(
     const isFocused = focusedValue === value;
     const hasIcon = icon != null;
     const isStackedIcon = hasIcon && !inlineIcon;
-    const buttonRef = React31__namespace.useRef(null);
-    const isFirstMount = React31__namespace.useRef(true);
-    const mergedRef = React31__namespace.useCallback(
+    const buttonRef = React38__namespace.useRef(null);
+    const isFirstMount = React38__namespace.useRef(true);
+    const mergedRef = React38__namespace.useCallback(
       (node) => {
         buttonRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -10100,15 +11128,15 @@ var TabComponent = React31__namespace.forwardRef(
       },
       [ref]
     );
-    React31__namespace.useEffect(() => {
+    React38__namespace.useEffect(() => {
       registerTab(value);
       return () => unregisterTab(value);
     }, [value, registerTab, unregisterTab]);
-    React31__namespace.useEffect(() => {
+    React38__namespace.useEffect(() => {
       markTabDisabled(value, disabled);
       return () => markTabDisabled(value, false);
     }, [value, disabled, markTabDisabled]);
-    const handleKeyDown = React31__namespace.useCallback(
+    const handleKeyDown = React38__namespace.useCallback(
       (e) => {
         const isRtl = buttonRef.current ? getComputedStyle(buttonRef.current).direction === "rtl" : false;
         const enabledValues = tabValues.filter((v) => !disabledValues.has(v));
@@ -10162,7 +11190,7 @@ var TabComponent = React31__namespace.forwardRef(
         autoActivate
       ]
     );
-    React31__namespace.useEffect(() => {
+    React38__namespace.useEffect(() => {
       if (isFirstMount.current) {
         isFirstMount.current = false;
         return;
@@ -10171,7 +11199,7 @@ var TabComponent = React31__namespace.forwardRef(
         buttonRef.current.focus({ preventScroll: true });
       }
     }, [isFocused]);
-    React31__namespace.useEffect(() => {
+    React38__namespace.useEffect(() => {
       if (!isActive || !scrollable || !buttonRef.current) return;
       const btn = buttonRef.current;
       let container = btn.parentElement;
@@ -10308,8 +11336,8 @@ var TabComponent = React31__namespace.forwardRef(
   }
 );
 TabComponent.displayName = "Tab";
-var Tab = React31__namespace.memo(TabComponent);
-var TabsContentComponent = React31__namespace.forwardRef(
+var Tab = React38__namespace.memo(TabComponent);
+var TabsContentComponent = React38__namespace.forwardRef(
   ({ value, className, children }, ref) => {
     var _a;
     const { value: selectedValue, layoutGroupId } = useTabsContext();
@@ -10343,8 +11371,8 @@ var TabsContentComponent = React31__namespace.forwardRef(
   }
 );
 TabsContentComponent.displayName = "TabsContent";
-var TabsContent = React31__namespace.memo(TabsContentComponent);
-var TabsListComponent = React31__namespace.forwardRef(
+var TabsContent = React38__namespace.memo(TabsContentComponent);
+var TabsListComponent = React38__namespace.forwardRef(
   ({
     variant,
     scrollable = false,
@@ -10355,12 +11383,12 @@ var TabsListComponent = React31__namespace.forwardRef(
   }, ref) => {
     const { layoutGroupId, value, setFocusedValue } = useTabsContext();
     const listLayoutId = `${layoutGroupId}-list`;
-    const listContextValue = React31__namespace.useMemo(
+    const listContextValue = React38__namespace.useMemo(
       () => ({ variant, scrollable }),
       [variant, scrollable]
     );
     const bgColor = backgroundColor != null ? backgroundColor : "var(--md-sys-color-surface)";
-    const handleBlur = React31__namespace.useCallback(
+    const handleBlur = React38__namespace.useCallback(
       (e) => {
         const listEl = e.currentTarget;
         if (listEl.contains(e.relatedTarget)) return;
@@ -10409,7 +11437,7 @@ var TabsListComponent = React31__namespace.forwardRef(
   }
 );
 TabsListComponent.displayName = "TabsList";
-var TabsList = React31__namespace.memo(TabsListComponent);
+var TabsList = React38__namespace.memo(TabsListComponent);
 
 // src/ui/text-field/text-field.tokens.ts
 var TF_COLORS = {
@@ -10448,7 +11476,7 @@ var TF_TYPOGRAPHY = {
 var TF_CLASSES = {
   // Prefix / Suffix
   prefixSuffix: "text-base text-[var(--color-m3-on-surface-variant)] select-none shrink-0"};
-var ActiveIndicator = React31__namespace.memo(function ActiveIndicator2({
+var ActiveIndicator = React38__namespace.memo(function ActiveIndicator2({
   isFocused,
   isError,
   isDisabled,
@@ -10495,7 +11523,7 @@ function getLabelColor(isFloated, isFocused, isError, isDisabled) {
   if (isFloated && isFocused) return TF_COLORS.primary;
   return TF_COLORS.onSurfaceVariant;
 }
-var FloatingLabel = React31__namespace.memo(function FloatingLabel2({
+var FloatingLabel = React38__namespace.memo(function FloatingLabel2({
   text,
   isFloated,
   isFocused,
@@ -10555,7 +11583,7 @@ var FloatingLabel = React31__namespace.memo(function FloatingLabel2({
   );
 });
 FloatingLabel.displayName = "FloatingLabel";
-var LeadingIcon = React31__namespace.memo(function LeadingIcon2({
+var LeadingIcon = React38__namespace.memo(function LeadingIcon2({
   children,
   isError,
   isDisabled
@@ -10579,7 +11607,7 @@ function getOutlineColor(isFocused, isError, isHovered, isDisabled) {
   if (isHovered) return TF_COLORS.inputText;
   return TF_COLORS.outline;
 }
-var OutlineContainer = React31__namespace.memo(function OutlineContainer2({
+var OutlineContainer = React38__namespace.memo(function OutlineContainer2({
   isFloated,
   isFocused,
   isError,
@@ -10677,7 +11705,7 @@ var OutlineContainer = React31__namespace.memo(function OutlineContainer2({
   );
 });
 OutlineContainer.displayName = "OutlineContainer";
-var PrefixSuffix = React31__namespace.memo(function PrefixSuffix2({
+var PrefixSuffix = React38__namespace.memo(function PrefixSuffix2({
   text,
   type,
   visible,
@@ -10719,7 +11747,7 @@ function AnimatedText({
     motionKey
   );
 }
-var SupportingText = React31__namespace.memo(function SupportingText2({
+var SupportingText = React38__namespace.memo(function SupportingText2({
   supportingText,
   errorText,
   isError,
@@ -10830,7 +11858,7 @@ function ClearIcon() {
     }
   );
 }
-var TrailingIcon = React31__namespace.memo(function TrailingIcon2({
+var TrailingIcon = React38__namespace.memo(function TrailingIcon2({
   mode,
   children,
   value,
@@ -10896,7 +11924,7 @@ var TrailingIcon = React31__namespace.memo(function TrailingIcon2({
 });
 TrailingIcon.displayName = "TrailingIcon";
 var LINE_HEIGHT_PX = 24;
-var TextFieldComponent = React31__namespace.forwardRef(
+var TextFieldComponent = React38__namespace.forwardRef(
   ({
     // Core
     variant = "filled",
@@ -10960,30 +11988,30 @@ var TextFieldComponent = React31__namespace.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-    const generatedId = React31__namespace.useId();
+    const generatedId = React38__namespace.useId();
     const inputId = idProp != null ? idProp : `tf-${generatedId}`;
     const supportingId = `${inputId}-supporting`;
     const isControlled = valueProp !== void 0;
-    const [internalValue, setInternalValue] = React31__namespace.useState(defaultValue);
+    const [internalValue, setInternalValue] = React38__namespace.useState(defaultValue);
     const currentValue = isControlled ? valueProp : internalValue;
-    const [isFocused, setIsFocused] = React31__namespace.useState(false);
-    const [showPassword, setShowPassword] = React31__namespace.useState(false);
+    const [isFocused, setIsFocused] = React38__namespace.useState(false);
+    const [showPassword, setShowPassword] = React38__namespace.useState(false);
     const resolvedInputType = type === "password" && showPassword ? "text" : type;
-    const [nativeError, setNativeError] = React31__namespace.useState("");
-    const [labelWidth, setLabelWidth] = React31__namespace.useState(0);
+    const [nativeError, setNativeError] = React38__namespace.useState("");
+    const [labelWidth, setLabelWidth] = React38__namespace.useState(0);
     const hasValue = currentValue.length > 0;
     const isFloated = isFocused || hasValue;
     const isError = errorProp || !!nativeError || maxLength !== void 0 && currentValue.length > maxLength;
     const containerHeight = dense ? TF_SIZE.denseHeight : TF_SIZE.height;
     const showAsterisk = required && !noAsterisk;
-    const inputRef = React31__namespace.useRef(null);
-    const labelSpanRef = React31__namespace.useRef(null);
-    React31__namespace.useLayoutEffect(() => {
+    const inputRef = React38__namespace.useRef(null);
+    const labelSpanRef = React38__namespace.useRef(null);
+    React38__namespace.useLayoutEffect(() => {
       if (labelSpanRef.current) {
         setLabelWidth(labelSpanRef.current.offsetWidth);
       }
     }, []);
-    React31__namespace.useLayoutEffect(() => {
+    React38__namespace.useLayoutEffect(() => {
       if (type !== "textarea" || !inputRef.current) return;
       const textarea = inputRef.current;
       if (autoResize) {
@@ -10995,7 +12023,7 @@ var TextFieldComponent = React31__namespace.forwardRef(
       }
       textarea.style.overflowY = "hidden";
     }, [type, autoResize, maxRows, currentValue]);
-    const handleValueChange = React31__namespace.useCallback(
+    const handleValueChange = React38__namespace.useCallback(
       (newValue) => {
         var _a2, _b;
         if (!isControlled) setInternalValue(newValue);
@@ -11004,7 +12032,7 @@ var TextFieldComponent = React31__namespace.forwardRef(
       },
       [isControlled]
     );
-    const handleChange = React31__namespace.useCallback(
+    const handleChange = React38__namespace.useCallback(
       (e) => {
         const newVal = e.target.value;
         handleValueChange(newVal);
@@ -11012,14 +12040,14 @@ var TextFieldComponent = React31__namespace.forwardRef(
       },
       [handleValueChange, onChange]
     );
-    const handleFocus = React31__namespace.useCallback(
+    const handleFocus = React38__namespace.useCallback(
       (e) => {
         setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [onFocus]
     );
-    const handleBlur = React31__namespace.useCallback(
+    const handleBlur = React38__namespace.useCallback(
       (e) => {
         setIsFocused(false);
         const el = inputRef.current;
@@ -11032,7 +12060,7 @@ var TextFieldComponent = React31__namespace.forwardRef(
       },
       [onBlur]
     );
-    const handleClear = React31__namespace.useCallback(() => {
+    const handleClear = React38__namespace.useCallback(() => {
       var _a2;
       handleValueChange("");
       onChange == null ? void 0 : onChange("", {
@@ -11040,12 +12068,12 @@ var TextFieldComponent = React31__namespace.forwardRef(
       });
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, [handleValueChange, onChange]);
-    const handlePasswordToggle = React31__namespace.useCallback(() => {
+    const handlePasswordToggle = React38__namespace.useCallback(() => {
       var _a2;
       setShowPassword((prev) => !prev);
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, []);
-    React31__namespace.useImperativeHandle(
+    React38__namespace.useImperativeHandle(
       ref,
       () => ({
         focus: () => {
@@ -11290,7 +12318,7 @@ var TextFieldComponent = React31__namespace.forwardRef(
   }
 );
 TextFieldComponent.displayName = "TextField";
-var TextField = React31__namespace.memo(TextFieldComponent);
+var TextField = React38__namespace.memo(TextFieldComponent);
 
 // src/ui/typography/typography-key-tokens.ts
 var TypographyKeyTokens = /* @__PURE__ */ ((TypographyKeyTokens2) => {
@@ -12005,9 +13033,9 @@ var TOKEN_TO_PROP = {
 };
 var defaultTokens = new TypographyTokens();
 var defaultTypography = new Typography();
-var TypographyContext = React31.createContext(defaultTypography);
+var TypographyContext = React38.createContext(defaultTypography);
 function useTypography() {
-  return React31.useContext(TypographyContext);
+  return React38.useContext(TypographyContext);
 }
 function TypographyProvider({
   children,
@@ -12015,7 +13043,7 @@ function TypographyProvider({
   fontFamily,
   fontVariationAxes
 }) {
-  const value = React31.useMemo(() => {
+  const value = React38.useMemo(() => {
     if (typography) return typography;
     if (fontFamily || fontVariationAxes) {
       return new Typography(
@@ -12026,7 +13054,7 @@ function TypographyProvider({
   }, [typography, fontFamily, fontVariationAxes]);
   return /* @__PURE__ */ jsxRuntime.jsx(TypographyContext.Provider, { value, children });
 }
-var ThemeContext = React31.createContext(void 0);
+var ThemeContext = React38.createContext(void 0);
 var STORAGE_KEY_COLOR = "md3-source-color";
 var STORAGE_KEY_MODE = "md3-theme-mode";
 var defaultTokens2 = new TypographyTokens();
@@ -12041,20 +13069,21 @@ function MD3ThemeProvider({
   fontVariationAxes,
   enableSnackbar = false
 }) {
-  const [sourceColor, setSourceColor] = React31.useState(initialSourceColor);
-  const [mode, setMode] = React31.useState(defaultMode);
-  const [isHydrated, setIsHydrated] = React31.useState(!persistToLocalStorage);
-  React31.useEffect(() => {
+  const [sourceColor, setSourceColor] = React38.useState(initialSourceColor);
+  const [mode, setMode] = React38.useState(defaultMode);
+  const [isHydrated, setIsHydrated] = React38.useState(!persistToLocalStorage);
+  React38.useEffect(() => {
     if (!persistToLocalStorage) return;
     const savedColor = localStorage.getItem(STORAGE_KEY_COLOR);
     const savedMode = localStorage.getItem(
       STORAGE_KEY_MODE
     );
     if (savedColor) setSourceColor(savedColor);
-    if (savedMode === "light" || savedMode === "dark") setMode(savedMode);
+    if (savedMode === "light" || savedMode === "dark" || savedMode === "system")
+      setMode(savedMode);
     setIsHydrated(true);
   }, [persistToLocalStorage]);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     if (!isHydrated) return;
     applyTheme(sourceColor, mode);
     if (persistToLocalStorage) {
@@ -12062,11 +13091,19 @@ function MD3ThemeProvider({
       localStorage.setItem(STORAGE_KEY_MODE, mode);
     }
   }, [sourceColor, mode, persistToLocalStorage, isHydrated]);
-  const themeValue = React31.useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode }),
-    [sourceColor, mode]
+  React38.useEffect(() => {
+    if (mode !== "system" || typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => applyTheme(sourceColor, "system");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [mode, sourceColor]);
+  const effectiveMode = resolveMode(mode);
+  const themeValue = React38.useMemo(
+    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
+    [sourceColor, mode, effectiveMode]
   );
-  const typographyValue = React31.useMemo(() => {
+  const typographyValue = React38.useMemo(() => {
     if (typographyProp) return typographyProp;
     if (fontFamily != null ? fontFamily : fontVariationAxes) {
       return new Typography(
@@ -12079,7 +13116,7 @@ function MD3ThemeProvider({
 }
 function SnackbarMountedProvider({ children }) {
   const state = useSnackbarState();
-  const contextValue = React31.useMemo(
+  const contextValue = React38.useMemo(
     () => ({ showSnackbar: state.showSnackbar }),
     [state.showSnackbar]
   );
@@ -12089,24 +13126,24 @@ function SnackbarMountedProvider({ children }) {
   ] });
 }
 function useTheme() {
-  const context = React31.useContext(ThemeContext);
+  const context = React38.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within <MD3ThemeProvider>.");
   }
   return context;
 }
 function useThemeMode() {
-  const { mode, setMode } = useTheme();
-  return { mode, setMode };
+  const { mode, setMode, effectiveMode } = useTheme();
+  return { mode, setMode, effectiveMode };
 }
 function TableOfContents({
   items,
   className,
   scrollAreaProps
 }) {
-  const [activeId, setActiveId] = React31.useState("");
-  const itemIds = React31.useMemo(() => items.map((i) => i.id), [items]);
-  React31.useEffect(() => {
+  const [activeId, setActiveId] = React38.useState("");
+  const itemIds = React38.useMemo(() => items.map((i) => i.id), [items]);
+  React38.useEffect(() => {
     if (typeof IntersectionObserver === "undefined") return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -12123,7 +13160,7 @@ function TableOfContents({
     }
     return () => observer.disconnect();
   }, [itemIds]);
-  const handleClick = React31.useCallback(
+  const handleClick = React38.useCallback(
     (e, id) => {
       var _a;
       e.preventDefault();
@@ -12259,7 +13296,7 @@ function TooltipCaretShape({
     }
   );
 }
-var PlainTooltip = React31.forwardRef(
+var PlainTooltip = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -12316,7 +13353,7 @@ var PlainTooltip = React31.forwardRef(
   }
 );
 PlainTooltip.displayName = "PlainTooltip";
-var RichTooltip = React31.forwardRef(
+var RichTooltip = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -12400,7 +13437,7 @@ var RichTooltip = React31.forwardRef(
 );
 RichTooltip.displayName = "RichTooltip";
 var VIEWPORT_PADDING = 8;
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React31.useLayoutEffect : React31.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React38.useLayoutEffect : React38.useEffect;
 function resolveAutoPlacement(spaceTop, spaceBottom, spaceLeft, spaceRight, tooltipWidth, tooltipHeight, spacing) {
   if (spaceTop >= tooltipHeight + spacing) return "top";
   if (spaceBottom >= tooltipHeight + spacing) return "bottom";
@@ -12460,7 +13497,7 @@ function clampToViewport(side, top, left, tooltipWidth, tooltipHeight) {
   return { top, left };
 }
 function useTooltipPosition(anchorRef, tooltipRef, placement, spacing, isVisible) {
-  const [position, setPosition] = React31.useState({
+  const [position, setPosition] = React38.useState({
     top: -9999,
     left: -9999,
     actualSide: placement === "auto" ? "top" : placement
@@ -12535,24 +13572,24 @@ function useTooltipState(config) {
     isPersistent = false,
     duration = 1500
   } = config != null ? config : {};
-  const [isVisible, setIsVisible] = React31.useState(initialVisible);
-  const dismiss = React31.useCallback(() => {
+  const [isVisible, setIsVisible] = React38.useState(initialVisible);
+  const dismiss = React38.useCallback(() => {
     setIsVisible(false);
     activeTooltipDismissals.delete(dismiss);
   }, []);
-  const show = React31.useCallback(() => {
+  const show = React38.useCallback(() => {
     for (const otherDismiss of activeTooltipDismissals) {
       if (otherDismiss !== dismiss) otherDismiss();
     }
     setIsVisible(true);
     activeTooltipDismissals.add(dismiss);
   }, [dismiss]);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     if (!isVisible || isPersistent) return;
     const timeoutId = setTimeout(dismiss, duration);
     return () => clearTimeout(timeoutId);
   }, [isVisible, isPersistent, duration, dismiss]);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     return () => {
       activeTooltipDismissals.delete(dismiss);
     };
@@ -12609,20 +13646,20 @@ function TooltipBox({
 }) {
   const internalState = useTooltipState();
   const state = controlledState != null ? controlledState : internalState;
-  const anchorRef = React31.useRef(null);
-  const tooltipRef = React31.useRef(null);
-  const hoverTimeoutRef = React31.useRef(null);
-  const hideTimeoutRef = React31.useRef(null);
-  const pressTimeoutRef = React31.useRef(null);
+  const anchorRef = React38.useRef(null);
+  const tooltipRef = React38.useRef(null);
+  const hoverTimeoutRef = React38.useRef(null);
+  const hideTimeoutRef = React38.useRef(null);
+  const pressTimeoutRef = React38.useRef(null);
   const triggers = Array.isArray(trigger) ? trigger : [trigger];
-  const [mounted, setMounted] = React31.useState(false);
-  const [hasHoverSupport, setHasHoverSupport] = React31.useState(true);
-  const [prefersReducedMotion, setPrefersReducedMotion] = React31.useState(false);
-  React31.useEffect(() => {
+  const [mounted, setMounted] = React38.useState(false);
+  const [hasHoverSupport, setHasHoverSupport] = React38.useState(true);
+  const [prefersReducedMotion, setPrefersReducedMotion] = React38.useState(false);
+  React38.useEffect(() => {
     setMounted(true);
     setHasHoverSupport(!window.matchMedia("(hover: none)").matches);
   }, []);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     setPrefersReducedMotion(mediaQuery.matches);
     const onChange = (e) => setPrefersReducedMotion(e.matches);
@@ -12694,7 +13731,7 @@ function TooltipBox({
       hideDelay
     );
   };
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     if (!state.isVisible) return;
     const onKeyDown = (e) => {
       var _a;
@@ -12706,8 +13743,8 @@ function TooltipBox({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [state.isVisible, state]);
-  const tooltipId = React31.useId();
-  const tooltipWithProps = React31.cloneElement(
+  const tooltipId = React38.useId();
+  const tooltipWithProps = React38.cloneElement(
     tooltip,
     {
       "data-side": position.actualSide,
@@ -12735,7 +13772,7 @@ function TooltipBox({
         onKeyDown: handleKeyDown,
         "aria-label": ariaLabel,
         "aria-describedby": state.isVisible ? tooltipId : void 0,
-        children: React31__namespace.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+        children: React38__namespace.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children })
       }
     ),
     mounted && reactDom.createPortal(
@@ -12779,10 +13816,16 @@ exports.BadgedBox = BadgedBox;
 exports.BottomAppBar = BottomAppBar;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.CHECK_ICON_VARIANTS = CHECK_ICON_VARIANTS;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.CodeBlock = CodeBlock;
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuContent = ContextMenuContent;
+exports.ContextMenuTrigger = ContextMenuTrigger;
+exports.DIVIDER_COLOR = DIVIDER_COLOR;
+exports.DIVIDER_PADDING = DIVIDER_PADDING;
 exports.Dialog = Dialog;
 exports.DialogBody = DialogBody;
 exports.DialogClose = DialogClose;
@@ -12808,39 +13851,42 @@ exports.DrawerOverlay = DrawerOverlay;
 exports.DrawerPortal = DrawerPortal;
 exports.DrawerTitle = DrawerTitle;
 exports.DrawerTrigger = DrawerTrigger;
-exports.DropdownMenu = DropdownMenu;
-exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
-exports.DropdownMenuContent = DropdownMenuContent;
-exports.DropdownMenuGroup = DropdownMenuGroup;
-exports.DropdownMenuItem = DropdownMenuItem;
-exports.DropdownMenuLabel = DropdownMenuLabel;
-exports.DropdownMenuPortal = DropdownMenuPortal;
-exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
-exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
-exports.DropdownMenuSeparator = DropdownMenuSeparator;
-exports.DropdownMenuShortcut = DropdownMenuShortcut;
-exports.DropdownMenuSub = DropdownMenuSub;
-exports.DropdownMenuSubContent = DropdownMenuSubContent;
-exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
-exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.FAB = FAB;
 exports.FABMenu = FABMenu;
 exports.FABMenuItem = FABMenuItem;
 exports.FABPosition = FABPosition;
+exports.FAST_EFFECTS_TRANSITION = FAST_EFFECTS_TRANSITION;
+exports.FAST_SPATIAL_SPRING = FAST_SPATIAL_SPRING;
+exports.GROUP_SHAPES = GROUP_SHAPES;
+exports.ITEM_SHAPE_CLASSES = ITEM_SHAPE_CLASSES;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.LargeFlexibleAppBar = LargeFlexibleAppBar;
 exports.LoadingIndicator = LoadingIndicator;
 exports.MD3ThemeProvider = MD3ThemeProvider;
 exports.MD3_EXPRESSIVE_FONT_VARIATION = MD3_EXPRESSIVE_FONT_VARIATION;
+exports.MENU_CHECK_ICON_SIZE = MENU_CHECK_ICON_SIZE;
+exports.MENU_CONTAINER_VARIANTS = MENU_CONTAINER_VARIANTS;
+exports.MENU_GROUP_GAP = MENU_GROUP_GAP;
+exports.MENU_ICON_SIZE = MENU_ICON_SIZE;
+exports.MENU_ITEM_MIN_HEIGHT = MENU_ITEM_MIN_HEIGHT;
+exports.MENU_MAX_WIDTH = MENU_MAX_WIDTH;
+exports.MENU_MIN_WIDTH = MENU_MIN_WIDTH;
 exports.MaterialSymbolsPreconnect = MaterialSymbolsPreconnect;
 exports.MediumFlexibleAppBar = MediumFlexibleAppBar;
+exports.Menu = Menu;
+exports.MenuContent = MenuContent;
+exports.MenuDivider = MenuDivider;
+exports.MenuGroup = MenuGroup;
+exports.MenuItem = MenuItem;
+exports.MenuProvider = MenuProvider;
+exports.MenuTrigger = MenuTrigger;
 exports.NavigationRail = NavigationRail;
 exports.NavigationRailItem = NavigationRailItem;
 exports.PlainTooltip = PlainTooltip;
 exports.ProgressIndicator = ProgressIndicator;
 exports.RadioButton = RadioButton;
-exports.RadioGroup = RadioGroup2;
+exports.RadioGroup = RadioGroup;
 exports.RangeSlider = RangeSlider;
 exports.RichTooltip = RichTooltip;
 exports.Ripple = Ripple;
@@ -12850,6 +13896,8 @@ exports.SEARCH_DOCKED_REVEAL_SPRING = SEARCH_DOCKED_REVEAL_SPRING;
 exports.SEARCH_FULLSCREEN_SPRING = SEARCH_FULLSCREEN_SPRING;
 exports.SEARCH_TYPOGRAPHY = SEARCH_TYPOGRAPHY;
 exports.SEARCH_VIEW_SPRING = SEARCH_VIEW_SPRING;
+exports.STANDARD_COLORS = STANDARD_COLORS;
+exports.SUBMENU_CONTAINER_VARIANTS = SUBMENU_CONTAINER_VARIANTS;
 exports.ScrollArea = ScrollArea;
 exports.ScrollAreaScrollbar = ScrollAreaScrollbar;
 exports.Search = Search;
@@ -12867,6 +13915,7 @@ exports.SmallAppBar = SmallAppBar;
 exports.Snackbar = Snackbar;
 exports.SnackbarHost = SnackbarHost;
 exports.SnackbarProvider = SnackbarProvider;
+exports.SubMenu = SubMenu;
 exports.Switch = Switch;
 exports.SwitchColors = SwitchColors;
 exports.SwitchTokens = SwitchTokens;
@@ -12877,6 +13926,7 @@ exports.TabsColors = TabsColors;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTokens = TabsTokens;
+exports.Text = Text;
 exports.TextField = TextField;
 exports.ToggleFAB = ToggleFAB;
 exports.TooltipBox = TooltipBox;
@@ -12889,14 +13939,21 @@ exports.TypographyContext = TypographyContext;
 exports.TypographyKeyTokens = TypographyKeyTokens;
 exports.TypographyProvider = TypographyProvider;
 exports.TypographyTokens = TypographyTokens;
+exports.VIBRANT_COLORS = VIBRANT_COLORS;
+exports.VerticalMenu = VerticalMenu;
+exports.VerticalMenuContent = VerticalMenuContent;
+exports.VerticalMenuDivider = VerticalMenuDivider;
+exports.VerticalMenuGroup = VerticalMenuGroup;
 exports.appBarTypography = appBarTypography;
 exports.applyTheme = applyTheme;
 exports.buildWavePath = buildWavePath;
 exports.cn = cn;
 exports.generateM3Theme = generateM3Theme;
+exports.resolveMode = resolveMode;
 exports.useAppBarScroll = useAppBarScroll;
 exports.useDOMRipple = useRipple;
 exports.useMediaQuery = useMediaQuery;
+exports.useMenuContext = useMenuContext;
 exports.useRipple = useRipple2;
 exports.useRippleState = useRippleState;
 exports.useSearchKeyboard = useSearchKeyboard;