@bug-on/md3-react 2.0.2 → 3.0.0

package/dist/index.mjs

@@ -1,12 +1,13 @@
 "use client";
-import * as React31 from 'react';
-import { createContext, forwardRef, useMemo, useState, useEffect, useRef, useCallback, useContext, useId, cloneElement, useLayoutEffect, createElement } 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';
@@ -212,7 +213,7 @@ function generateM3Theme(sourceColorHex, mode = "light") {
 function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
   const colors = generateM3Theme(sourceColorHex, mode);
   for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m38) => `-${m38.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);
   }
@@ -409,6 +410,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",
@@ -440,7 +1106,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 +1172,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)
-  );
-});
-DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
-var DropdownMenuItem = React31.forwardRef((_a, ref) => {
-  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
-  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,
-      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
-      ),
-      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
-      ]
-    })
+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
   );
-});
-DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuSeparator = React31.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  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.Separator,
-    __spreadValues({
-      ref,
-      className: cn("my-1 h-px bg-m3-outline-variant", className)
-    }, props)
+    m.div,
+    {
+      role: "menu",
+      "aria-orientation": "vertical",
+      onPointerEnter,
+      onPointerLeave,
+      className: cn(
+        "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"
+      ),
+      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 +1707,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 +1729,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 +1756,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 +1767,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 +1819,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 +1877,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 +2003,7 @@ function useFlexibleAppBar({
     expandedHeight
   });
   const scrollProgress = useMotionValue(0);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     scrollProgress.set(
       shouldReduceMotion ? collapsedFraction > 0.5 ? 1 : 0 : collapsedFraction
     );
@@ -1369,7 +2344,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 +2458,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 +2729,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 +2785,7 @@ var BadgeImpl = React31.forwardRef(
   }
 );
 BadgeImpl.displayName = "Badge";
-var Badge = React31.memo(BadgeImpl);
+var Badge = React38.memo(BadgeImpl);
 function BadgedBox({
   badge,
   children,
@@ -1876,11 +2851,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 +2900,7 @@ var IndeterminateSvg = React31.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React31.memo(function DeterminateSvg2({
+var DeterminateSvg = React38.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -1950,7 +2925,7 @@ var DeterminateSvg = React31.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React31.forwardRef(
+var LoadingIndicator = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -2065,7 +3040,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 +3078,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 +3095,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 +3285,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 +3301,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React31.useEffect(() => {
+  React38.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -2336,7 +3311,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 +3325,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React31.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React38.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -2426,7 +3401,7 @@ var FlatLinearTrack = React31.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React31.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React38.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -2445,13 +3420,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 +3597,7 @@ var WavyLinearTrack = React31.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React31.forwardRef(
+var LinearProgress = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -2663,10 +3638,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 +3649,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 +3731,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 +3782,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 +3797,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 };
@@ -2956,7 +3931,7 @@ function toSentenceCase(text) {
 }
 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;
@@ -3028,7 +4003,7 @@ function AnimatedIconSlot({
     }
   );
 }
-var ButtonComponent = React31.forwardRef(
+var ButtonComponent = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3077,15 +4052,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 +4069,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 === " ")) {
@@ -3157,7 +4132,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 +4156,7 @@ var ButtonComponent = React31.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React31.cloneElement(child, { children: innerContent })
+          children: React38.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -3209,7 +4184,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 +4213,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 +4234,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 +4379,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 +4408,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 +4467,7 @@ function useCardElevation(variant, disabled) {
     }
   };
 }
-var CardImpl = React31.forwardRef(
+var CardImpl = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3590,7 +4565,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 +4579,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 +4650,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 +4663,7 @@ function useMergedRef2(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var CheckboxComponent = React31.forwardRef(
+var CheckboxComponent = React38.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -3710,20 +4685,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 +4712,7 @@ var CheckboxComponent = React31.forwardRef(
       },
       [disabled]
     );
-    const handleChange = React31.useCallback(
+    const handleChange = React38.useCallback(
       (e) => {
         if (disabled) return;
         if (stateProp !== void 0) {
@@ -3763,9 +4738,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 +4865,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 +4965,7 @@ var chipVariants = cva(
     defaultVariants: { variant: "assist" }
   }
 );
-var ChipImpl = React31.forwardRef(
+var ChipImpl = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "assist",
@@ -4026,7 +5001,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 +5014,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 +5025,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 +5036,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 +5106,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 +5197,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 +5257,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 +5287,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 +5564,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 +5598,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 +5628,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 +5638,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 +5726,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 +5763,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 +5776,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 +5816,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 +5839,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 +5854,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 +5866,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 +5897,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 +5980,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 +6100,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 +6137,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 +6148,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 +6227,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 +6241,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 +6322,7 @@ function FABPosition({
     }
   );
 }
-var FABComponent = React31.forwardRef(
+var FABComponent = React38.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5392,7 +6367,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 +6377,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 +6486,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 +6551,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 +6594,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 +6612,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 +6620,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 +6674,7 @@ var ToggleFABComponent = React31.forwardRef(
   }
 );
 ToggleFABComponent.displayName = "ToggleFAB";
-var ToggleFAB = React31.memo(ToggleFABComponent);
+var ToggleFAB = React38.memo(ToggleFABComponent);
 function FABMenuItem({
   icon,
   label,
@@ -5712,7 +6687,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 +6697,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 +6764,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 +6779,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 +6795,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 +6856,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 +6919,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 +6955,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 }
     );
@@ -6040,7 +7015,7 @@ function IconContainer({ selected, badge, children }) {
     }
   );
 }
-var NavigationRailItemComponent = React31.forwardRef(
+var NavigationRailItemComponent = React38.forwardRef(
   ({
     selected,
     icon,
@@ -6051,18 +7026,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 +7139,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 +7151,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 +7179,7 @@ function useRoving(navRef) {
     [navRef]
   );
 }
-var NavigationRailComponent = React31.forwardRef(
+var NavigationRailComponent = React38.forwardRef(
   ({
     variant = "collapsed",
     labelVisibility = "labeled",
@@ -6224,9 +7199,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 +7294,7 @@ var NavigationRailComponent = React31.forwardRef(
               children: fab
             }
           ),
-          React31.cloneElement(
+          React38.cloneElement(
             navElement,
             {
               className: cn(navBaseClasses, "pointer-events-auto")
@@ -6357,13 +7332,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 +7351,7 @@ function useMergedRef3(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var RadioVisual = React31.memo(function RadioVisual2({
+var RadioVisual = React38.memo(function RadioVisual2({
   isSelected,
   disabled,
   error,
@@ -6429,7 +7404,7 @@ var RadioVisual = React31.memo(function RadioVisual2({
     }
   );
 });
-var RadioButtonComponent = React31.forwardRef(
+var RadioButtonComponent = React38.forwardRef(
   ({
     selected,
     defaultSelected = false,
@@ -6448,23 +7423,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 +7453,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 +7472,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(
@@ -6604,98 +7579,917 @@ var RadioButtonComponent = React31.forwardRef(
           visual
         ]
       }
-    ) });
+    ) });
+  }
+);
+RadioButtonComponent.displayName = "RadioButton";
+var RadioButton = React38.memo(RadioButtonComponent);
+var RadioGroupComponent = React38.forwardRef(
+  ({
+    name,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    disabled = false,
+    error = false,
+    label,
+    "aria-labelledby": ariaLabelledby,
+    required = false,
+    orientation = "vertical",
+    children,
+    className
+  }, ref) => {
+    const [internalValue, setInternalValue] = React38.useState(defaultValue);
+    const isControlled = valueProp !== void 0;
+    const selectedValue = isControlled ? valueProp : internalValue;
+    const handleValueChange = React38.useCallback(
+      (val) => {
+        if (!isControlled) setInternalValue(val);
+        onValueChange == null ? void 0 : onValueChange(val);
+      },
+      [isControlled, onValueChange]
+    );
+    const groupRef = React38.useRef(null);
+    const mergedRef = useMergedRef3(ref, groupRef);
+    const onKeyDown = React38.useCallback(
+      (e) => {
+        var _a, _b;
+        if (disabled) return;
+        const isNext = e.key === "ArrowDown" || e.key === "ArrowRight";
+        const isPrev = e.key === "ArrowUp" || e.key === "ArrowLeft";
+        if (!isNext && !isPrev) return;
+        e.preventDefault();
+        const inputs = Array.from(
+          (_b = (_a = groupRef.current) == null ? void 0 : _a.querySelectorAll(
+            'input[type="radio"]:not(:disabled)'
+          )) != null ? _b : []
+        );
+        if (inputs.length === 0) return;
+        const currentIdx = inputs.indexOf(
+          document.activeElement
+        );
+        const nextIdx = isNext ? currentIdx < inputs.length - 1 ? currentIdx + 1 : 0 : currentIdx > 0 ? currentIdx - 1 : inputs.length - 1;
+        const target = inputs[nextIdx];
+        target.focus();
+        handleValueChange(target.value);
+      },
+      [disabled, handleValueChange]
+    );
+    const contextValue = React38.useMemo(
+      () => ({
+        name,
+        selectedValue,
+        onValueChange: handleValueChange,
+        disabled,
+        error,
+        required
+      }),
+      [name, selectedValue, handleValueChange, disabled, error, required]
+    );
+    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: mergedRef,
+        role: "radiogroup",
+        "aria-label": label && !ariaLabelledby ? label : void 0,
+        "aria-labelledby": ariaLabelledby,
+        "aria-disabled": disabled || void 0,
+        "aria-required": required || void 0,
+        className: cn(
+          "flex",
+          orientation === "horizontal" ? "flex-row gap-4" : "flex-col gap-1",
+          className
+        ),
+        onKeyDown,
+        children: [
+          label && !ariaLabelledby && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+          children
+        ]
+      }
+    ) });
+  }
+);
+RadioGroupComponent.displayName = "RadioGroup";
+var RadioGroup = React38.memo(RadioGroupComponent);
+function useSearchKeyboard({
+  active,
+  onActiveChange,
+  onSearch,
+  query,
+  itemCount,
+  onSelectSuggestion
+}) {
+  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 = React38.useCallback(
+    (e) => {
+      if (!active) return;
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          setActiveIndex((i) => i < itemCount - 1 ? i + 1 : i);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          setActiveIndex((i) => i > -1 ? i - 1 : -1);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          if (activeIndex >= 0 && onSelectSuggestion) {
+            onSelectSuggestion(activeIndex);
+          } else {
+            onSearch(query);
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          onActiveChange(false);
+          break;
+        }
+      }
+    },
+    [
+      active,
+      activeIndex,
+      itemCount,
+      onActiveChange,
+      onSearch,
+      onSelectSuggestion,
+      query
+    ]
+  );
+  const resetActiveIndex = React38.useCallback(() => {
+    setActiveIndex(-1);
+  }, []);
+  return { activeIndex, handleKeyDown, resetActiveIndex };
+}
+
+// src/ui/search/search.tokens.ts
+var SearchTokens = {
+  // ── Heights ─────────────────────────────────────────────────────────────
+  heights: {
+    /** SearchBarTokens.ContainerHeight = 56dp */
+    bar: 56,
+    /** SearchViewTokens.DockedHeaderContainerHeight = 56dp */
+    dockedHeader: 56,
+    /** SearchViewTokens.FullScreenHeaderContainerHeight = 72dp */
+    fullScreenHeader: 72
+  },
+  // ── Avatar ────────────────────────────────────────────────────────────
+  /** SearchBarTokens.AvatarSize = 30dp */
+  avatarSize: 30,
+  // ── Icon ───────────────────────────────────────────────────────────────
+  /** Standard icon size for leading/trailing icons. */
+  iconSize: 20,
+  /** Touch target for interactive icons per MD3 a11y spec. */
+  iconTouchTarget: 48,
+  // ── Gap ────────────────────────────────────────────────────────────────
+  /** Gap between SearchBar and results list when hasGap=true. */
+  dropdownGap: 2
+};
+var SEARCH_COLORS = {
+  /** SearchBarTokens.ContainerColor → surface-container-high */
+  container: "var(--md-sys-color-surface-container-high)",
+  /** SearchBarTokens.LeadingIconColor → on-surface */
+  leadingIcon: "var(--md-sys-color-on-surface)",
+  /** SearchBarTokens.TrailingIconColor → on-surface-variant */
+  trailingIcon: "var(--md-sys-color-on-surface-variant)",
+  /** SearchBarTokens.InputTextColor → on-surface */
+  inputText: "var(--md-sys-color-on-surface)",
+  /** SearchBarTokens.SupportingTextColor → on-surface-variant (placeholder) */
+  supportingText: "var(--md-sys-color-on-surface-variant)",
+  /** SearchViewTokens.DividerColor → outline */
+  divider: "var(--md-sys-color-outline)",
+  /** Focus indicator → secondary */
+  focusIndicator: "var(--md-sys-color-secondary)"
+};
+var SEARCH_TYPOGRAPHY = {
+  /** BodyLarge — used for input text and placeholder. */
+  bodyLarge: "text-[16px] leading-6 font-normal tracking-[0.5px]"
+};
+var SEARCH_BAR_EXPAND_SPRING = {
+  type: "spring",
+  stiffness: 380,
+  damping: 38,
+  mass: 1
+};
+var SEARCH_DOCKED_REVEAL_SPRING = {
+  type: "spring",
+  stiffness: 400,
+  damping: 35,
+  mass: 0.8
+};
+var SEARCH_FULLSCREEN_SPRING = {
+  type: "spring",
+  stiffness: 300,
+  damping: 30,
+  mass: 0.9
+};
+var SEARCH_BAR_EXIT_SPRING = {
+  type: "spring",
+  stiffness: 500,
+  damping: 40,
+  mass: 0.6
+};
+var PLACEHOLDER_SPRING = {
+  type: "spring",
+  stiffness: 350,
+  damping: 30,
+  mass: 0.8
+};
+function AnimatedPlaceholder({
+  text,
+  textAlign,
+  visible,
+  focused,
+  children,
+  className
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  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") {
+      setXOffset(0);
+      return;
+    }
+    const containerWidth = container.offsetWidth;
+    const textWidth = span.offsetWidth;
+    if (textAlign === "center") {
+      setXOffset(Math.max(0, (containerWidth - textWidth) / 2));
+    } else {
+      setXOffset(Math.max(0, containerWidth - textWidth));
+    }
+  }, [textAlign]);
+  React38.useLayoutEffect(() => {
+    recalculate();
+  }, [recalculate]);
+  React38.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(recalculate);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [recalculate]);
+  const targetX = focused || !visible ? 0 : xOffset;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative flex-1 min-w-0", className),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          m.span,
+          {
+            ref: (el) => {
+              spanRef.current = el;
+            },
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute inset-y-0 left-0",
+              "flex items-center whitespace-nowrap select-none",
+              SEARCH_TYPOGRAPHY.bodyLarge
+            ),
+            style: { color: SEARCH_COLORS.supportingText },
+            animate: {
+              x: targetX,
+              opacity: visible ? 1 : 0
+            },
+            transition: shouldReduceMotion ? { duration: 0 } : PLACEHOLDER_SPRING,
+            children: text
+          }
+        )
+      ]
+    }
+  );
+}
+function DefaultSearchIcon() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "material-symbols-rounded select-none leading-none",
+      style: { fontSize: SearchTokens.iconSize },
+      "aria-hidden": "true",
+      children: "search"
+    }
+  );
+}
+function SearchBar({
+  query,
+  onQueryChange,
+  onSearch,
+  active,
+  onActiveChange,
+  leadingIcon,
+  trailingIcon,
+  placeholder = "Search",
+  textAlign = "left",
+  className,
+  "aria-label": ariaLabel = "Search",
+  searchId,
+  listboxId,
+  onKeyDown,
+  activeIndex
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  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) {
+      isRestoringFocusRef.current = true;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      rafId = requestAnimationFrame(() => {
+        isRestoringFocusRef.current = false;
+      });
+    }
+    prevActiveRef.current = active;
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [active]);
+  const handleFocus = () => {
+    if (!active && !isRestoringFocusRef.current) {
+      onActiveChange(true);
+    }
+  };
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    onSearch(query);
+  };
+  const activeDescendant = activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+  return (
+    /*
+     * AnimatePresence mode="popLayout":
+     * When SearchView opens (active=true), SearchBar plays its exit animation
+     * first, then unmounts — releasing the shared layoutId for SearchView to
+     * claim and morph from the pill shape.
+     */
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: !active && /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        layout: !shouldReduceMotion,
+        layoutId: shouldReduceMotion ? void 0 : searchId,
+        transition: shouldReduceMotion ? void 0 : SEARCH_BAR_EXPAND_SPRING,
+        className: cn("relative", className),
+        style: { height: SearchTokens.heights.bar },
+        initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.95 },
+        animate: { opacity: 1, scale: 1 },
+        exit: shouldReduceMotion ? {} : { opacity: 0, scale: 0.95, transition: SEARCH_BAR_EXIT_SPRING },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 rounded-full",
+              style: { backgroundColor: SEARCH_COLORS.container },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "search",
+            {
+              "aria-label": ariaLabel,
+              className: "relative flex h-full items-center gap-2 rounded-full px-4",
+              children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "flex shrink-0 items-center justify-center",
+                    style: { color: SEARCH_COLORS.leadingIcon },
+                    "aria-hidden": "true",
+                    children: leadingIcon != null ? leadingIcon : /* @__PURE__ */ jsx(DefaultSearchIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  AnimatedPlaceholder,
+                  {
+                    text: placeholder,
+                    textAlign,
+                    visible: !query,
+                    focused: active,
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        id: searchId,
+                        type: "search",
+                        role: "combobox",
+                        "aria-expanded": active,
+                        "aria-controls": listboxId,
+                        "aria-autocomplete": "list",
+                        "aria-activedescendant": activeDescendant,
+                        "aria-label": placeholder,
+                        value: query,
+                        placeholder,
+                        className: cn(
+                          "w-full bg-transparent border-none outline-none",
+                          "text-[16px] leading-6 font-normal tracking-[0.5px]",
+                          "placeholder:text-transparent"
+                        ),
+                        style: { color: SEARCH_COLORS.inputText },
+                        onFocus: handleFocus,
+                        onChange: (e) => onQueryChange(e.target.value),
+                        onKeyDown
+                      }
+                    )
+                  }
+                ),
+                trailingIcon && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "flex shrink-0 items-center justify-center",
+                    style: { color: SEARCH_COLORS.trailingIcon },
+                    "aria-hidden": "true",
+                    children: trailingIcon
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      },
+      searchId
+    ) })
+  );
+}
+var SearchContext = React38.createContext(null);
+function SearchProvider({
+  children,
+  value
+}) {
+  return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
+}
+function useSearch() {
+  const context = React38.useContext(SearchContext);
+  if (!context) {
+    return { listboxId: "", activeIndex: -1 };
+  }
+  return context;
+}
+function useClickOutside(handler, enabled = true) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      const el = ref.current;
+      if (!el || el.contains(event.target)) {
+        return;
+      }
+      handler();
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [handler, enabled]);
+  return ref;
+}
+function useSearchViewFocus(inputRef, active) {
+  React38.useEffect(() => {
+    if (!active) return;
+    let raf2;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      });
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [active, inputRef]);
+}
+function TrailingAction({
+  query,
+  trailingIcon,
+  onClear
+}) {
+  if (query) {
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "sm",
+        style: { color: SEARCH_COLORS.trailingIcon },
+        "aria-label": "Clear search",
+        onClick: onClear,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "material-symbols-rounded select-none leading-none",
+            style: { fontSize: 20 },
+            "aria-hidden": "true",
+            children: "close"
+          }
+        )
+      }
+    );
   }
-);
-RadioButtonComponent.displayName = "RadioButton";
-var RadioButton = React31.memo(RadioButtonComponent);
-var RadioGroupComponent = React31.forwardRef(
-  ({
-    name,
-    value: valueProp,
-    defaultValue,
-    onValueChange,
-    disabled = false,
-    error = false,
-    label,
-    "aria-labelledby": ariaLabelledby,
-    required = false,
-    orientation = "vertical",
-    children,
-    className
-  }, ref) => {
-    const [internalValue, setInternalValue] = React31.useState(defaultValue);
-    const isControlled = valueProp !== void 0;
-    const selectedValue = isControlled ? valueProp : internalValue;
-    const handleValueChange = React31.useCallback(
-      (val) => {
-        if (!isControlled) setInternalValue(val);
-        onValueChange == null ? void 0 : onValueChange(val);
-      },
-      [isControlled, onValueChange]
+  if (trailingIcon) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "flex shrink-0 items-center justify-center",
+        style: { color: SEARCH_COLORS.trailingIcon },
+        "aria-hidden": "true",
+        children: trailingIcon
+      }
     );
-    const groupRef = React31.useRef(null);
-    const mergedRef = useMergedRef3(ref, groupRef);
-    const onKeyDown = React31.useCallback(
-      (e) => {
-        var _a, _b;
-        if (disabled) return;
-        const isNext = e.key === "ArrowDown" || e.key === "ArrowRight";
-        const isPrev = e.key === "ArrowUp" || e.key === "ArrowLeft";
-        if (!isNext && !isPrev) return;
-        e.preventDefault();
-        const inputs = Array.from(
-          (_b = (_a = groupRef.current) == null ? void 0 : _a.querySelectorAll(
-            'input[type="radio"]:not(:disabled)'
-          )) != null ? _b : []
-        );
-        if (inputs.length === 0) return;
-        const currentIdx = inputs.indexOf(
-          document.activeElement
-        );
-        const nextIdx = isNext ? currentIdx < inputs.length - 1 ? currentIdx + 1 : 0 : currentIdx > 0 ? currentIdx - 1 : inputs.length - 1;
-        const target = inputs[nextIdx];
-        target.focus();
-        handleValueChange(target.value);
+  }
+  return null;
+}
+function SearchViewDocked({
+  query,
+  onQueryChange,
+  onSearch,
+  active,
+  onActiveChange,
+  leadingIcon,
+  trailingIcon,
+  placeholder = "Search",
+  textAlign = "left",
+  styleType = "contained",
+  hasGap = false,
+  children,
+  viewClassName,
+  "aria-label": ariaLabel = "Search",
+  searchId,
+  listboxId,
+  onKeyDown,
+  activeIndex
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const inputRef = React38.useRef(null);
+  useSearchViewFocus(inputRef, active);
+  const dropdownRef = useClickOutside(() => {
+    onActiveChange(false);
+  }, active);
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    onSearch(query);
+  };
+  const activeDescendant = activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+  return (
+    /*
+     * mode="popLayout": when SearchView exits, it plays exit animation first,
+     * then unmounts — freeing the layoutId for SearchBar to re-enter and morph back.
+     */
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: active && /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        ref: dropdownRef,
+        layoutId: shouldReduceMotion ? void 0 : searchId,
+        className: cn(
+          // DockedContainerShape = CornerExtraLarge = 28dp radius
+          "rounded-[28px] overflow-hidden",
+          viewClassName
+        ),
+        style: { backgroundColor: SEARCH_COLORS.container },
+        initial: shouldReduceMotion ? {} : { opacity: 0, y: -8 },
+        animate: { opacity: 1, y: 0 },
+        exit: shouldReduceMotion ? {} : { opacity: 0, y: -8 },
+        transition: shouldReduceMotion ? { duration: 0 } : SEARCH_DOCKED_REVEAL_SPRING,
+        children: [
+          /* @__PURE__ */ jsx(
+            "search",
+            {
+              "aria-label": ariaLabel,
+              className: "flex items-center gap-2 px-4",
+              style: { height: SearchTokens.heights.dockedHeader },
+              children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "flex shrink-0 items-center justify-center",
+                    style: { color: SEARCH_COLORS.leadingIcon },
+                    "aria-hidden": "true",
+                    children: leadingIcon
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  AnimatedPlaceholder,
+                  {
+                    text: placeholder,
+                    textAlign,
+                    visible: !query,
+                    focused: active,
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        id: `${searchId}-view`,
+                        type: "search",
+                        role: "combobox",
+                        "aria-expanded": true,
+                        "aria-controls": listboxId,
+                        "aria-autocomplete": "list",
+                        "aria-activedescendant": activeDescendant,
+                        "aria-label": placeholder,
+                        value: query,
+                        placeholder,
+                        className: cn(
+                          "w-full bg-transparent border-none outline-none",
+                          "text-[16px] leading-6 font-normal tracking-[0.5px]",
+                          "placeholder:text-transparent"
+                        ),
+                        style: { color: SEARCH_COLORS.inputText },
+                        onChange: (e) => onQueryChange(e.target.value),
+                        onKeyDown
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TrailingAction,
+                  {
+                    query,
+                    trailingIcon,
+                    onClear: () => onQueryChange("")
+                  }
+                )
+              ] })
+            }
+          ),
+          hasGap && children && /* @__PURE__ */ jsx("div", { className: "h-0.5", "aria-hidden": "true" }),
+          styleType === "divided" && children && /* @__PURE__ */ jsx(
+            "hr",
+            {
+              className: "border-0 border-t",
+              style: { borderColor: SEARCH_COLORS.divider }
+            }
+          ),
+          children && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-label": `${ariaLabel} results`,
+              className: "min-h-30",
+              children
+            }
+          )
+        ]
       },
-      [disabled, handleValueChange]
-    );
-    const contextValue = React31.useMemo(
-      () => ({
-        name,
-        selectedValue,
-        onValueChange: handleValueChange,
-        disabled,
-        error,
-        required
-      }),
-      [name, selectedValue, handleValueChange, disabled, error, required]
-    );
-    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-      "div",
+      `${searchId}-view`
+    ) })
+  );
+}
+function ArrowBackIcon2() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "material-symbols-rounded select-none leading-none",
+      style: { fontSize: 24 },
+      "aria-hidden": "true",
+      children: "arrow_back"
+    }
+  );
+}
+function SearchViewFullScreen({
+  query,
+  onQueryChange,
+  onSearch,
+  active,
+  onActiveChange,
+  leadingIcon,
+  trailingIcon,
+  placeholder = "Search",
+  textAlign = "left",
+  styleType = "contained",
+  children,
+  viewClassName,
+  "aria-label": ariaLabel = "Search",
+  searchId,
+  listboxId,
+  onKeyDown,
+  activeIndex
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const inputRef = React38.useRef(null);
+  useSearchViewFocus(inputRef, active);
+  const [mounted, setMounted] = React38.useState(false);
+  React38.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    onSearch(query);
+  };
+  const handleEscape = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      onActiveChange(false);
+    }
+  };
+  const activeDescendant = activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+  if (!mounted) return null;
+  const content = (
+    /*
+     * mode="popLayout": when FullScreen exits, it plays exit animation first,
+     * then unmounts — freeing the layoutId for SearchBar to re-enter and morph back
+     * to the pill shape.
+     */
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: active && /* @__PURE__ */ jsxs(
+      m.div,
       {
-        ref: mergedRef,
-        role: "radiogroup",
-        "aria-label": label && !ariaLabelledby ? label : void 0,
-        "aria-labelledby": ariaLabelledby,
-        "aria-disabled": disabled || void 0,
-        "aria-required": required || void 0,
+        layoutId: shouldReduceMotion ? void 0 : searchId,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
         className: cn(
-          "flex",
-          orientation === "horizontal" ? "flex-row gap-4" : "flex-col gap-1",
-          className
+          "fixed inset-0 z-50 flex flex-col overflow-hidden",
+          // CornerNone — shape is resolved by Framer Motion layout animation
+          "rounded-none",
+          viewClassName
         ),
-        onKeyDown,
+        style: { backgroundColor: SEARCH_COLORS.container },
+        initial: shouldReduceMotion ? {} : { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: shouldReduceMotion ? {} : { opacity: 0 },
+        transition: shouldReduceMotion ? { duration: 0 } : SEARCH_FULLSCREEN_SPRING,
+        onKeyDown: handleEscape,
         children: [
-          label && !ariaLabelledby && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
-          children
+          /* @__PURE__ */ jsx(
+            "search",
+            {
+              "aria-label": ariaLabel,
+              className: "flex shrink-0 items-center gap-2 px-4",
+              style: { height: SearchTokens.heights.fullScreenHeader },
+              children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "sm",
+                    style: { color: SEARCH_COLORS.leadingIcon },
+                    "aria-label": "Close search",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onActiveChange(false);
+                    },
+                    children: leadingIcon != null ? leadingIcon : /* @__PURE__ */ jsx(ArrowBackIcon2, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  AnimatedPlaceholder,
+                  {
+                    text: placeholder,
+                    textAlign,
+                    visible: !query,
+                    focused: active,
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        id: `${searchId}-fs`,
+                        type: "search",
+                        role: "combobox",
+                        "aria-expanded": true,
+                        "aria-controls": listboxId,
+                        "aria-autocomplete": "list",
+                        "aria-activedescendant": activeDescendant,
+                        "aria-label": placeholder,
+                        value: query,
+                        placeholder,
+                        className: cn(
+                          "w-full bg-transparent border-none outline-none",
+                          "text-[16px] leading-6 font-normal tracking-[0.5px]",
+                          "placeholder:text-transparent"
+                        ),
+                        style: { color: SEARCH_COLORS.inputText },
+                        onChange: (e) => onQueryChange(e.target.value),
+                        onKeyDown
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TrailingAction,
+                  {
+                    query,
+                    trailingIcon,
+                    onClear: () => onQueryChange("")
+                  }
+                )
+              ] })
+            }
+          ),
+          styleType === "divided" && /* @__PURE__ */ jsx(
+            "hr",
+            {
+              className: "border-0 border-t shrink-0",
+              style: { borderColor: SEARCH_COLORS.divider }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              tabIndex: 0,
+              "aria-label": `${ariaLabel} results`,
+              className: "flex-1 overflow-y-auto outline-none",
+              onClick: (e) => {
+                if (e.target === e.currentTarget) onActiveChange(false);
+              },
+              onKeyDown: (e) => {
+                if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+                  e.preventDefault();
+                  onActiveChange(false);
+                }
+              },
+              children
+            }
+          )
         ]
-      }
-    ) });
-  }
-);
-RadioGroupComponent.displayName = "RadioGroup";
-var RadioGroup2 = React31.memo(RadioGroupComponent);
+      },
+      `${searchId}-fs`
+    ) })
+  );
+  return createPortal(content, document.body);
+}
+function SearchComponent({
+  query,
+  onQueryChange,
+  onSearch,
+  active,
+  onActiveChange,
+  variant = "docked",
+  styleType = "contained",
+  hasGap = false,
+  leadingIcon,
+  trailingIcon,
+  placeholder = "Search",
+  textAlign = "left",
+  children,
+  id,
+  "aria-label": ariaLabel = "Search",
+  className,
+  viewClassName
+}) {
+  const generatedId = React38.useId();
+  const searchId = id != null ? id : generatedId;
+  const listboxId = `${searchId}-listbox`;
+  const itemCount = React38.Children.count(children);
+  const { activeIndex, handleKeyDown } = useSearchKeyboard({
+    active,
+    onActiveChange,
+    onSearch,
+    query,
+    itemCount
+  });
+  const sharedProps = {
+    query,
+    onQueryChange,
+    onSearch,
+    active,
+    onActiveChange,
+    leadingIcon,
+    trailingIcon,
+    placeholder,
+    textAlign,
+    "aria-label": ariaLabel,
+    searchId,
+    listboxId,
+    onKeyDown: handleKeyDown,
+    activeIndex
+  };
+  return /* @__PURE__ */ jsx(SearchProvider, { value: { activeIndex, listboxId }, children: /* @__PURE__ */ jsxs(m.div, { className, style: { minHeight: 56 }, children: [
+    /* @__PURE__ */ jsx(SearchBar, __spreadValues({}, sharedProps)),
+    variant === "fullscreen" ? /* @__PURE__ */ jsx(
+      SearchViewFullScreen,
+      __spreadProps(__spreadValues({}, sharedProps), {
+        styleType,
+        viewClassName,
+        children
+      })
+    ) : /* @__PURE__ */ jsx(
+      SearchViewDocked,
+      __spreadProps(__spreadValues({}, sharedProps), {
+        styleType,
+        hasGap,
+        viewClassName,
+        children
+      })
+    )
+  ] }) });
+}
+var Search = Object.assign(SearchComponent, { useSearch });
 function coerceValue(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
@@ -6887,7 +8681,7 @@ var SLIDER_INDICATOR_TRANSITION = {
   stiffness: 450,
   damping: 32
 };
-var ValueIndicator = React31.memo(function ValueIndicator2({
+var ValueIndicator = React38.memo(function ValueIndicator2({
   value,
   visible,
   orientation,
@@ -6934,7 +8728,7 @@ var ValueIndicator = React31.memo(function ValueIndicator2({
     "value-indicator"
   ) });
 });
-var SliderThumb = React31.memo(function SliderThumb2({
+var SliderThumb = React38.memo(function SliderThumb2({
   value,
   percent,
   min,
@@ -6966,11 +8760,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"
@@ -6985,7 +8779,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;
@@ -7012,7 +8806,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();
@@ -7023,7 +8817,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);
@@ -7031,7 +8825,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);
@@ -7041,7 +8835,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") {
@@ -7145,7 +8939,7 @@ var SliderThumb = React31.memo(function SliderThumb2({
     }
   );
 });
-var RangeTrack = React31.memo(function RangeTrack2({
+var RangeTrack = React38.memo(function RangeTrack2({
   startPercent,
   endPercent,
   trackSize,
@@ -7390,7 +9184,7 @@ var RangeTrack = React31.memo(function RangeTrack2({
     }
   );
 });
-var RangeSliderComponent = React31.forwardRef(
+var RangeSliderComponent = React38.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -7414,7 +9208,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
     ]);
@@ -7428,10 +9222,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);
@@ -7443,7 +9237,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);
@@ -7455,15 +9249,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;
@@ -7507,7 +9301,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",
       {
@@ -7587,7 +9381,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 {
@@ -7626,7 +9420,7 @@ var allInnerRadius = (innerR) => ({
   borderTopRightRadius: innerR,
   borderBottomRightRadius: innerR
 });
-var InsetIcon = React31.memo(function InsetIcon2({
+var InsetIcon = React38.memo(function InsetIcon2({
   icon,
   isOnActiveSegment,
   position,
@@ -7720,7 +9514,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,
@@ -7755,8 +9549,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);
@@ -7773,8 +9567,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) {
@@ -8281,7 +10075,7 @@ var SliderTrack = React31.memo(function SliderTrack2({
     }
   );
 });
-var SliderComponent = React31.forwardRef(
+var SliderComponent = React38.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -8310,7 +10104,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,
@@ -8319,8 +10113,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) {
@@ -8330,13 +10124,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;
@@ -8371,7 +10165,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);
@@ -8443,7 +10237,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
@@ -8489,9 +10283,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 };
@@ -8504,14 +10298,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);
@@ -8521,7 +10315,7 @@ function useSnackbarState() {
   }, []);
   return { current, showSnackbar, _dismiss };
 }
-var Snackbar = React31.memo(function Snackbar2({
+var Snackbar = React38.memo(function Snackbar2({
   data,
   className
 }) {
@@ -8535,15 +10329,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]
   );
@@ -8611,7 +10405,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]);
@@ -8629,10 +10423,12 @@ function SnackbarHost({ state, className }) {
   ) });
 }
 SnackbarHost.displayName = "SnackbarHost";
-var SnackbarContext = React31.createContext(null);
+var SnackbarContext = React38.createContext(
+  null
+);
 function SnackbarProvider({ children }) {
   const state = useSnackbarState();
-  const contextValue = React31.useMemo(
+  const contextValue = React38.useMemo(
     () => ({ showSnackbar: state.showSnackbar }),
     [state.showSnackbar]
   );
@@ -8643,7 +10439,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>.");
   }
@@ -8706,7 +10502,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
@@ -8747,7 +10543,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,
@@ -8838,9 +10634,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(
@@ -8867,7 +10663,7 @@ var SwitchVisual = React31.memo(function SwitchVisual2({
     }
   );
 });
-var SwitchComponent = React31.forwardRef(
+var SwitchComponent = React38.forwardRef(
   ({
     checked,
     onCheckedChange,
@@ -8885,16 +10681,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") {
@@ -8904,7 +10700,7 @@ var SwitchComponent = React31.forwardRef(
       },
       [disabled, checked, onCheckedChange]
     );
-    const handlePointerDown = React31.useCallback(
+    const handlePointerDown = React38.useCallback(
       (e) => {
         if (disabled) return;
         setIsPressed(true);
@@ -8919,19 +10715,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)),
       []
     );
@@ -9016,10 +10812,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>."
@@ -9027,7 +10867,7 @@ function useTabsContext() {
   }
   return ctx;
 }
-var TabsComponent = React31.forwardRef(
+var TabsComponent = React38.forwardRef(
   ({
     value: controlledValue,
     defaultValue = "",
@@ -9036,35 +10876,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);
@@ -9078,7 +10918,7 @@ var TabsComponent = React31.forwardRef(
       },
       []
     );
-    React31.useEffect(() => {
+    React38.useEffect(() => {
       if (isControlled || hasAutoSelected.current || tabValues.length === 0) {
         return;
       }
@@ -9093,9 +10933,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,
@@ -9126,12 +10966,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 };
 }
 
@@ -9215,7 +11055,7 @@ var TABS_CONTENT_TRANSITION = {
   ease: "easeInOut"
 };
 var INDICATOR_MIN_WIDTH = 24;
-var TabComponent = React31.forwardRef(
+var TabComponent = React38.forwardRef(
   ({
     value,
     icon,
@@ -9245,9 +11085,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);
@@ -9255,15 +11095,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));
@@ -9317,7 +11157,7 @@ var TabComponent = React31.forwardRef(
         autoActivate
       ]
     );
-    React31.useEffect(() => {
+    React38.useEffect(() => {
       if (isFirstMount.current) {
         isFirstMount.current = false;
         return;
@@ -9326,7 +11166,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;
@@ -9463,8 +11303,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();
@@ -9498,8 +11338,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,
@@ -9510,12 +11350,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;
@@ -9564,7 +11404,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 = {
@@ -9603,7 +11443,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,
@@ -9650,7 +11490,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,
@@ -9710,7 +11550,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
@@ -9734,7 +11574,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,
@@ -9832,7 +11672,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,
@@ -9874,7 +11714,7 @@ function AnimatedText({
     motionKey
   );
 }
-var SupportingText = React31.memo(function SupportingText2({
+var SupportingText = React38.memo(function SupportingText2({
   supportingText,
   errorText,
   isError,
@@ -9985,7 +11825,7 @@ function ClearIcon() {
     }
   );
 }
-var TrailingIcon = React31.memo(function TrailingIcon2({
+var TrailingIcon = React38.memo(function TrailingIcon2({
   mode,
   children,
   value,
@@ -10051,7 +11891,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",
@@ -10115,30 +11955,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) {
@@ -10150,7 +11990,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);
@@ -10159,7 +11999,7 @@ var TextFieldComponent = React31.forwardRef(
       },
       [isControlled]
     );
-    const handleChange = React31.useCallback(
+    const handleChange = React38.useCallback(
       (e) => {
         const newVal = e.target.value;
         handleValueChange(newVal);
@@ -10167,14 +12007,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;
@@ -10187,7 +12027,7 @@ var TextFieldComponent = React31.forwardRef(
       },
       [onBlur]
     );
-    const handleClear = React31.useCallback(() => {
+    const handleClear = React38.useCallback(() => {
       var _a2;
       handleValueChange("");
       onChange == null ? void 0 : onChange("", {
@@ -10195,12 +12035,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: () => {
@@ -10445,7 +12285,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) => {
@@ -11890,7 +13730,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(
@@ -11920,6 +13760,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_VIEW_SPRING, ScrollArea, ScrollAreaScrollbar, SearchAppBar, SearchView, SearchViewContainer, 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, 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, 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