@bug-on/md3-react 2.0.3 → 3.0.1

package/dist/index.mjs

@@ -1,12 +1,13 @@
 "use client";
-import * as React31 from 'react';
+import * as React38 from 'react';
 import { createContext, forwardRef, useMemo, useRef, useEffect, useState, useCallback, useContext, useId, cloneElement, useLayoutEffect, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { argbFromHex, themeFromSourceColor, hexFromArgb } from '@material/material-color-utilities';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
-import { LazyMotion, domMax, m, AnimatePresence, useReducedMotion, useMotionValue, animate, useAnimationFrame, useSpring, useTransform, LayoutGroup } from 'motion/react';
+import * as RxContextMenu from '@radix-ui/react-context-menu';
+import { AnimatePresence, m, LazyMotion, domMax, useReducedMotion, useMotionValue, animate, useAnimationFrame, useSpring, useTransform, LayoutGroup } from 'motion/react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
@@ -152,6 +153,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 = argbFromHex(sourceColorHex);
   const theme = themeFromSourceColor(sourceColor);
@@ -210,13 +216,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 twMerge(clsx(inputs));
@@ -409,6 +416,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.createContext({
+  variant: "baseline",
+  colorVariant: "standard",
+  menuPrimitive: "dropdown",
+  open: false,
+  onOpenChange: () => {
+  }
+});
+function MenuProvider({
+  variant = "baseline",
+  colorVariant = "standard",
+  menuPrimitive = "dropdown",
+  open,
+  onOpenChange,
+  children
+}) {
+  const value = React38.useMemo(
+    () => ({ variant, colorVariant, menuPrimitive, open, onOpenChange }),
+    [variant, colorVariant, menuPrimitive, open, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value, children });
+}
+function useMenuContext() {
+  const ctx = React38.useContext(MenuContext);
+  return React38.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.useState(false);
+  return /* @__PURE__ */ jsx(
+    MenuProvider,
+    {
+      variant,
+      colorVariant,
+      menuPrimitive: "context",
+      open,
+      onOpenChange: setOpen,
+      children: /* @__PURE__ */ jsx(RxContextMenu.Root, { onOpenChange: setOpen, children })
+    }
+  );
+}
+ContextMenu.displayName = "ContextMenu";
+var ContextMenuTrigger = React38.forwardRef((_a, ref) => {
+  var _b = _a, { children, asChild = true } = _b, props = __objRest(_b, ["children", "asChild"]);
+  return /* @__PURE__ */ jsx(RxContextMenu.Trigger, __spreadProps(__spreadValues({ ref, asChild }, props), { children }));
+});
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+var ContextMenuContent = React38.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.Children.toArray(nodes).reduce(
+        (acc, child) => {
+          if (React38.isValidElement(child)) {
+            if (child.type === React38.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.cloneElement(
+          child,
+          {
+            index: i,
+            count: groupCount,
+            isGapVariant: isExpressiveGap
+          }
+        )
+      );
+      renderedChildren = separatorStyle === "divider" ? enhancedChildren.reduce((acc, child, i) => {
+        if (i > 0) {
+          acc.push(
+            /* @__PURE__ */ 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__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RxContextMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(RxContextMenu.Content, __spreadProps(__spreadValues({ ref, asChild: true, forceMount: true }, props), { children: /* @__PURE__ */ jsx(
+      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.useState(
+    () => defaultOpen != null ? defaultOpen : false
+  );
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const handleOpenChange = React38.useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      controlledOnOpenChange == null ? void 0 : controlledOnOpenChange(next);
+    },
+    [isControlled, controlledOnOpenChange]
+  );
+  return /* @__PURE__ */ jsx(
+    MenuProvider,
+    {
+      variant: resolvedVariant,
+      colorVariant,
+      open,
+      onOpenChange: handleOpenChange,
+      children: /* @__PURE__ */ jsx(
+        DropdownMenu.Root,
+        __spreadProps(__spreadValues({}, props), {
+          defaultOpen,
+          open: isControlled ? open : void 0,
+          onOpenChange: handleOpenChange,
+          children
+        })
+      )
+    }
+  );
+}
+Menu.displayName = "Menu";
+var MenuTrigger = React38.forwardRef((_a, ref) => {
+  var _b = _a, { children, asChild = true } = _b, props = __objRest(_b, ["children", "asChild"]);
+  return /* @__PURE__ */ jsx(DropdownMenu.Trigger, __spreadProps(__spreadValues({ ref, asChild }, props), { children }));
+});
+MenuTrigger.displayName = "MenuTrigger";
+var MenuContent = React38.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.Children.toArray(nodes).reduce(
+        (acc, child) => {
+          if (React38.isValidElement(child)) {
+            if (child.type === React38.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.cloneElement(child, {
+          index: i,
+          count: groupCount,
+          isGapVariant: isExpressiveGap
+        })
+      );
+      renderedChildren = separatorStyle === "divider" ? enhancedChildren.reduce((acc, child, i) => {
+        if (i > 0) {
+          acc.push(
+            /* @__PURE__ */ 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__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(DropdownMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+      DropdownMenu.Content,
+      __spreadProps(__spreadValues({
+        ref,
+        sideOffset,
+        side,
+        align,
+        asChild: true,
+        forceMount: true
+      }, props), {
+        children: /* @__PURE__ */ jsx(
+          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.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    const { menuVariant } = useMenuContext();
+    return /* @__PURE__ */ jsx(DropdownMenu.Separator, { asChild: true, children: /* @__PURE__ */ 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.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.useState(false);
+    const currentShape = isStatic || isHovered ? activeShape : GROUP_SHAPES.inactive;
+    const handlePointerEnter = React38.useCallback(() => setIsHovered(true), []);
+    const handlePointerLeave = React38.useCallback(() => setIsHovered(false), []);
+    const flattenChildren = (children2) => {
+      return React38.Children.toArray(children2).reduce(
+        (acc, child) => {
+          if (React38.isValidElement(child)) {
+            if (child.type === React38.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.cloneElement(child, {
+        itemPosition: itemPosition2,
+        colorVariant
+      });
+    });
+    return /* @__PURE__ */ jsxs(
+      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__ */ 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",
@@ -420,6 +1092,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 },
@@ -440,7 +1117,7 @@ var VARIANT_FONT = {
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React31.forwardRef(
+var IconComponent = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -506,222 +1183,527 @@ var IconComponent = React31.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React31.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.Root;
-DropdownMenu.displayName = "DropdownMenu";
-var DropdownMenuTrigger = RadixDropdown.Trigger;
-DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
-var DropdownMenuGroup = RadixDropdown.Group;
-var DropdownMenuPortal = RadixDropdown.Portal;
-var DropdownMenuSub = RadixDropdown.Sub;
-var DropdownMenuRadioGroup = RadixDropdown.RadioGroup;
-var DropdownMenuContent = React31.forwardRef((_a, ref) => {
-  var _b = _a, { className, sideOffset = 6, children } = _b, props = __objRest(_b, ["className", "sideOffset", "children"]);
-  return /* @__PURE__ */ jsx(RadixDropdown.Portal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
-    RadixDropdown.Content,
-    __spreadProps(__spreadValues({
-      ref,
-      sideOffset,
-      asChild: true
-    }, props), {
-      children: /* @__PURE__ */ jsx(
-        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.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    RadixDropdown.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.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.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 ? Slot : menuPrimitive === "context" ? isCheckbox ? RxContextMenu.CheckboxItem : isRadio ? RxContextMenu.RadioItem : RxContextMenu.Item : isCheckbox ? DropdownMenu.CheckboxItem : isRadio ? DropdownMenu.RadioItem : DropdownMenu.Item;
+    return /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                "div",
+                {
+                  className: "flex h-5 w-5 shrink-0 items-center justify-center mr-3",
+                  "aria-hidden": "true",
+                  children: isSelectable ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: selected ? /* @__PURE__ */ jsx(
+                    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__ */ jsx(Icon, { name: "check", fill: 1, size: MENU_CHECK_ICON_SIZE })
+                    },
+                    "check"
+                  ) : leadingIcon ? /* @__PURE__ */ jsx(
+                    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__ */ jsx("div", { className: "w-5" })
+                  ) }) : (
+                    // Static icon for non-selectable items
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "flex h-full w-full items-center justify-center",
+                          colors.iconColor
+                        ),
+                        children: leadingIcon
+                      }
+                    )
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-body-large leading-snug", children }),
+                supportingText && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-body-medium leading-snug",
+                      // Source: StandardMenuTokens.ItemSupportingTextColor / VibrantMenuTokens
+                      selected ? colors.selectedText : colors.supportingTextColor
+                    ),
+                    children: supportingText
+                  }
+                )
+              ] }),
+              (trailingText || trailingIcon) && /* @__PURE__ */ 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__ */ 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.useState(false);
+  const openTimerRef = React38.useRef(null);
+  const closeTimerRef = React38.useRef(
+    null
   );
-});
-DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
-var DropdownMenuItem = React31.forwardRef((_a, ref) => {
-  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
+  const clearTimers = React38.useCallback(() => {
+    if (openTimerRef.current) clearTimeout(openTimerRef.current);
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+  }, []);
+  const handleTriggerPointerEnter = React38.useCallback(() => {
+    clearTimers();
+    openTimerRef.current = setTimeout(() => setOpen(true), hoverOpenDelay);
+  }, [hoverOpenDelay, clearTimers]);
+  const handleTriggerPointerLeave = React38.useCallback(() => {
+    clearTimers();
+    closeTimerRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
+  }, [hoverCloseDelay, clearTimers]);
+  const handleContentPointerEnter = React38.useCallback(() => {
+    clearTimers();
+  }, [clearTimers]);
+  const handleContentPointerLeave = React38.useCallback(() => {
+    clearTimers();
+    closeTimerRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
+  }, [hoverCloseDelay, clearTimers]);
+  React38.useEffect(() => () => clearTimers(), [clearTimers]);
+  const Sub3 = menuPrimitive === "context" ? RxContextMenu.Sub : DropdownMenu.Sub;
+  const SubTrigger3 = menuPrimitive === "context" ? RxContextMenu.SubTrigger : DropdownMenu.SubTrigger;
+  const SubContent3 = menuPrimitive === "context" ? RxContextMenu.SubContent : DropdownMenu.SubContent;
+  const Portal7 = menuPrimitive === "context" ? RxContextMenu.Portal : DropdownMenu.Portal;
+  return /* @__PURE__ */ jsxs(Sub3, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      SubTrigger3,
+      {
+        className: "w-full outline-none",
+        onPointerEnter: handleTriggerPointerEnter,
+        onPointerLeave: handleTriggerPointerLeave,
+        children: React38.isValidElement(trigger) ? React38.cloneElement(trigger, {
+          isSubTrigger: true,
+          // Auto-add chevron if missing
+          trailingIcon: trigger.props.trailingIcon || /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: 20 })
+        }) : trigger
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(Portal7, { forceMount: true, children: /* @__PURE__ */ jsx(
+      SubContent3,
+      {
+        sideOffset: 4,
+        alignOffset: -4,
+        forceMount: true,
+        className: "outline-none",
+        children: /* @__PURE__ */ 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__ */ jsx(
-    RadixDropdown.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.forwardRef((_a, ref) => {
-  var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
-  return /* @__PURE__ */ jsxs(
-    RadixDropdown.CheckboxItem,
-    __spreadProps(__spreadValues({
-      ref,
+    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__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixDropdown.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, "aria-hidden": "true" }) }) }),
-        children
-      ]
-    })
-  );
-});
-DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-var DropdownMenuRadioItem = React31.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs(
-    RadixDropdown.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__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixDropdown.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, { name: "circle", fill: 1, size: 8, "aria-hidden": "true" }) }) }),
-        children
-      ]
-    })
-  );
-});
-DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuSeparator = React31.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    RadixDropdown.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.forwardRef((_a, ref) => {
-  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
+}
+SubMenuContent.displayName = "SubMenuContent";
+var VerticalMenuDivider = React38.forwardRef((_a, ref) => {
+  var _b = _a, { className, index, count, isGapVariant } = _b, props = __objRest(_b, ["className", "index", "count", "isGapVariant"]);
   return /* @__PURE__ */ jsx(
-    RadixDropdown.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.forwardRef((_a, ref) => {
-  var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
-  return /* @__PURE__ */ jsxs(
-    RadixDropdown.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__ */ jsx(
-          Icon,
-          {
-            name: "chevron_right",
-            size: 16,
-            className: "ml-auto",
-            "aria-hidden": "true"
+VerticalMenuDivider.displayName = "VerticalMenuDivider";
+var VerticalMenuGroup = MenuGroup;
+var VerticalMenuContent = React38.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.Children.toArray(children2).reduce(
+        (acc, child) => {
+          if (React38.isValidElement(child)) {
+            if (child.type === React38.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.cloneElement(child, {
+        index: i,
+        count: groupCount,
+        isGapVariant: separatorStyle === "gap"
+      })
+    );
+    const renderedChildren = separatorStyle === "divider" ? enhancedChildren.reduce((acc, child, i) => {
+      if (i > 0) {
+        acc.push(
+          /* @__PURE__ */ jsx(
+            VerticalMenuDivider,
+            {},
+            `divider-${child.key || i}`
+          )
+        );
+      }
+      acc.push(child);
+      return acc;
+    }, []) : enhancedChildren;
+    return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+  var _b = _a, { children, colorVariant = "standard", className } = _b, props = __objRest(_b, ["children", "colorVariant", "className"]);
+  const noop = React38.useCallback(() => {
+  }, []);
+  const colors = colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
+  const containerRef = React38.useRef(null);
+  const mergedRef = React38.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.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__ */ 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__ */ 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.Children.toArray(children).find(React38.isValidElement);
+  if (child) {
+    const style = child.props.separatorStyle;
+    if (style) return style;
+  }
+  return "gap";
+}
 function MoreVertIcon() {
   return /* @__PURE__ */ jsx(
     "span",
@@ -736,10 +1718,14 @@ function OverflowItem({ item }) {
   var _a;
   if (item.type === "toggleable") {
     return /* @__PURE__ */ 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
       }
@@ -754,15 +1740,15 @@ function OverflowItem({ item }) {
       }
     }) });
   }
-  return /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: item.onClick, disabled: item.enabled === false, children: item.label });
+  return /* @__PURE__ */ jsx(MenuItem, { onClick: item.onClick, disabled: item.enabled === false, children: item.label });
 }
 function AppBarOverflowIndicator({
   items,
   className
 }) {
   if (items.length === 0) return null;
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Menu, { children: [
+    /* @__PURE__ */ jsx(MenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -781,7 +1767,7 @@ function AppBarOverflowIndicator({
         children: /* @__PURE__ */ jsx(MoreVertIcon, {})
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", sideOffset: 4, children: items.map((item, index) => (
+    /* @__PURE__ */ jsx(MenuContent, { align: "end", sideOffset: 4, children: items.map((item, index) => (
       // biome-ignore lint/suspicious/noArrayIndexKey: static list from props
       /* @__PURE__ */ jsx(OverflowItem, { item }, index)
     )) })
@@ -792,11 +1778,11 @@ function AppBarColumn({
   maxItemCount,
   className
 }) {
-  const containerRef = React31.useRef(null);
-  const [visibleCount, setVisibleCount] = React31.useState(
+  const containerRef = React38.useRef(null);
+  const [visibleCount, setVisibleCount] = React38.useState(
     maxItemCount != null ? maxItemCount : items.length
   );
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     if (maxItemCount !== void 0) {
       setVisibleCount(Math.min(maxItemCount, items.length));
       return;
@@ -844,11 +1830,11 @@ function AppBarColumn({
   );
 }
 function AppBarRow({ items, maxItemCount, className }) {
-  const containerRef = React31.useRef(null);
-  const [visibleCount, setVisibleCount] = React31.useState(
+  const containerRef = React38.useRef(null);
+  const [visibleCount, setVisibleCount] = React38.useState(
     maxItemCount != null ? maxItemCount : items.length
   );
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     if (maxItemCount !== void 0) {
       setVisibleCount(Math.min(maxItemCount, items.length));
       return;
@@ -902,12 +1888,12 @@ function useAppBarScroll({
   collapsedHeight = 64,
   expandedHeight = 112
 } = {}) {
-  const [isScrolled, setIsScrolled] = React31.useState(false);
-  const [collapsedFraction, setCollapsedFraction] = React31.useState(0);
-  const [isHidden, setIsHidden] = React31.useState(false);
-  const prevScrollYRef = React31.useRef(0);
+  const [isScrolled, setIsScrolled] = React38.useState(false);
+  const [collapsedFraction, setCollapsedFraction] = React38.useState(0);
+  const [isHidden, setIsHidden] = React38.useState(false);
+  const prevScrollYRef = React38.useRef(0);
   const hideThreshold = 64;
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     var _a;
     const scrollDistance = expandedHeight - collapsedHeight;
     const getScrollY = () => {
@@ -1028,7 +2014,7 @@ function useFlexibleAppBar({
     expandedHeight
   });
   const scrollProgress = useMotionValue(0);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     scrollProgress.set(
       shouldReduceMotion ? collapsedFraction > 0.5 ? 1 : 0 : collapsedFraction
     );
@@ -1369,7 +2355,7 @@ function SearchAppBar({
 }) {
   var _a, _b;
   const shouldReduceMotion = useReducedMotion();
-  const [isSearchOpen, setIsSearchOpen] = React31.useState(false);
+  const [isSearchOpen, setIsSearchOpen] = React38.useState(false);
   const { isScrolled } = useAppBarScroll({
     scrollElement,
     behavior: scrollBehavior === "exitUntilCollapsed" ? "pinned" : scrollBehavior
@@ -1483,8 +2469,8 @@ function SearchView({
   className
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const inputRef = React31.useRef(null);
-  React31.useEffect(() => {
+  const inputRef = React38.useRef(null);
+  React38.useEffect(() => {
     const timer = window.setTimeout(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -1754,9 +2740,9 @@ function formatBadgeLabel(children, max) {
   return "";
 }
 function detectBadgeHasContent(badge) {
-  return React31.isValidElement(badge) && badge.props.children != null;
+  return React38.isValidElement(badge) && badge.props.children != null;
 }
-var BadgeImpl = React31.forwardRef(
+var BadgeImpl = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1810,7 +2796,7 @@ var BadgeImpl = React31.forwardRef(
   }
 );
 BadgeImpl.displayName = "Badge";
-var Badge = React31.memo(BadgeImpl);
+var Badge = React38.memo(BadgeImpl);
 function BadgedBox({
   badge,
   children,
@@ -1876,11 +2862,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.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React38.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React31.useState(false);
-  React31.useEffect(() => {
+  const [ready, setReady] = React38.useState(false);
+  React38.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -1925,7 +2911,7 @@ var IndeterminateSvg = React31.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React31.memo(function DeterminateSvg2({
+var DeterminateSvg = React38.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -1950,7 +2936,7 @@ var DeterminateSvg = React31.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React31.forwardRef(
+var LoadingIndicator = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -2065,7 +3051,7 @@ function getSinePath(startX, endX, phase, wl, amp) {
   d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
   return d;
 }
-var CircularProgress = React31.forwardRef(
+var CircularProgress = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -2103,15 +3089,15 @@ var CircularProgress = React31.forwardRef(
     const isWavy = shape === "wavy";
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React31.useMemo(
+    const effectiveAmplitude = React38.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React31.useMemo(
+    const effectiveWavelength = React38.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React31.useMemo(
+    const wavyActivePath = React38.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -2120,8 +3106,8 @@ var CircularProgress = React31.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React31.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React31.useMemo(
+    const circumference = React38.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React38.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -2310,9 +3296,9 @@ var CircularProgress = React31.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React31.useState(0);
-  const observerRef = React31.useRef(null);
-  const ref = React31.useCallback((node) => {
+  const [width, setWidth] = React38.useState(0);
+  const observerRef = React38.useRef(null);
+  const ref = React38.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -2326,7 +3312,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -2336,7 +3322,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React31.useCallback(
+  return React38.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -2350,7 +3336,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React31.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React38.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -2426,7 +3412,7 @@ var FlatLinearTrack = React31.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React31.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React38.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -2445,13 +3431,13 @@ var WavyLinearTrack = React31.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React31.useId();
+  const titleId = React38.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React31.useRef(null);
-  const trackPathRef = React31.useRef(null);
+  const activePathRef = React38.useRef(null);
+  const trackPathRef = React38.useRef(null);
   const amplitudeMV = useMotionValue(amplitude);
   const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -2622,7 +3608,7 @@ var WavyLinearTrack = React31.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React31.forwardRef(
+var LinearProgress = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -2663,10 +3649,10 @@ var LinearProgress = React31.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React31.useRef(null);
+    const containerRef = React38.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React31.useState(false);
-    React31.useEffect(() => {
+    const [isRtl, setIsRtl] = React38.useState(false);
+    React38.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -2674,16 +3660,16 @@ var LinearProgress = React31.forwardRef(
     }, []);
     const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
-    const effectiveAmplitude = React31.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React31.useMemo(
+    const effectiveAmplitude = React38.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React38.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React31.useMemo(
+    const shouldShowStop = React38.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React31.useMemo(
+    const stopSize = React38.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -2756,14 +3742,14 @@ var LinearProgress = React31.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React31.forwardRef((props, ref) => {
+var ProgressIndicator = React38.forwardRef((props, ref) => {
   if (props.variant === "circular") {
     return /* @__PURE__ */ jsx(CircularProgress, __spreadValues({ ref }, props));
   }
   return /* @__PURE__ */ jsx(LinearProgress, __spreadValues({ ref }, props));
 });
 ProgressIndicator.displayName = "ProgressIndicator";
-var RippleItem = React31.memo(function RippleItem2({
+var RippleItem = React38.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -2807,8 +3793,8 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React31.useState([]);
-  const onPointerDown = React31.useCallback(
+  const [ripples, setRipples] = React38.useState([]);
+  const onPointerDown = React38.useCallback(
     (e) => {
       if (disabled) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -2822,7 +3808,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React31.useCallback((id) => {
+  const removeRipple = React38.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -2951,15 +3937,12 @@ var buttonColorVariants = 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.Children.only(children);
+    const child = React38.Children.only(children);
     return child.props.children;
   }
-  return typeof children === "string" ? toSentenceCase(children) : children;
+  return children;
 }
 var MOTION_PROP_KEYS = [
   "animate",
@@ -3028,7 +4011,7 @@ function AnimatedIconSlot({
     }
   );
 }
-var ButtonComponent = React31.forwardRef(
+var ButtonComponent = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3077,15 +4060,15 @@ var ButtonComponent = React31.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.useMemo(
+    const labelText = React38.useMemo(
       () => resolveLabel(children, asChild),
       [children, asChild]
     );
     const computedAriaLabel = ariaLabelProp || (typeof children === "string" ? children : void 0);
     const needsTouchTarget = size === "xs" || size === "sm";
     const motionRadius = useMotionValue(animateRadius);
-    const asChildRef = React31.useRef(null);
-    const mergedRef = React31.useCallback(
+    const asChildRef = React38.useRef(null);
+    const mergedRef = React38.useCallback(
       (node) => {
         asChildRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -3094,27 +4077,27 @@ var ButtonComponent = React31.forwardRef(
       },
       [ref]
     );
-    React31.useEffect(
+    React38.useEffect(
       () => motionRadius.on("change", (v) => {
         if (asChildRef.current)
           asChildRef.current.style.borderRadius = `${v}px`;
       }),
       [motionRadius]
     );
-    React31.useEffect(() => {
+    React38.useEffect(() => {
       springAnimate(motionRadius, animateRadius);
     }, [animateRadius, motionRadius]);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React31.useCallback(
+    const handleClick = React38.useCallback(
       (e) => {
         if (loading) return e.preventDefault();
         onClick == null ? void 0 : onClick(e);
       },
       [loading, onClick]
     );
-    const handleKeyDown = React31.useCallback(
+    const handleKeyDown = React38.useCallback(
       (e) => {
         if (loading) return;
         if (onClick && (e.key === "Enter" || e.key === " ")) {
@@ -3148,7 +4131,7 @@ var ButtonComponent = React31.forwardRef(
         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
         }
@@ -3157,7 +4140,7 @@ var ButtonComponent = React31.forwardRef(
     ] });
     if (asChild) {
       const htmlProps = stripMotionProps(restProps);
-      const child = React31.Children.only(children);
+      const child = React38.Children.only(children);
       const handleAsChildPointerDown = (e) => {
         springAnimate(motionRadius, pressedRadius);
         onPointerDown == null ? void 0 : onPointerDown(e);
@@ -3181,7 +4164,7 @@ var ButtonComponent = React31.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React31.cloneElement(child, { children: innerContent })
+          children: React38.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -3209,7 +4192,7 @@ var ButtonComponent = React31.forwardRef(
   }
 );
 ButtonComponent.displayName = "Button";
-var Button = React31.memo(ButtonComponent);
+var Button = React38.memo(ButtonComponent);
 var SIZE_PADDING_MAP = {
   xs: "0.75rem",
   sm: "1rem",
@@ -3238,7 +4221,7 @@ var PRESSED_RADIUS_MAP = {
   lg: 28,
   xl: 40
 };
-var ButtonGroupComponent = React31.forwardRef(
+var ButtonGroupComponent = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3259,13 +4242,13 @@ var ButtonGroupComponent = React31.forwardRef(
       "showCheck",
       "children"
     ]);
-    const [pressedIndex, setPressedIndex] = React31.useState(null);
-    const childrenArray = React31.useMemo(
-      () => React31.Children.toArray(children).filter(React31.isValidElement),
+    const [pressedIndex, setPressedIndex] = React38.useState(null);
+    const childrenArray = React38.useMemo(
+      () => React38.Children.toArray(children).filter(React38.isValidElement),
       [children]
     );
     const count = childrenArray.length;
-    const handlePointerLeaveAndUp = React31.useCallback(() => {
+    const handlePointerLeaveAndUp = React38.useCallback(() => {
       setPressedIndex(null);
     }, []);
     return /* @__PURE__ */ jsx(
@@ -3404,7 +4387,7 @@ var ButtonGroupComponent = React31.forwardRef(
               duration: 0.2
             };
           }
-          return React31.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
+          return React38.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
             key: (_a2 = element.key) != null ? _a2 : index,
             tabIndex: isFirst ? 0 : -1,
             size: size || element.props.size,
@@ -3433,7 +4416,7 @@ var ButtonGroupComponent = React31.forwardRef(
   }
 );
 ButtonGroupComponent.displayName = "ButtonGroup";
-var ButtonGroup = React31.memo(ButtonGroupComponent);
+var ButtonGroup = React38.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)",
@@ -3492,7 +4475,7 @@ function useCardElevation(variant, disabled) {
     }
   };
 }
-var CardImpl = React31.forwardRef(
+var CardImpl = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3590,7 +4573,7 @@ var CardImpl = React31.forwardRef(
   }
 );
 CardImpl.displayName = "Card";
-var Card = React31.memo(CardImpl);
+var Card = React38.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";
@@ -3604,7 +4587,7 @@ var NEXT_STATE = {
   checked: "indeterminate",
   indeterminate: "unchecked"
 };
-var CheckboxVisual = React31.memo(function CheckboxVisual2({
+var CheckboxVisual = React38.memo(function CheckboxVisual2({
   isSelected,
   isIndeterminate,
   containerBg,
@@ -3675,7 +4658,7 @@ var CheckboxVisual = React31.memo(function CheckboxVisual2({
   );
 });
 function useMergedRef2(externalRef, internalRef) {
-  return React31.useCallback(
+  return React38.useCallback(
     (node) => {
       internalRef.current = node;
       if (!externalRef) return;
@@ -3688,7 +4671,7 @@ function useMergedRef2(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var CheckboxComponent = React31.forwardRef(
+var CheckboxComponent = React38.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -3710,20 +4693,20 @@ var CheckboxComponent = React31.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-    const generatedId = React31.useId();
+    const generatedId = React38.useId();
     const inputId = idProp != null ? idProp : label ? `checkbox-${generatedId}` : void 0;
-    const [internalState, setInternalState] = React31.useState(
+    const [internalState, setInternalState] = React38.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.useState([]);
-    const removeRipple = React31.useCallback(
+    const [ripples, setRipples] = React38.useState([]);
+    const removeRipple = React38.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
-    const onPointerDown = React31.useCallback(
+    const onPointerDown = React38.useCallback(
       (e) => {
         if (disabled) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -3737,7 +4720,7 @@ var CheckboxComponent = React31.forwardRef(
       },
       [disabled]
     );
-    const handleChange = React31.useCallback(
+    const handleChange = React38.useCallback(
       (e) => {
         if (disabled) return;
         if (stateProp !== void 0) {
@@ -3763,9 +4746,9 @@ var CheckboxComponent = React31.forwardRef(
         onCheckedChange
       ]
     );
-    const inputRef = React31.useRef(null);
+    const inputRef = React38.useRef(null);
     const mergedRef = useMergedRef2(ref, inputRef);
-    React31.useEffect(() => {
+    React38.useEffect(() => {
       if (inputRef.current) {
         inputRef.current.indeterminate = effectiveState === "indeterminate";
       }
@@ -3890,13 +4873,13 @@ var CheckboxComponent = React31.forwardRef(
   }
 );
 CheckboxComponent.displayName = "Checkbox";
-var Checkbox = React31.memo(CheckboxComponent);
-var TriStateCheckboxComponent = React31.forwardRef((_a, ref) => {
+var Checkbox = React38.memo(CheckboxComponent);
+var TriStateCheckboxComponent = React38.forwardRef((_a, ref) => {
   var _b = _a, { state, onStateChange } = _b, rest = __objRest(_b, ["state", "onStateChange"]);
   return /* @__PURE__ */ jsx(Checkbox, __spreadValues({ ref, state, onStateChange }, rest));
 });
 TriStateCheckboxComponent.displayName = "TriStateCheckbox";
-var TriStateCheckbox = React31.memo(TriStateCheckboxComponent);
+var TriStateCheckbox = React38.memo(TriStateCheckboxComponent);
 function CheckIcon({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -3990,7 +4973,7 @@ var chipVariants = cva(
     defaultVariants: { variant: "assist" }
   }
 );
-var ChipImpl = React31.forwardRef(
+var ChipImpl = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "assist",
@@ -4026,7 +5009,7 @@ var ChipImpl = React31.forwardRef(
     const showCheckmark = isFilter && selected;
     const hasTrailingContent = !!trailingIcon || !!onRemove;
     const hasLeadingContent = isFilter || !!resolvedLeadingIcon;
-    const paddingClass = React31.useMemo(
+    const paddingClass = React38.useMemo(
       () => cn(
         !isInput && !hasLeadingContent && !hasTrailingContent && "px-4",
         !isInput && hasLeadingContent && !hasTrailingContent && "pl-2 pr-4",
@@ -4039,7 +5022,7 @@ var ChipImpl = React31.forwardRef(
       ),
       [isInput, hasLeadingContent, hasTrailingContent]
     );
-    const stateClass = React31.useMemo(
+    const stateClass = React38.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",
@@ -4050,7 +5033,7 @@ var ChipImpl = React31.forwardRef(
       ),
       [isFilter, isInput, selected, elevated, disabled]
     );
-    const leadingIconColorClass = React31.useMemo(
+    const leadingIconColorClass = React38.useMemo(
       () => cn(
         (variant === "assist" || variant === "suggestion") && "text-m3-primary",
         isFilter && !selected && "text-m3-primary",
@@ -4061,7 +5044,7 @@ var ChipImpl = React31.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,
@@ -4131,7 +5114,7 @@ var ChipImpl = React31.forwardRef(
       /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: label })
     ] });
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
-      Root5,
+      Root6,
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         ref: !isCompound ? ref : void 0,
         type: !isCompound ? "button" : void 0
@@ -4222,8 +5205,8 @@ var ChipImpl = React31.forwardRef(
   }
 );
 ChipImpl.displayName = "Chip";
-var Chip = React31.memo(ChipImpl);
-var ScrollArea = React31.forwardRef(
+var Chip = React38.memo(ChipImpl);
+var ScrollArea = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4282,7 +5265,7 @@ var ScrollArea = React31.forwardRef(
   }
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollAreaScrollbar = React31.forwardRef((_a, ref) => {
+var ScrollAreaScrollbar = React38.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsx(
     RadixScrollArea.Scrollbar,
@@ -4312,7 +5295,7 @@ var ScrollAreaScrollbar = React31.forwardRef((_a, ref) => {
   );
 });
 ScrollAreaScrollbar.displayName = RadixScrollArea.Scrollbar.displayName;
-var ScrollAreaCorner = React31.forwardRef((_a, ref) => {
+var ScrollAreaCorner = React38.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadixScrollArea.Corner,
@@ -4589,7 +5572,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React31.forwardRef(
+var IconButtonComponent = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4623,18 +5606,18 @@ var IconButtonComponent = React31.forwardRef(
     var _a2, _b2;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React31.useMemo(
+    const resolvedColorClass = React38.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React31.useMemo(
+    const outlineWidthClass = React38.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React31.useMemo(
+    const disabledBgClass = React38.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -4653,7 +5636,7 @@ var IconButtonComponent = React31.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React31.useCallback(
+    const handleClick = React38.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -4663,7 +5646,7 @@ var IconButtonComponent = React31.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React31.useCallback(
+    const handleKeyDown = React38.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -4751,7 +5734,7 @@ var IconButtonComponent = React31.forwardRef(
   }
 );
 IconButtonComponent.displayName = "IconButton";
-var IconButton = React31.memo(IconButtonComponent);
+var IconButton = React38.memo(IconButtonComponent);
 var MD3_SPRING = {
   type: "spring",
   stiffness: 400,
@@ -4788,9 +5771,9 @@ DialogTrigger.displayName = "DialogTrigger";
 var DialogPortal = ({
   open,
   children
-}) => /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? React31.Children.toArray(children) : null }) });
+}) => /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? React38.Children.toArray(children) : null }) });
 DialogPortal.displayName = "DialogPortal";
-var DialogOverlay = React31.forwardRef((_a, ref) => {
+var DialogOverlay = React38.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(RadixDialog.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsx(
     m.div,
@@ -4801,7 +5784,7 @@ var DialogOverlay = React31.forwardRef((_a, ref) => {
   ) }));
 });
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React31.forwardRef((_a, ref) => {
+var DialogContent = React38.forwardRef((_a, ref) => {
   var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
   return /* @__PURE__ */ jsx(
     RadixDialog.Content,
@@ -4841,7 +5824,7 @@ var DialogContent = React31.forwardRef((_a, ref) => {
   );
 });
 DialogContent.displayName = "DialogContent";
-var DialogIcon = React31.forwardRef((_a, ref) => {
+var DialogIcon = React38.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -4864,7 +5847,7 @@ var DialogHeader = (_a) => {
   return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mb-4", className) }, props));
 };
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React31.forwardRef((_a, ref) => {
+var DialogTitle = React38.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsx(
     RadixDialog.Title,
@@ -4879,7 +5862,7 @@ var DialogTitle = React31.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React31.forwardRef((_a, ref) => {
+var DialogDescription = React38.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsx(
     RadixDialog.Description,
@@ -4891,7 +5874,7 @@ var DialogDescription = React31.forwardRef((_a, ref) => {
   );
 });
 DialogDescription.displayName = "DialogDescription";
-var DialogBody = React31.forwardRef((_a, ref) => {
+var DialogBody = React38.forwardRef((_a, ref) => {
   var _b = _a, { className, children, dir } = _b, props = __objRest(_b, ["className", "children", "dir"]);
   return /* @__PURE__ */ jsx(
     ScrollArea,
@@ -4922,7 +5905,7 @@ var DialogFooter = (_a) => {
 };
 DialogFooter.displayName = "DialogFooter";
 var DialogClose = RadixDialog.Close;
-var DialogFullScreenContent = React31.forwardRef(
+var DialogFullScreenContent = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5005,7 +5988,7 @@ function buildWavePath(startX, endX, amplitude = 2, wavelength = 32, yCenter = 4
   }
   return d;
 }
-var DividerImpl = React31.forwardRef(
+var DividerImpl = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "full-bleed",
@@ -5125,7 +6108,7 @@ var DividerImpl = React31.forwardRef(
   }
 );
 DividerImpl.displayName = "Divider";
-var Divider = React31.memo(DividerImpl);
+var Divider = React38.memo(DividerImpl);
 var MD3_DRAWER_SPRING = {
   type: "spring",
   stiffness: 350,
@@ -5162,7 +6145,7 @@ var DrawerPortal = ({
   open,
   children
 }) => /* @__PURE__ */ jsx(RadixDialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: open && children }) });
-var DrawerOverlay = React31.forwardRef((_a, ref) => {
+var DrawerOverlay = React38.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(RadixDialog.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsx(
     m.div,
@@ -5173,7 +6156,7 @@ var DrawerOverlay = React31.forwardRef((_a, ref) => {
   ) }));
 });
 DrawerOverlay.displayName = "DrawerOverlay";
-var DrawerContent = React31.forwardRef(
+var DrawerContent = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5252,7 +6235,7 @@ var DrawerFooter = (_a) => {
   return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mt-4", className) }, props));
 };
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React31.forwardRef((_a, ref) => {
+var DrawerTitle = React38.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadixDialog.Title,
@@ -5266,7 +6249,7 @@ var DrawerTitle = React31.forwardRef((_a, ref) => {
   );
 });
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React31.forwardRef((_a, ref) => {
+var DrawerDescription = React38.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadixDialog.Description,
@@ -5347,7 +6330,7 @@ function FABPosition({
     }
   );
 }
-var FABComponent = React31.forwardRef(
+var FABComponent = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5392,7 +6375,7 @@ var FABComponent = React31.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React31.useCallback(
+    const handleClick = React38.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -5402,7 +6385,7 @@ var FABComponent = React31.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React31.useCallback(
+    const handleKeyDown = React38.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -5511,7 +6494,7 @@ var FABComponent = React31.forwardRef(
   }
 );
 FABComponent.displayName = "FAB";
-var FAB = React31.memo(FABComponent);
+var FAB = React38.memo(FABComponent);
 var SPRING_NORMAL = { stiffness: 700, damping: 40 };
 var SPRING_REDUCED = { stiffness: 1e4, damping: 100 };
 var FOCUS_DELAY_MS = 50;
@@ -5576,7 +6559,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 } }
 };
@@ -5619,7 +6602,7 @@ function CloseIcon3() {
 function defaultFabIcon(progress) {
   return progress > 0.5 ? /* @__PURE__ */ jsx(CloseIcon3, {}) : /* @__PURE__ */ jsx(AddIcon, {});
 }
-var ToggleFABComponent = React31.forwardRef(
+var ToggleFABComponent = React38.forwardRef(
   ({
     expanded,
     onToggle,
@@ -5637,7 +6620,7 @@ var ToggleFABComponent = React31.forwardRef(
     const sizeTokens = (_b = TOGGLE_FAB_SIZES[fabSize]) != null ? _b : TOGGLE_FAB_SIZES.baseline;
     const springConfig = prefersReduced ? SPRING_REDUCED : SPRING_NORMAL;
     const checkedProgress = useSpring(expanded ? 1 : 0, springConfig);
-    React31.useEffect(() => {
+    React38.useEffect(() => {
       checkedProgress.set(expanded ? 1 : 0);
     }, [expanded, checkedProgress]);
     const borderRadius = useTransform(
@@ -5645,12 +6628,12 @@ var ToggleFABComponent = React31.forwardRef(
       [0, 1],
       [`${sizeTokens.initialRadius}px`, `${sizeTokens.finalRadius}px`]
     );
-    const [iconProgress, setIconProgress] = React31.useState(expanded ? 1 : 0);
-    React31.useEffect(() => {
+    const [iconProgress, setIconProgress] = React38.useState(expanded ? 1 : 0);
+    React38.useEffect(() => {
       return checkedProgress.on("change", setIconProgress);
     }, [checkedProgress]);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
-    const handleClick = React31.useCallback(() => {
+    const handleClick = React38.useCallback(() => {
       onToggle(!expanded);
     }, [expanded, onToggle]);
     return /* @__PURE__ */ jsxs(
@@ -5699,7 +6682,7 @@ var ToggleFABComponent = React31.forwardRef(
   }
 );
 ToggleFABComponent.displayName = "ToggleFAB";
-var ToggleFAB = React31.memo(ToggleFABComponent);
+var ToggleFAB = React38.memo(ToggleFABComponent);
 function FABMenuItem({
   icon,
   label,
@@ -5712,7 +6695,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.useCallback(
+  const handleClick = React38.useCallback(
     (e) => {
       if (disabled) {
         e.preventDefault();
@@ -5722,7 +6705,7 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  const handleKeyDown = React31.useCallback(
+  const handleKeyDown = React38.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -5789,13 +6772,13 @@ function FABMenu({
   focusLast = true,
   "aria-label": ariaLabel
 }) {
-  const fabId = React31.useId();
-  const menuId = React31.useId();
-  const toggleRef = React31.useRef(null);
-  const itemRefs = React31.useRef([]);
-  const [focusedIndex, setFocusedIndex] = React31.useState(-1);
-  const reversedItems = React31.useMemo(() => [...items].reverse(), [items]);
-  const focusItem = React31.useCallback((index) => {
+  const fabId = React38.useId();
+  const menuId = React38.useId();
+  const toggleRef = React38.useRef(null);
+  const itemRefs = React38.useRef([]);
+  const [focusedIndex, setFocusedIndex] = React38.useState(-1);
+  const reversedItems = React38.useMemo(() => [...items].reverse(), [items]);
+  const focusItem = React38.useCallback((index) => {
     var _a;
     const clampedIndex = Math.max(
       0,
@@ -5804,8 +6787,8 @@ function FABMenu({
     setFocusedIndex(clampedIndex);
     (_a = itemRefs.current[clampedIndex]) == null ? void 0 : _a.focus();
   }, []);
-  const wasExpandedRef = React31.useRef(false);
-  React31.useEffect(() => {
+  const wasExpandedRef = React38.useRef(false);
+  React38.useEffect(() => {
     var _a;
     if (expanded) {
       wasExpandedRef.current = true;
@@ -5820,7 +6803,7 @@ function FABMenu({
     wasExpandedRef.current = false;
     setFocusedIndex(-1);
   }, [expanded, focusLast, items.length, focusItem]);
-  const handleMenuKeyDown = React31.useCallback(
+  const handleMenuKeyDown = React38.useCallback(
     (e) => {
       if (!expanded) return;
       const lastIndex = items.length - 1;
@@ -5881,7 +6864,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",
@@ -5944,7 +6927,7 @@ function FABMenu({
     )
   ] });
 }
-var NavigationRailContext = React31.createContext({ variant: "collapsed", labelVisibility: "labeled", xr: false });
+var NavigationRailContext = React38.createContext({ variant: "collapsed", labelVisibility: "labeled", xr: false });
 var MD3_MODAL_TRANSITION = {
   type: "tween",
   ease: [0.05, 0.7, 0.1, 1],
@@ -5980,9 +6963,9 @@ var railContainerVariants = cva(
   }
 );
 function cloneIconWithFill(icon, selected) {
-  if (!React31.isValidElement(icon)) return icon;
+  if (!React38.isValidElement(icon)) return icon;
   if (icon.type === Icon) {
-    return React31.cloneElement(
+    return React38.cloneElement(
       icon,
       { fill: selected ? 1 : 0, animateFill: true }
     );
@@ -6010,11 +6993,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
     }
   );
 }
@@ -6040,7 +7023,7 @@ function IconContainer({ selected, badge, children }) {
     }
   );
 }
-var NavigationRailItemComponent = React31.forwardRef(
+var NavigationRailItemComponent = React38.forwardRef(
   ({
     selected,
     icon,
@@ -6051,18 +7034,18 @@ var NavigationRailItemComponent = React31.forwardRef(
     className,
     "aria-label": ariaLabelProp
   }, ref) => {
-    const { variant, labelVisibility } = React31.useContext(
+    const { variant, labelVisibility } = React38.useContext(
       NavigationRailContext
     );
     const isExpanded = variant === "expanded" || variant === "modal";
     const isModal = variant === "modal";
     const enableLayout = !isModal;
-    const activePillId = `rail-pill-${React31.useId()}`;
+    const activePillId = `rail-pill-${React38.useId()}`;
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
     });
     const showLabel = isExpanded || labelVisibility === "labeled" || labelVisibility === "auto" && selected;
-    const handleClick = React31.useCallback(
+    const handleClick = React38.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -6164,9 +7147,9 @@ var NavigationRailItemComponent = React31.forwardRef(
   }
 );
 NavigationRailItemComponent.displayName = "NavigationRailItem";
-var NavigationRailItem = React31.memo(NavigationRailItemComponent);
+var NavigationRailItem = React38.memo(NavigationRailItemComponent);
 function useRoving(navRef) {
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     if (!navRef.current) return;
     const items = getMenuItems(navRef.current);
     const selected = items.find(
@@ -6176,7 +7159,7 @@ function useRoving(navRef) {
     const firstFocusable = selected != null ? selected : items[0];
     if (firstFocusable) firstFocusable.tabIndex = 0;
   }, [navRef]);
-  return React31.useCallback(
+  return React38.useCallback(
     (e) => {
       if (!navRef.current) return;
       const items = getMenuItems(navRef.current);
@@ -6204,7 +7187,7 @@ function useRoving(navRef) {
     [navRef]
   );
 }
-var NavigationRailComponent = React31.forwardRef(
+var NavigationRailComponent = React38.forwardRef(
   ({
     variant = "collapsed",
     labelVisibility = "labeled",
@@ -6224,9 +7207,9 @@ var NavigationRailComponent = React31.forwardRef(
     const xrMode = xr === "spatialized" ? "spatialized" : "contained";
     const isSpatial = isXr && xrMode === "spatialized";
     const applyAnimation = !isXr || !isSpatial;
-    const navRef = React31.useRef(null);
+    const navRef = React38.useRef(null);
     const handleKeyDown = useRoving(navRef);
-    const setRefs = React31.useCallback(
+    const setRefs = React38.useCallback(
       (node) => {
         navRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -6319,7 +7302,7 @@ var NavigationRailComponent = React31.forwardRef(
               children: fab
             }
           ),
-          React31.cloneElement(
+          React38.cloneElement(
             navElement,
             {
               className: cn(navBaseClasses, "pointer-events-auto")
@@ -6357,13 +7340,13 @@ var NavigationRailComponent = React31.forwardRef(
   }
 );
 NavigationRailComponent.displayName = "NavigationRail";
-var NavigationRail = React31.memo(NavigationRailComponent);
+var NavigationRail = React38.memo(NavigationRailComponent);
 var MD3_FAST_EFFECTS2 = [0.3, 0, 1, 1];
-var RadioGroupContext = React31.createContext(
+var RadioGroupContext = React38.createContext(
   null
 );
 function useMergedRef3(externalRef, internalRef) {
-  return React31.useCallback(
+  return React38.useCallback(
     (node) => {
       internalRef.current = node;
       if (!externalRef) return;
@@ -6376,7 +7359,7 @@ function useMergedRef3(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var RadioVisual = React31.memo(function RadioVisual2({
+var RadioVisual = React38.memo(function RadioVisual2({
   isSelected,
   disabled,
   error,
@@ -6429,7 +7412,7 @@ var RadioVisual = React31.memo(function RadioVisual2({
     }
   );
 });
-var RadioButtonComponent = React31.forwardRef(
+var RadioButtonComponent = React38.forwardRef(
   ({
     selected,
     defaultSelected = false,
@@ -6448,23 +7431,23 @@ var RadioButtonComponent = React31.forwardRef(
     required: requiredProp
   }, ref) => {
     var _a, _b;
-    const group = React31.useContext(RadioGroupContext);
+    const group = React38.useContext(RadioGroupContext);
     const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-    const generatedId = React31.useId();
+    const generatedId = React38.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.useState(defaultSelected);
+    const [internalSelected, setInternalSelected] = React38.useState(defaultSelected);
     const isControlled = selected !== void 0;
     const isSelected = group ? group.selectedValue === value : isControlled ? selected != null ? selected : false : internalSelected;
-    const [ripples, setRipples] = React31.useState([]);
-    const removeRipple = React31.useCallback(
+    const [ripples, setRipples] = React38.useState([]);
+    const removeRipple = React38.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
-    const onPointerDown = React31.useCallback(
+    const onPointerDown = React38.useCallback(
       (e) => {
         if (disabled) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -6478,12 +7461,12 @@ var RadioButtonComponent = React31.forwardRef(
       },
       [disabled]
     );
-    const [isHovered, setIsHovered] = React31.useState(false);
-    const onPointerEnter = React31.useCallback(() => {
+    const [isHovered, setIsHovered] = React38.useState(false);
+    const onPointerEnter = React38.useCallback(() => {
       if (!disabled) setIsHovered(true);
     }, [disabled]);
-    const onPointerLeave = React31.useCallback(() => setIsHovered(false), []);
-    const handleChange = React31.useCallback(
+    const onPointerLeave = React38.useCallback(() => setIsHovered(false), []);
+    const handleChange = React38.useCallback(
       (_e) => {
         if (disabled || onClick === null) return;
         if (group) {
@@ -6497,7 +7480,7 @@ var RadioButtonComponent = React31.forwardRef(
       },
       [disabled, onClick, group, value, isControlled]
     );
-    const inputRef = React31.useRef(null);
+    const inputRef = React38.useRef(null);
     const mergedRef = useMergedRef3(ref, inputRef);
     const stateLayerBg = error ? "before:bg-m3-error" : "before:bg-m3-primary";
     const stateLayerClass = cn(
@@ -6608,8 +7591,8 @@ var RadioButtonComponent = React31.forwardRef(
   }
 );
 RadioButtonComponent.displayName = "RadioButton";
-var RadioButton = React31.memo(RadioButtonComponent);
-var RadioGroupComponent = React31.forwardRef(
+var RadioButton = React38.memo(RadioButtonComponent);
+var RadioGroupComponent = React38.forwardRef(
   ({
     name,
     value: valueProp,
@@ -6624,19 +7607,19 @@ var RadioGroupComponent = React31.forwardRef(
     children,
     className
   }, ref) => {
-    const [internalValue, setInternalValue] = React31.useState(defaultValue);
+    const [internalValue, setInternalValue] = React38.useState(defaultValue);
     const isControlled = valueProp !== void 0;
     const selectedValue = isControlled ? valueProp : internalValue;
-    const handleValueChange = React31.useCallback(
+    const handleValueChange = React38.useCallback(
       (val) => {
         if (!isControlled) setInternalValue(val);
         onValueChange == null ? void 0 : onValueChange(val);
       },
       [isControlled, onValueChange]
     );
-    const groupRef = React31.useRef(null);
+    const groupRef = React38.useRef(null);
     const mergedRef = useMergedRef3(ref, groupRef);
-    const onKeyDown = React31.useCallback(
+    const onKeyDown = React38.useCallback(
       (e) => {
         var _a, _b;
         if (disabled) return;
@@ -6660,7 +7643,7 @@ var RadioGroupComponent = React31.forwardRef(
       },
       [disabled, handleValueChange]
     );
-    const contextValue = React31.useMemo(
+    const contextValue = React38.useMemo(
       () => ({
         name,
         selectedValue,
@@ -6695,7 +7678,7 @@ var RadioGroupComponent = React31.forwardRef(
   }
 );
 RadioGroupComponent.displayName = "RadioGroup";
-var RadioGroup2 = React31.memo(RadioGroupComponent);
+var RadioGroup = React38.memo(RadioGroupComponent);
 function useSearchKeyboard({
   active,
   onActiveChange,
@@ -6704,14 +7687,14 @@ function useSearchKeyboard({
   itemCount,
   onSelectSuggestion
 }) {
-  const [activeIndex, setActiveIndex] = React31.useState(-1);
-  const resetKeyRef = React31.useRef(`${active}:${query}`);
+  const [activeIndex, setActiveIndex] = React38.useState(-1);
+  const resetKeyRef = React38.useRef(`${active}:${query}`);
   const currentKey = `${active}:${query}`;
   if (resetKeyRef.current !== currentKey) {
     resetKeyRef.current = currentKey;
     setActiveIndex(-1);
   }
-  const handleKeyDown = React31.useCallback(
+  const handleKeyDown = React38.useCallback(
     (e) => {
       if (!active) return;
       switch (e.key) {
@@ -6751,7 +7734,7 @@ function useSearchKeyboard({
       query
     ]
   );
-  const resetActiveIndex = React31.useCallback(() => {
+  const resetActiveIndex = React38.useCallback(() => {
     setActiveIndex(-1);
   }, []);
   return { activeIndex, handleKeyDown, resetActiveIndex };
@@ -6839,10 +7822,10 @@ function AnimatedPlaceholder({
   className
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const containerRef = React31.useRef(null);
-  const spanRef = React31.useRef(null);
-  const [xOffset, setXOffset] = React31.useState(0);
-  const recalculate = React31.useCallback(() => {
+  const containerRef = React38.useRef(null);
+  const spanRef = React38.useRef(null);
+  const [xOffset, setXOffset] = React38.useState(0);
+  const recalculate = React38.useCallback(() => {
     const container = containerRef.current;
     const span = spanRef.current;
     if (!container || !span || textAlign === "left") {
@@ -6857,10 +7840,10 @@ function AnimatedPlaceholder({
       setXOffset(Math.max(0, containerWidth - textWidth));
     }
   }, [textAlign]);
-  React31.useLayoutEffect(() => {
+  React38.useLayoutEffect(() => {
     recalculate();
   }, [recalculate]);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(recalculate);
@@ -6929,10 +7912,10 @@ function SearchBar({
   activeIndex
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const inputRef = React31.useRef(null);
-  const prevActiveRef = React31.useRef(active);
-  const isRestoringFocusRef = React31.useRef(false);
-  React31.useEffect(() => {
+  const inputRef = React38.useRef(null);
+  const prevActiveRef = React38.useRef(active);
+  const isRestoringFocusRef = React38.useRef(false);
+  React38.useEffect(() => {
     var _a;
     let rafId;
     if (prevActiveRef.current === true && active === false) {
@@ -7051,7 +8034,7 @@ function SearchBar({
     ) })
   );
 }
-var SearchContext = React31.createContext(null);
+var SearchContext = React38.createContext(null);
 function SearchProvider({
   children,
   value
@@ -7059,7 +8042,7 @@ function SearchProvider({
   return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
 }
 function useSearch() {
-  const context = React31.useContext(SearchContext);
+  const context = React38.useContext(SearchContext);
   if (!context) {
     return { listboxId: "", activeIndex: -1 };
   }
@@ -7086,7 +8069,7 @@ function useClickOutside(handler, enabled = true) {
   return ref;
 }
 function useSearchViewFocus(inputRef, active) {
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     if (!active) return;
     let raf2;
     const raf1 = requestAnimationFrame(() => {
@@ -7160,7 +8143,7 @@ function SearchViewDocked({
   activeIndex
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const inputRef = React31.useRef(null);
+  const inputRef = React38.useRef(null);
   useSearchViewFocus(inputRef, active);
   const dropdownRef = useClickOutside(() => {
     onActiveChange(false);
@@ -7306,10 +8289,10 @@ function SearchViewFullScreen({
   activeIndex
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const inputRef = React31.useRef(null);
+  const inputRef = React38.useRef(null);
   useSearchViewFocus(inputRef, active);
-  const [mounted, setMounted] = React31.useState(false);
-  React31.useEffect(() => {
+  const [mounted, setMounted] = React38.useState(false);
+  React38.useEffect(() => {
     setMounted(true);
   }, []);
   const handleFormSubmit = (e) => {
@@ -7467,10 +8450,10 @@ function SearchComponent({
   className,
   viewClassName
 }) {
-  const generatedId = React31.useId();
+  const generatedId = React38.useId();
   const searchId = id != null ? id : generatedId;
   const listboxId = `${searchId}-listbox`;
-  const itemCount = React31.Children.count(children);
+  const itemCount = React38.Children.count(children);
   const { activeIndex, handleKeyDown } = useSearchKeyboard({
     active,
     onActiveChange,
@@ -7706,7 +8689,7 @@ var SLIDER_INDICATOR_TRANSITION = {
   stiffness: 450,
   damping: 32
 };
-var ValueIndicator = React31.memo(function ValueIndicator2({
+var ValueIndicator = React38.memo(function ValueIndicator2({
   value,
   visible,
   orientation,
@@ -7753,7 +8736,7 @@ var ValueIndicator = React31.memo(function ValueIndicator2({
     "value-indicator"
   ) });
 });
-var SliderThumb = React31.memo(function SliderThumb2({
+var SliderThumb = React38.memo(function SliderThumb2({
   value,
   percent,
   min,
@@ -7785,11 +8768,11 @@ var SliderThumb = React31.memo(function SliderThumb2({
     [posTarget]: `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`
   };
   const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-  const [isDragging, setIsDragging] = React31.useState(false);
-  const [isHovered, setIsHovered] = React31.useState(false);
-  const [isFocused, setIsFocused] = React31.useState(false);
-  const pointerIdRef = React31.useRef(null);
-  const thumbRef = React31.useRef(null);
+  const [isDragging, setIsDragging] = React38.useState(false);
+  const [isHovered, setIsHovered] = React38.useState(false);
+  const [isFocused, setIsFocused] = React38.useState(false);
+  const pointerIdRef = React38.useRef(null);
+  const thumbRef = React38.useRef(null);
   const showIndicator = showValueIndicator && (isDragging || isHovered || isFocused);
   const positionStyle = isHorizontal ? __spreadProps(__spreadValues({
     position: "absolute"
@@ -7804,7 +8787,7 @@ var SliderThumb = React31.memo(function SliderThumb2({
     transform: "translate(-50%, 50%)",
     zIndex
   });
-  const getDeltaFromPointer = React31.useCallback(
+  const getDeltaFromPointer = React38.useCallback(
     (e) => {
       const trackEl = trackRef.current;
       if (!trackEl) return percent;
@@ -7831,7 +8814,7 @@ var SliderThumb = React31.memo(function SliderThumb2({
     },
     [isHorizontal, max, min, percent, step, trackRef, trackSize]
   );
-  const handlePointerDown = React31.useCallback(
+  const handlePointerDown = React38.useCallback(
     (e) => {
       if (disabled) return;
       e.preventDefault();
@@ -7842,7 +8825,7 @@ var SliderThumb = React31.memo(function SliderThumb2({
     },
     [disabled]
   );
-  const handlePointerMove = React31.useCallback(
+  const handlePointerMove = React38.useCallback(
     (e) => {
       if (!isDragging || e.pointerId !== pointerIdRef.current) return;
       const newValue = getDeltaFromPointer(e.nativeEvent);
@@ -7850,7 +8833,7 @@ var SliderThumb = React31.memo(function SliderThumb2({
     },
     [isDragging, getDeltaFromPointer, onValueChange]
   );
-  const handlePointerUp = React31.useCallback(
+  const handlePointerUp = React38.useCallback(
     (e) => {
       if (e.pointerId !== pointerIdRef.current) return;
       e.currentTarget.releasePointerCapture(e.pointerId);
@@ -7860,7 +8843,7 @@ var SliderThumb = React31.memo(function SliderThumb2({
     },
     [onValueChangeEnd, value]
   );
-  const handleKeyDown = React31.useCallback(
+  const handleKeyDown = React38.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Home") {
@@ -7964,7 +8947,7 @@ var SliderThumb = React31.memo(function SliderThumb2({
     }
   );
 });
-var RangeTrack = React31.memo(function RangeTrack2({
+var RangeTrack = React38.memo(function RangeTrack2({
   startPercent,
   endPercent,
   trackSize,
@@ -8209,7 +9192,7 @@ var RangeTrack = React31.memo(function RangeTrack2({
     }
   );
 });
-var RangeSliderComponent = React31.forwardRef(
+var RangeSliderComponent = React38.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -8233,7 +9216,7 @@ var RangeSliderComponent = React31.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.useState([
+    const [internalValue, setInternalValue] = React38.useState([
       defaultStart,
       defaultEnd
     ]);
@@ -8247,10 +9230,10 @@ var RangeSliderComponent = React31.forwardRef(
     const endValue = snap(coerce(resolvedValue[1]));
     const startPercent = toPercent(startValue);
     const endPercent = toPercent(endValue);
-    const [topThumb, setTopThumb] = React31.useState("end");
-    const trackRef = React31.useRef(null);
+    const [topThumb, setTopThumb] = React38.useState("end");
+    const trackRef = React38.useRef(null);
     const minGap = step > 0 ? step : (max - min) / 1e3;
-    const handleStartChange = React31.useCallback(
+    const handleStartChange = React38.useCallback(
       (newStart) => {
         setTopThumb("start");
         const clamped = Math.min(newStart, endValue - minGap);
@@ -8262,7 +9245,7 @@ var RangeSliderComponent = React31.forwardRef(
       },
       [controlledValue, coerce, endValue, minGap, onValueChange, snap]
     );
-    const handleEndChange = React31.useCallback(
+    const handleEndChange = React38.useCallback(
       (newEnd) => {
         setTopThumb("end");
         const clamped = Math.max(newEnd, startValue + minGap);
@@ -8274,15 +9257,15 @@ var RangeSliderComponent = React31.forwardRef(
       },
       [controlledValue, coerce, minGap, onValueChange, snap, startValue]
     );
-    const handleStartChangeEnd = React31.useCallback(
+    const handleStartChangeEnd = React38.useCallback(
       (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([v, endValue]),
       [endValue, onValueChangeEnd]
     );
-    const handleEndChangeEnd = React31.useCallback(
+    const handleEndChangeEnd = React38.useCallback(
       (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([startValue, v]),
       [onValueChangeEnd, startValue]
     );
-    const handleTrackPointerDown = React31.useCallback(
+    const handleTrackPointerDown = React38.useCallback(
       (e) => {
         if (disabled) return;
         const trackEl = trackRef.current;
@@ -8326,7 +9309,7 @@ var RangeSliderComponent = React31.forwardRef(
         trackSize
       ]
     );
-    const id = React31.useId();
+    const id = React38.useId();
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
       "div",
       {
@@ -8406,7 +9389,7 @@ var RangeSliderComponent = React31.forwardRef(
   }
 );
 RangeSliderComponent.displayName = "RangeSlider";
-var RangeSlider = React31.memo(RangeSliderComponent);
+var RangeSlider = React38.memo(RangeSliderComponent);
 function getHorizontalRadius(isLeading, innerR, outerR) {
   if (isLeading) {
     return {
@@ -8445,7 +9428,7 @@ var allInnerRadius = (innerR) => ({
   borderTopRightRadius: innerR,
   borderBottomRightRadius: innerR
 });
-var InsetIcon = React31.memo(function InsetIcon2({
+var InsetIcon = React38.memo(function InsetIcon2({
   icon,
   isOnActiveSegment,
   position,
@@ -8539,7 +9522,7 @@ function Ticks({
     return /* @__PURE__ */ jsx("div", { style, "aria-hidden": "true" }, tick);
   }) });
 }
-var SliderTrack = React31.memo(function SliderTrack2({
+var SliderTrack = React38.memo(function SliderTrack2({
   percent,
   trackSize,
   orientation,
@@ -8574,8 +9557,8 @@ var SliderTrack = React31.memo(function SliderTrack2({
   const gapWithThumbStr = `${thumbGap + thumbHalfWidth}px`;
   const hasAnyInsetIcon = Boolean(insetIcon || insetIconTrailing);
   const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-  const [trackWidth, setTrackWidth] = React31.useState(0);
-  React31.useLayoutEffect(() => {
+  const [trackWidth, setTrackWidth] = React38.useState(0);
+  React38.useLayoutEffect(() => {
     const el = trackRef.current;
     if (!el || !hasAnyInsetIcon) return;
     setTrackWidth(isHorizontal ? el.clientWidth : el.clientHeight);
@@ -8592,8 +9575,8 @@ var SliderTrack = React31.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.useRef(1 - percent <= iconThreshold);
-  const leadingActiveRef = React31.useRef(percent > iconThreshold);
+  const trailingActiveRef = React38.useRef(1 - percent <= iconThreshold);
+  const leadingActiveRef = React38.useRef(percent > iconThreshold);
   const trailingPercent = 1 - percent;
   if (trailingActiveRef.current) {
     if (trailingPercent > iconThreshold + HYSTERESIS_GAP) {
@@ -9100,7 +10083,7 @@ var SliderTrack = React31.memo(function SliderTrack2({
     }
   );
 });
-var SliderComponent = React31.forwardRef(
+var SliderComponent = React38.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -9129,7 +10112,7 @@ var SliderComponent = React31.forwardRef(
     const isHorizontal = orientation === "horizontal";
     const midpoint = min + (max - min) / 2;
     const initialValue = defaultValue != null ? defaultValue : midpoint;
-    const [internalValue, setInternalValue] = React31.useState(initialValue);
+    const [internalValue, setInternalValue] = React38.useState(initialValue);
     const resolvedValue = controlledValue !== void 0 ? controlledValue : internalValue;
     const { coerce, snap, toPercent, ticks } = useSliderMath({
       min,
@@ -9138,8 +10121,8 @@ var SliderComponent = React31.forwardRef(
     });
     const safeValue = snap(coerce(resolvedValue));
     const percent = toPercent(safeValue);
-    const trackRef = React31.useRef(null);
-    const handleValueChange = React31.useCallback(
+    const trackRef = React38.useRef(null);
+    const handleValueChange = React38.useCallback(
       (newValue) => {
         const clamped = snap(coerce(newValue));
         if (controlledValue === void 0) {
@@ -9149,13 +10132,13 @@ var SliderComponent = React31.forwardRef(
       },
       [coerce, controlledValue, onValueChange, snap]
     );
-    const handleValueChangeEnd = React31.useCallback(
+    const handleValueChangeEnd = React38.useCallback(
       (newValue) => {
         onValueChangeEnd == null ? void 0 : onValueChangeEnd(snap(coerce(newValue)));
       },
       [coerce, onValueChangeEnd, snap]
     );
-    const handleTrackPointerDown = React31.useCallback(
+    const handleTrackPointerDown = React38.useCallback(
       (e) => {
         if (disabled) return;
         const trackEl = trackRef.current;
@@ -9190,7 +10173,7 @@ var SliderComponent = React31.forwardRef(
         trackSize
       ]
     );
-    const id = React31.useId();
+    const id = React38.useId();
     const thumbId = `slider-thumb-${id}`;
     const supportsInsetIcon = !isCentered && SliderTokens.trackSizes[trackSize] >= 40;
     const hasAnyInsetIcon = !!(insetIcon || insetIconTrailing);
@@ -9262,7 +10245,7 @@ var SliderComponent = React31.forwardRef(
   }
 );
 SliderComponent.displayName = "Slider";
-var Slider = React31.memo(SliderComponent);
+var Slider = React38.memo(SliderComponent);
 var DURATION_MAP = {
   short: 4e3,
   long: 7e3
@@ -9308,9 +10291,9 @@ function toSnackbarData(item) {
   return { id: generateId(), visuals: item.visuals, resolve: item.resolve };
 }
 function useSnackbarState() {
-  const [current, setCurrent] = React31.useState(null);
-  const queueRef = React31.useRef([]);
-  const showSnackbar = React31.useCallback(
+  const [current, setCurrent] = React38.useState(null);
+  const queueRef = React38.useRef([]);
+  const showSnackbar = React38.useCallback(
     (visuals) => {
       return new Promise((resolve) => {
         const item = { visuals, resolve };
@@ -9323,14 +10306,14 @@ function useSnackbarState() {
     },
     []
   );
-  const _dismiss = React31.useCallback((result) => {
+  const _dismiss = React38.useCallback((result) => {
     setCurrent((prev) => {
       if (prev) prev.resolve(result);
       const next = queueRef.current.shift();
       return next ? toSnackbarData(next) : null;
     });
   }, []);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     return () => {
       for (const item of queueRef.current) {
         item.resolve(RESULT.DISMISSED);
@@ -9340,7 +10323,7 @@ function useSnackbarState() {
   }, []);
   return { current, showSnackbar, _dismiss };
 }
-var Snackbar = React31.memo(function Snackbar2({
+var Snackbar = React38.memo(function Snackbar2({
   data,
   className
 }) {
@@ -9354,15 +10337,15 @@ var Snackbar = React31.memo(function Snackbar2({
   } = visuals;
   const reducedMotion = useReducedMotion();
   const durationMs = resolveDuration(duration);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     const timer = setTimeout(() => resolve(RESULT.DISMISSED), durationMs);
     return () => clearTimeout(timer);
   }, [resolve, durationMs]);
-  const handleAction = React31.useCallback(
+  const handleAction = React38.useCallback(
     () => resolve(RESULT.ACTION),
     [resolve]
   );
-  const handleDismiss = React31.useCallback(
+  const handleDismiss = React38.useCallback(
     () => resolve(RESULT.DISMISSED),
     [resolve]
   );
@@ -9430,7 +10413,7 @@ var Snackbar = React31.memo(function Snackbar2({
 Snackbar.displayName = "Snackbar";
 function SnackbarHost({ state, className }) {
   const { current, _dismiss } = state;
-  const wrappedData = React31.useMemo(() => {
+  const wrappedData = React38.useMemo(() => {
     if (!current) return null;
     return __spreadProps(__spreadValues({}, current), { resolve: _dismiss });
   }, [current, _dismiss]);
@@ -9448,12 +10431,12 @@ function SnackbarHost({ state, className }) {
   ) });
 }
 SnackbarHost.displayName = "SnackbarHost";
-var SnackbarContext = React31.createContext(
+var SnackbarContext = React38.createContext(
   null
 );
 function SnackbarProvider({ children }) {
   const state = useSnackbarState();
-  const contextValue = React31.useMemo(
+  const contextValue = React38.useMemo(
     () => ({ showSnackbar: state.showSnackbar }),
     [state.showSnackbar]
   );
@@ -9464,7 +10447,7 @@ function SnackbarProvider({ children }) {
 }
 SnackbarProvider.displayName = "SnackbarProvider";
 function useSnackbar() {
-  const ctx = React31.useContext(SnackbarContext);
+  const ctx = React38.useContext(SnackbarContext);
   if (!ctx) {
     throw new Error("useSnackbar must be used within a <SnackbarProvider>.");
   }
@@ -9527,7 +10510,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
@@ -9568,7 +10551,7 @@ function isIconVisible(thumbContent, icons, showOnlySelectedIcon, checked) {
   if (icons) return true;
   return showOnlySelectedIcon && checked;
 }
-var SwitchVisual = React31.memo(function SwitchVisual2({
+var SwitchVisual = React38.memo(function SwitchVisual2({
   checked,
   disabled,
   isPressed,
@@ -9659,9 +10642,9 @@ var SwitchVisual = React31.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__ */ jsx(AnimatePresence, { mode: "wait", children: showIcon && /* @__PURE__ */ jsx(
@@ -9688,7 +10671,7 @@ var SwitchVisual = React31.memo(function SwitchVisual2({
     }
   );
 });
-var SwitchComponent = React31.forwardRef(
+var SwitchComponent = React38.forwardRef(
   ({
     checked,
     onCheckedChange,
@@ -9706,16 +10689,16 @@ var SwitchComponent = React31.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-    const [isPressed, setIsPressed] = React31.useState(false);
-    const [isHovered, setIsHovered] = React31.useState(false);
-    const [isFocused, setIsFocused] = React31.useState(false);
-    const [ripples, setRipples] = React31.useState([]);
-    const generatedId = React31.useId();
+    const [isPressed, setIsPressed] = React38.useState(false);
+    const [isHovered, setIsHovered] = React38.useState(false);
+    const [isFocused, setIsFocused] = React38.useState(false);
+    const [ripples, setRipples] = React38.useState([]);
+    const generatedId = React38.useId();
     const switchId = label ? `switch-${generatedId}` : void 0;
-    const handleClick = React31.useCallback(() => {
+    const handleClick = React38.useCallback(() => {
       if (!disabled) onCheckedChange(!checked);
     }, [disabled, checked, onCheckedChange]);
-    const handleKeyDown = React31.useCallback(
+    const handleKeyDown = React38.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === " " || e.key === "Enter") {
@@ -9725,7 +10708,7 @@ var SwitchComponent = React31.forwardRef(
       },
       [disabled, checked, onCheckedChange]
     );
-    const handlePointerDown = React31.useCallback(
+    const handlePointerDown = React38.useCallback(
       (e) => {
         if (disabled) return;
         setIsPressed(true);
@@ -9740,19 +10723,19 @@ var SwitchComponent = React31.forwardRef(
       },
       [disabled]
     );
-    const handlePointerUp = React31.useCallback(() => {
+    const handlePointerUp = React38.useCallback(() => {
       setIsPressed(false);
     }, []);
-    const handlePointerEnter = React31.useCallback(() => {
+    const handlePointerEnter = React38.useCallback(() => {
       if (!disabled) setIsHovered(true);
     }, [disabled]);
-    const handlePointerLeave = React31.useCallback(() => {
+    const handlePointerLeave = React38.useCallback(() => {
       setIsHovered(false);
       setIsPressed(false);
     }, []);
-    const handleFocus = React31.useCallback(() => setIsFocused(true), []);
-    const handleBlur = React31.useCallback(() => setIsFocused(false), []);
-    const removeRipple = React31.useCallback(
+    const handleFocus = React38.useCallback(() => setIsFocused(true), []);
+    const handleBlur = React38.useCallback(() => setIsFocused(false), []);
+    const removeRipple = React38.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
@@ -9837,10 +10820,54 @@ var SwitchComponent = React31.forwardRef(
   }
 );
 SwitchComponent.displayName = "Switch";
-var Switch = React31.memo(SwitchComponent);
-var TabsContext = React31.createContext(null);
+var Switch = React38.memo(SwitchComponent);
+var typographyVariants = 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.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, as: Component } = _b, props = __objRest(_b, ["className", "variant", "as"]);
+    const defaultComponent = React38.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__ */ jsx(
+      Tag,
+      __spreadValues({
+        ref,
+        className: cn(typographyVariants({ variant, className }))
+      }, props)
+    );
+  }
+);
+Text.displayName = "Text";
+var TabsContext = React38.createContext(null);
 function useTabsContext() {
-  const ctx = React31.useContext(TabsContext);
+  const ctx = React38.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>."
@@ -9848,7 +10875,7 @@ function useTabsContext() {
   }
   return ctx;
 }
-var TabsComponent = React31.forwardRef(
+var TabsComponent = React38.forwardRef(
   ({
     value: controlledValue,
     defaultValue = "",
@@ -9857,35 +10884,35 @@ var TabsComponent = React31.forwardRef(
     children,
     className
   }, ref) => {
-    const [internalValue, setInternalValue] = React31.useState(defaultValue);
+    const [internalValue, setInternalValue] = React38.useState(defaultValue);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const handleValueChange = React31.useCallback(
+    const handleValueChange = React38.useCallback(
       (newValue) => {
         if (!isControlled) setInternalValue(newValue);
         onValueChange == null ? void 0 : onValueChange(newValue);
       },
       [isControlled, onValueChange]
     );
-    const [focusedValue, setFocusedValue] = React31.useState(value);
-    React31.useEffect(() => {
+    const [focusedValue, setFocusedValue] = React38.useState(value);
+    React38.useEffect(() => {
       setFocusedValue(value);
     }, [value]);
-    const [tabValues, setTabValues] = React31.useState([]);
-    const registerTab = React31.useCallback((tabValue) => {
+    const [tabValues, setTabValues] = React38.useState([]);
+    const registerTab = React38.useCallback((tabValue) => {
       setTabValues((prev) => {
         if (prev.includes(tabValue)) return prev;
         return [...prev, tabValue];
       });
     }, []);
-    const unregisterTab = React31.useCallback((tabValue) => {
+    const unregisterTab = React38.useCallback((tabValue) => {
       setTabValues((prev) => prev.filter((v) => v !== tabValue));
     }, []);
-    const hasAutoSelected = React31.useRef(false);
-    const [disabledValues, setDisabledValues] = React31.useState(
+    const hasAutoSelected = React38.useRef(false);
+    const [disabledValues, setDisabledValues] = React38.useState(
       /* @__PURE__ */ new Set()
     );
-    const markTabDisabled = React31.useCallback(
+    const markTabDisabled = React38.useCallback(
       (tabValue, disabled) => {
         setDisabledValues((prev) => {
           const next = new Set(prev);
@@ -9899,7 +10926,7 @@ var TabsComponent = React31.forwardRef(
       },
       []
     );
-    React31.useEffect(() => {
+    React38.useEffect(() => {
       if (isControlled || hasAutoSelected.current || tabValues.length === 0) {
         return;
       }
@@ -9914,9 +10941,9 @@ var TabsComponent = React31.forwardRef(
         setFocusedValue(firstEnabled);
       }
     }, [tabValues, disabledValues, isControlled, value]);
-    const id = React31.useId();
+    const id = React38.useId();
     const layoutGroupId = `tabs-${id}`;
-    const contextValue = React31.useMemo(
+    const contextValue = React38.useMemo(
       () => ({
         value,
         onValueChange: handleValueChange,
@@ -9947,12 +10974,12 @@ var TabsComponent = React31.forwardRef(
   }
 );
 TabsComponent.displayName = "Tabs";
-var Tabs = React31.memo(TabsComponent);
-var TabsListContext = React31.createContext(
+var Tabs = React38.memo(TabsComponent);
+var TabsListContext = React38.createContext(
   null
 );
 function useTabsListContext() {
-  const ctx = React31.useContext(TabsListContext);
+  const ctx = React38.useContext(TabsListContext);
   return ctx != null ? ctx : { variant: "primary", scrollable: false };
 }
 
@@ -10036,7 +11063,7 @@ var TABS_CONTENT_TRANSITION = {
   ease: "easeInOut"
 };
 var INDICATOR_MIN_WIDTH = 24;
-var TabComponent = React31.forwardRef(
+var TabComponent = React38.forwardRef(
   ({
     value,
     icon,
@@ -10066,9 +11093,9 @@ var TabComponent = React31.forwardRef(
     const isFocused = focusedValue === value;
     const hasIcon = icon != null;
     const isStackedIcon = hasIcon && !inlineIcon;
-    const buttonRef = React31.useRef(null);
-    const isFirstMount = React31.useRef(true);
-    const mergedRef = React31.useCallback(
+    const buttonRef = React38.useRef(null);
+    const isFirstMount = React38.useRef(true);
+    const mergedRef = React38.useCallback(
       (node) => {
         buttonRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -10076,15 +11103,15 @@ var TabComponent = React31.forwardRef(
       },
       [ref]
     );
-    React31.useEffect(() => {
+    React38.useEffect(() => {
       registerTab(value);
       return () => unregisterTab(value);
     }, [value, registerTab, unregisterTab]);
-    React31.useEffect(() => {
+    React38.useEffect(() => {
       markTabDisabled(value, disabled);
       return () => markTabDisabled(value, false);
     }, [value, disabled, markTabDisabled]);
-    const handleKeyDown = React31.useCallback(
+    const handleKeyDown = React38.useCallback(
       (e) => {
         const isRtl = buttonRef.current ? getComputedStyle(buttonRef.current).direction === "rtl" : false;
         const enabledValues = tabValues.filter((v) => !disabledValues.has(v));
@@ -10138,7 +11165,7 @@ var TabComponent = React31.forwardRef(
         autoActivate
       ]
     );
-    React31.useEffect(() => {
+    React38.useEffect(() => {
       if (isFirstMount.current) {
         isFirstMount.current = false;
         return;
@@ -10147,7 +11174,7 @@ var TabComponent = React31.forwardRef(
         buttonRef.current.focus({ preventScroll: true });
       }
     }, [isFocused]);
-    React31.useEffect(() => {
+    React38.useEffect(() => {
       if (!isActive || !scrollable || !buttonRef.current) return;
       const btn = buttonRef.current;
       let container = btn.parentElement;
@@ -10284,8 +11311,8 @@ var TabComponent = React31.forwardRef(
   }
 );
 TabComponent.displayName = "Tab";
-var Tab = React31.memo(TabComponent);
-var TabsContentComponent = React31.forwardRef(
+var Tab = React38.memo(TabComponent);
+var TabsContentComponent = React38.forwardRef(
   ({ value, className, children }, ref) => {
     var _a;
     const { value: selectedValue, layoutGroupId } = useTabsContext();
@@ -10319,8 +11346,8 @@ var TabsContentComponent = React31.forwardRef(
   }
 );
 TabsContentComponent.displayName = "TabsContent";
-var TabsContent = React31.memo(TabsContentComponent);
-var TabsListComponent = React31.forwardRef(
+var TabsContent = React38.memo(TabsContentComponent);
+var TabsListComponent = React38.forwardRef(
   ({
     variant,
     scrollable = false,
@@ -10331,12 +11358,12 @@ var TabsListComponent = React31.forwardRef(
   }, ref) => {
     const { layoutGroupId, value, setFocusedValue } = useTabsContext();
     const listLayoutId = `${layoutGroupId}-list`;
-    const listContextValue = React31.useMemo(
+    const listContextValue = React38.useMemo(
       () => ({ variant, scrollable }),
       [variant, scrollable]
     );
     const bgColor = backgroundColor != null ? backgroundColor : "var(--md-sys-color-surface)";
-    const handleBlur = React31.useCallback(
+    const handleBlur = React38.useCallback(
       (e) => {
         const listEl = e.currentTarget;
         if (listEl.contains(e.relatedTarget)) return;
@@ -10385,7 +11412,7 @@ var TabsListComponent = React31.forwardRef(
   }
 );
 TabsListComponent.displayName = "TabsList";
-var TabsList = React31.memo(TabsListComponent);
+var TabsList = React38.memo(TabsListComponent);
 
 // src/ui/text-field/text-field.tokens.ts
 var TF_COLORS = {
@@ -10424,7 +11451,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.memo(function ActiveIndicator2({
+var ActiveIndicator = React38.memo(function ActiveIndicator2({
   isFocused,
   isError,
   isDisabled,
@@ -10471,7 +11498,7 @@ function getLabelColor(isFloated, isFocused, isError, isDisabled) {
   if (isFloated && isFocused) return TF_COLORS.primary;
   return TF_COLORS.onSurfaceVariant;
 }
-var FloatingLabel = React31.memo(function FloatingLabel2({
+var FloatingLabel = React38.memo(function FloatingLabel2({
   text,
   isFloated,
   isFocused,
@@ -10531,7 +11558,7 @@ var FloatingLabel = React31.memo(function FloatingLabel2({
   );
 });
 FloatingLabel.displayName = "FloatingLabel";
-var LeadingIcon = React31.memo(function LeadingIcon2({
+var LeadingIcon = React38.memo(function LeadingIcon2({
   children,
   isError,
   isDisabled
@@ -10555,7 +11582,7 @@ function getOutlineColor(isFocused, isError, isHovered, isDisabled) {
   if (isHovered) return TF_COLORS.inputText;
   return TF_COLORS.outline;
 }
-var OutlineContainer = React31.memo(function OutlineContainer2({
+var OutlineContainer = React38.memo(function OutlineContainer2({
   isFloated,
   isFocused,
   isError,
@@ -10653,7 +11680,7 @@ var OutlineContainer = React31.memo(function OutlineContainer2({
   );
 });
 OutlineContainer.displayName = "OutlineContainer";
-var PrefixSuffix = React31.memo(function PrefixSuffix2({
+var PrefixSuffix = React38.memo(function PrefixSuffix2({
   text,
   type,
   visible,
@@ -10695,7 +11722,7 @@ function AnimatedText({
     motionKey
   );
 }
-var SupportingText = React31.memo(function SupportingText2({
+var SupportingText = React38.memo(function SupportingText2({
   supportingText,
   errorText,
   isError,
@@ -10806,7 +11833,7 @@ function ClearIcon() {
     }
   );
 }
-var TrailingIcon = React31.memo(function TrailingIcon2({
+var TrailingIcon = React38.memo(function TrailingIcon2({
   mode,
   children,
   value,
@@ -10872,7 +11899,7 @@ var TrailingIcon = React31.memo(function TrailingIcon2({
 });
 TrailingIcon.displayName = "TrailingIcon";
 var LINE_HEIGHT_PX = 24;
-var TextFieldComponent = React31.forwardRef(
+var TextFieldComponent = React38.forwardRef(
   ({
     // Core
     variant = "filled",
@@ -10936,30 +11963,30 @@ var TextFieldComponent = React31.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-    const generatedId = React31.useId();
+    const generatedId = React38.useId();
     const inputId = idProp != null ? idProp : `tf-${generatedId}`;
     const supportingId = `${inputId}-supporting`;
     const isControlled = valueProp !== void 0;
-    const [internalValue, setInternalValue] = React31.useState(defaultValue);
+    const [internalValue, setInternalValue] = React38.useState(defaultValue);
     const currentValue = isControlled ? valueProp : internalValue;
-    const [isFocused, setIsFocused] = React31.useState(false);
-    const [showPassword, setShowPassword] = React31.useState(false);
+    const [isFocused, setIsFocused] = React38.useState(false);
+    const [showPassword, setShowPassword] = React38.useState(false);
     const resolvedInputType = type === "password" && showPassword ? "text" : type;
-    const [nativeError, setNativeError] = React31.useState("");
-    const [labelWidth, setLabelWidth] = React31.useState(0);
+    const [nativeError, setNativeError] = React38.useState("");
+    const [labelWidth, setLabelWidth] = React38.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.useRef(null);
-    const labelSpanRef = React31.useRef(null);
-    React31.useLayoutEffect(() => {
+    const inputRef = React38.useRef(null);
+    const labelSpanRef = React38.useRef(null);
+    React38.useLayoutEffect(() => {
       if (labelSpanRef.current) {
         setLabelWidth(labelSpanRef.current.offsetWidth);
       }
     }, []);
-    React31.useLayoutEffect(() => {
+    React38.useLayoutEffect(() => {
       if (type !== "textarea" || !inputRef.current) return;
       const textarea = inputRef.current;
       if (autoResize) {
@@ -10971,7 +11998,7 @@ var TextFieldComponent = React31.forwardRef(
       }
       textarea.style.overflowY = "hidden";
     }, [type, autoResize, maxRows, currentValue]);
-    const handleValueChange = React31.useCallback(
+    const handleValueChange = React38.useCallback(
       (newValue) => {
         var _a2, _b;
         if (!isControlled) setInternalValue(newValue);
@@ -10980,7 +12007,7 @@ var TextFieldComponent = React31.forwardRef(
       },
       [isControlled]
     );
-    const handleChange = React31.useCallback(
+    const handleChange = React38.useCallback(
       (e) => {
         const newVal = e.target.value;
         handleValueChange(newVal);
@@ -10988,14 +12015,14 @@ var TextFieldComponent = React31.forwardRef(
       },
       [handleValueChange, onChange]
     );
-    const handleFocus = React31.useCallback(
+    const handleFocus = React38.useCallback(
       (e) => {
         setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [onFocus]
     );
-    const handleBlur = React31.useCallback(
+    const handleBlur = React38.useCallback(
       (e) => {
         setIsFocused(false);
         const el = inputRef.current;
@@ -11008,7 +12035,7 @@ var TextFieldComponent = React31.forwardRef(
       },
       [onBlur]
     );
-    const handleClear = React31.useCallback(() => {
+    const handleClear = React38.useCallback(() => {
       var _a2;
       handleValueChange("");
       onChange == null ? void 0 : onChange("", {
@@ -11016,12 +12043,12 @@ var TextFieldComponent = React31.forwardRef(
       });
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, [handleValueChange, onChange]);
-    const handlePasswordToggle = React31.useCallback(() => {
+    const handlePasswordToggle = React38.useCallback(() => {
       var _a2;
       setShowPassword((prev) => !prev);
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, []);
-    React31.useImperativeHandle(
+    React38.useImperativeHandle(
       ref,
       () => ({
         focus: () => {
@@ -11266,7 +12293,7 @@ var TextFieldComponent = React31.forwardRef(
   }
 );
 TextFieldComponent.displayName = "TextField";
-var TextField = React31.memo(TextFieldComponent);
+var TextField = React38.memo(TextFieldComponent);
 
 // src/ui/typography/typography-key-tokens.ts
 var TypographyKeyTokens = /* @__PURE__ */ ((TypographyKeyTokens2) => {
@@ -12027,7 +13054,8 @@ function MD3ThemeProvider({
       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]);
   useEffect(() => {
@@ -12038,9 +13066,17 @@ function MD3ThemeProvider({
       localStorage.setItem(STORAGE_KEY_MODE, mode);
     }
   }, [sourceColor, mode, persistToLocalStorage, isHydrated]);
+  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 = useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode }),
-    [sourceColor, mode]
+    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
+    [sourceColor, mode, effectiveMode]
   );
   const typographyValue = useMemo(() => {
     if (typographyProp) return typographyProp;
@@ -12072,8 +13108,8 @@ function useTheme() {
   return context;
 }
 function useThemeMode() {
-  const { mode, setMode } = useTheme();
-  return { mode, setMode };
+  const { mode, setMode, effectiveMode } = useTheme();
+  return { mode, setMode, effectiveMode };
 }
 function TableOfContents({
   items,
@@ -12711,7 +13747,7 @@ function TooltipBox({
         onKeyDown: handleKeyDown,
         "aria-label": ariaLabel,
         "aria-describedby": state.isVisible ? tooltipId : void 0,
-        children: React31.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children })
+        children: React38.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children })
       }
     ),
     mounted && createPortal(
@@ -12741,6 +13777,6 @@ function TooltipBox({
   ] });
 }
 
-export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, Badge, BadgedBox, BottomAppBar, Button, ButtonGroup, Card, Checkbox, Chip, CodeBlock, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FAB, FABMenu, FABMenuItem, FABPosition, Icon, IconButton, LargeFlexibleAppBar, LoadingIndicator, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MaterialSymbolsPreconnect, MediumFlexibleAppBar, NavigationRail, NavigationRailItem, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup2 as RadioGroup, RangeSlider, RichTooltip, Ripple, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, Switch, SwitchColors, SwitchTokens, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, TextField, ToggleFAB, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, useAppBarScroll, useRipple as useDOMRipple, useMediaQuery, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };
+export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, Badge, BadgedBox, BottomAppBar, Button, ButtonGroup, CHECK_ICON_VARIANTS, Card, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, DIVIDER_COLOR, DIVIDER_PADDING, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, GROUP_SHAPES, ITEM_SHAPE_CLASSES, Icon, IconButton, LargeFlexibleAppBar, LoadingIndicator, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, NavigationRail, NavigationRailItem, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, SubMenu, Switch, SwitchColors, SwitchTokens, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, ToggleFAB, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, VIBRANT_COLORS, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, resolveMode, useAppBarScroll, useRipple as useDOMRipple, useMediaQuery, useMenuContext, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map