@bug-on/m3-expressive 1.3.1 → 1.3.3

package/dist/navigation.js

@@ -5,8 +5,9 @@ var react = require('motion/react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var React37 = require('react');
+var React39 = require('react');
 var RxContextMenu = require('@radix-ui/react-context-menu');
+var RadixScrollArea = require('@radix-ui/react-scroll-area');
 var m3Tokens = require('@bug-on/m3-tokens');
 var DropdownMenu = require('@radix-ui/react-dropdown-menu');
 var reactSlot = require('@radix-ui/react-slot');
@@ -31,8 +32,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React37__namespace = /*#__PURE__*/_interopNamespace(React37);
+var React39__namespace = /*#__PURE__*/_interopNamespace(React39);
 var RxContextMenu__namespace = /*#__PURE__*/_interopNamespace(RxContextMenu);
+var RadixScrollArea__namespace = /*#__PURE__*/_interopNamespace(RadixScrollArea);
 var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
 
 var __defProp = Object.defineProperty;
@@ -316,6 +318,127 @@ function AppBarItemButton({ item }) {
     }
   );
 }
+var ScrollArea = React39__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      viewportClassName,
+      children,
+      type = "hover",
+      orientation = "vertical",
+      scrollHideDelay = 600,
+      viewportRef,
+      viewportProps
+    } = _b, props = __objRest(_b, [
+      "className",
+      "viewportClassName",
+      "children",
+      "type",
+      "orientation",
+      "scrollHideDelay",
+      "viewportRef",
+      "viewportProps"
+    ]);
+    const [isTouchDevice, setIsTouchDevice] = React39__namespace.useState(false);
+    React39__namespace.useEffect(() => {
+      if (typeof window !== "undefined") {
+        setIsTouchDevice(
+          "ontouchstart" in window || navigator.maxTouchPoints > 0
+        );
+      }
+    }, []);
+    const resolvedType = React39__namespace.useMemo(() => {
+      if (type === "hover" && isTouchDevice) {
+        return "scroll";
+      }
+      return type;
+    }, [type, isTouchDevice]);
+    const radixType = resolvedType === "none" ? "always" : resolvedType;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      RadixScrollArea__namespace.Root,
+      __spreadProps(__spreadValues({
+        ref,
+        type: radixType,
+        scrollHideDelay,
+        className: cn("relative overflow-hidden flex flex-col", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RadixScrollArea__namespace.Viewport,
+            __spreadProps(__spreadValues({
+              ref: viewportRef
+            }, viewportProps), {
+              className: cn(
+                "h-full w-full flex-1 min-h-0 min-w-0 rounded-[inherit]",
+                "outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
+                viewportClassName,
+                viewportProps == null ? void 0 : viewportProps.className
+              ),
+              children
+            })
+          ),
+          (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(
+            ScrollAreaScrollbar,
+            {
+              orientation: "vertical",
+              className: resolvedType === "none" ? "hidden" : void 0
+            }
+          ),
+          (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(
+            ScrollAreaScrollbar,
+            {
+              orientation: "horizontal",
+              className: resolvedType === "none" ? "hidden" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(RadixScrollArea__namespace.Corner, { className: "bg-m3-surface-container" })
+        ]
+      })
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+var ScrollAreaScrollbar = React39__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixScrollArea__namespace.Scrollbar,
+    __spreadProps(__spreadValues({
+      ref,
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-all duration-300 ease-in-out",
+        "absolute z-50",
+        orientation === "vertical" && "right-0 top-0 bottom-0 w-2.5 border-l border-l-transparent p-px",
+        orientation === "horizontal" && "bottom-0 left-0 right-0 h-2.5 flex-col border-t border-t-transparent p-px",
+        "data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RadixScrollArea__namespace.Thumb,
+        {
+          className: cn(
+            "relative flex-1 rounded-full bg-m3-on-surface/25 transition-colors duration-200",
+            "hover:bg-m3-on-surface/40 active:bg-m3-on-surface/55",
+            "before:absolute before:left-1/2 before:top-1/2 before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2"
+          )
+        }
+      )
+    })
+  );
+});
+ScrollAreaScrollbar.displayName = RadixScrollArea__namespace.Scrollbar.displayName;
+var ScrollAreaCorner = React39__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixScrollArea__namespace.Corner,
+    __spreadValues({
+      ref,
+      className: cn("bg-m3-surface-container", className)
+    }, props)
+  );
+});
+ScrollAreaCorner.displayName = "ScrollAreaCorner";
 
 // src/ui/menu/menu-animations.ts
 var FAST_EFFECTS_TRANSITION = {
@@ -374,7 +497,7 @@ var SUBMENU_CONTAINER_VARIANTS = {
     transition: FAST_EFFECTS_TRANSITION
   }
 };
-var MenuContext = React37__namespace.createContext({
+var MenuContext = React39__namespace.createContext({
   variant: "baseline",
   colorVariant: "standard",
   density: 0,
@@ -392,7 +515,7 @@ function MenuProvider({
   onOpenChange,
   children
 }) {
-  const value = React37__namespace.useMemo(
+  const value = React39__namespace.useMemo(
     () => ({
       variant,
       colorVariant,
@@ -406,8 +529,8 @@ function MenuProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children });
 }
 function useMenuContext() {
-  const ctx = React37__namespace.useContext(MenuContext);
-  return React37__namespace.useMemo(
+  const ctx = React39__namespace.useContext(MenuContext);
+  return React39__namespace.useMemo(
     () => Object.assign(ctx, {
       get isStatic() {
         return ctx.menuPrimitive === "static";
@@ -527,10 +650,10 @@ var VIBRANT_COLORS = {
 var DIVIDER_PADDING = "mx-3 my-0.5";
 var DIVIDER_COLOR = "bg-m3-outline-variant";
 function flattenChildren(nodes) {
-  return React37__namespace.Children.toArray(nodes).reduce(
+  return React39__namespace.Children.toArray(nodes).reduce(
     (acc, child) => {
-      if (!React37__namespace.isValidElement(child)) return acc;
-      if (child.type === React37__namespace.Fragment) {
+      if (!React39__namespace.isValidElement(child)) return acc;
+      if (child.type === React39__namespace.Fragment) {
         return acc.concat(
           flattenChildren(
             child.props.children
@@ -548,7 +671,7 @@ function ContextMenu({
   variant = "baseline",
   colorVariant = "standard"
 }) {
-  const [open, setOpen] = React37__namespace.useState(false);
+  const [open, setOpen] = React39__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     MenuProvider,
     {
@@ -562,24 +685,30 @@ function ContextMenu({
   );
 }
 ContextMenu.displayName = "ContextMenu";
-var ContextMenuTrigger = React37__namespace.forwardRef((_a, ref) => {
+var ContextMenuTrigger = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { children, asChild = true } = _b, props = __objRest(_b, ["children", "asChild"]);
   return /* @__PURE__ */ jsxRuntime.jsx(RxContextMenu__namespace.Trigger, __spreadProps(__spreadValues({ ref, asChild }, props), { children }));
 });
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
-var ContextMenuContent = React37__namespace.forwardRef(
+var ContextMenuContent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
       hasOverflow = false,
       colorVariant: propColorVariant,
       separatorStyle = "gap",
+      maxHeight = "360px",
+      viewportRef,
+      onViewportRef,
       className
     } = _b, props = __objRest(_b, [
       "children",
       "hasOverflow",
       "colorVariant",
       "separatorStyle",
+      "maxHeight",
+      "viewportRef",
+      "onViewportRef",
       "className"
     ]);
     const {
@@ -590,7 +719,18 @@ var ContextMenuContent = React37__namespace.forwardRef(
     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 = React37__namespace.useMemo(
+    const setViewportNode = React39__namespace.useCallback(
+      (node) => {
+        if (typeof viewportRef === "function") {
+          viewportRef(node);
+        } else if (viewportRef && typeof viewportRef === "object") {
+          viewportRef.current = node;
+        }
+        onViewportRef == null ? void 0 : onViewportRef(node);
+      },
+      [viewportRef, onViewportRef]
+    );
+    const containerClassName = React39__namespace.useMemo(
       () => variant === "expressive" ? cn(
         "z-50 flex flex-col w-full",
         MENU_MIN_WIDTH,
@@ -617,12 +757,12 @@ var ContextMenuContent = React37__namespace.forwardRef(
       ),
       [variant, isExpressiveGap, hasOverflow, className, colors.containerBg]
     );
-    const renderedChildren = React37__namespace.useMemo(() => {
+    const renderedChildren = React39__namespace.useMemo(() => {
       if (variant !== "expressive") return children;
       const validChildren = flattenChildren(children);
       const groupCount = validChildren.length;
       const enhanced = validChildren.map(
-        (child, i) => React37__namespace.cloneElement(
+        (child, i) => React39__namespace.cloneElement(
           child,
           { index: i, count: groupCount, isGapVariant: isExpressiveGap }
         )
@@ -655,7 +795,15 @@ var ContextMenuContent = React37__namespace.forwardRef(
         style: __spreadProps(__spreadValues({}, props.style), {
           transformOrigin: "var(--radix-context-menu-content-transform-origin)"
         }),
-        children: renderedChildren
+        children: hasOverflow || !maxHeight ? renderedChildren : /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollArea,
+          {
+            style: { maxHeight },
+            className: "w-full flex-1 min-h-0",
+            viewportRef: setViewportNode,
+            children: renderedChildren
+          }
+        )
       }
     ) })) }) });
   }
@@ -683,12 +831,12 @@ function Menu(_a) {
   ]);
   var _a2;
   const resolvedVariant = (_a2 = variant != null ? variant : menuVariant) != null ? _a2 : "baseline";
-  const [internalOpen, setInternalOpen] = React37__namespace.useState(
+  const [internalOpen, setInternalOpen] = React39__namespace.useState(
     () => defaultOpen != null ? defaultOpen : false
   );
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const handleOpenChange = React37__namespace.useCallback(
+  const handleOpenChange = React39__namespace.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       controlledOnOpenChange == null ? void 0 : controlledOnOpenChange(next);
@@ -716,12 +864,12 @@ function Menu(_a) {
   );
 }
 Menu.displayName = "Menu";
-var MenuTrigger = React37__namespace.forwardRef((_a, ref) => {
+var MenuTrigger = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { children, asChild = true } = _b, props = __objRest(_b, ["children", "asChild"]);
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, __spreadProps(__spreadValues({ ref, asChild }, props), { children }));
 });
 MenuTrigger.displayName = "MenuTrigger";
-var MenuContent = React37__namespace.forwardRef(
+var MenuContent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -732,6 +880,9 @@ var MenuContent = React37__namespace.forwardRef(
       colorVariant: propColorVariant,
       separatorStyle = "gap",
       matchTriggerWidth = false,
+      maxHeight = "360px",
+      viewportRef,
+      onViewportRef,
       className
     } = _b, props = __objRest(_b, [
       "children",
@@ -742,6 +893,9 @@ var MenuContent = React37__namespace.forwardRef(
       "colorVariant",
       "separatorStyle",
       "matchTriggerWidth",
+      "maxHeight",
+      "viewportRef",
+      "onViewportRef",
       "className"
     ]);
     const {
@@ -752,7 +906,18 @@ var MenuContent = React37__namespace.forwardRef(
     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 = React37__namespace.useMemo(() => {
+    const setViewportNode = React39__namespace.useCallback(
+      (node) => {
+        if (typeof viewportRef === "function") {
+          viewportRef(node);
+        } else if (viewportRef && typeof viewportRef === "object") {
+          viewportRef.current = node;
+        }
+        onViewportRef == null ? void 0 : onViewportRef(node);
+      },
+      [viewportRef, onViewportRef]
+    );
+    const containerClassName = React39__namespace.useMemo(() => {
       const widthClass = matchTriggerWidth ? "w-[var(--radix-dropdown-menu-trigger-width)]" : cn(MENU_MIN_WIDTH, MENU_MAX_WIDTH);
       return variant === "expressive" ? cn(
         "z-50 flex flex-col",
@@ -785,7 +950,7 @@ var MenuContent = React37__namespace.forwardRef(
       className,
       colors.containerBg
     ]);
-    const renderedChildren = React37__namespace.useMemo(() => {
+    const renderedChildren = React39__namespace.useMemo(() => {
       if (variant !== "expressive") return children;
       const validChildren = flattenChildren(children);
       const groupCount = validChildren.length;
@@ -794,7 +959,7 @@ var MenuContent = React37__namespace.forwardRef(
         if (typeof child.type === "string") return child;
         const defaultItemPosition = groupCount === 1 ? "standalone" : i === 0 ? "leading" : i === groupCount - 1 ? "trailing" : "middle";
         const itemPosition = (_a2 = child.props.itemPosition) != null ? _a2 : defaultItemPosition;
-        return React37__namespace.cloneElement(
+        return React39__namespace.cloneElement(
           child,
           {
             index: i,
@@ -844,7 +1009,15 @@ var MenuContent = React37__namespace.forwardRef(
             style: __spreadProps(__spreadValues({}, props.style), {
               transformOrigin: "var(--radix-dropdown-menu-content-transform-origin)"
             }),
-            children: renderedChildren
+            children: hasOverflow || !maxHeight ? renderedChildren : /* @__PURE__ */ jsxRuntime.jsx(
+              ScrollArea,
+              {
+                style: { maxHeight },
+                className: "w-full flex-1 min-h-0",
+                viewportRef: setViewportNode,
+                children: renderedChildren
+              }
+            )
           }
         )
       })
@@ -852,7 +1025,7 @@ var MenuContent = React37__namespace.forwardRef(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuDivider = React37__namespace.forwardRef(
+var MenuDivider = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, isGapVariant: _isGapVariant } = _b, props = __objRest(_b, ["className", "isGapVariant"]);
     const { menuVariant } = useMenuContext();
@@ -883,7 +1056,7 @@ function getGroupPosition(index, count) {
 function getGroupActiveShape(position) {
   return GROUP_SHAPES[`${position}Active`];
 }
-var MenuGroup = React37__namespace.forwardRef(
+var MenuGroup = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -909,7 +1082,7 @@ var MenuGroup = React37__namespace.forwardRef(
     const colors = menuVariant === "baseline" ? BASELINE_COLORS : colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
     const position = getGroupPosition(index, count);
     const currentShape = getGroupActiveShape(position);
-    const enhancedChildren = React37__namespace.useMemo(() => {
+    const enhancedChildren = React39__namespace.useMemo(() => {
       const valid = flattenChildren(children);
       const itemCount = valid.length;
       return valid.map((child, i) => {
@@ -917,7 +1090,7 @@ var MenuGroup = React37__namespace.forwardRef(
         if (typeof child.type === "string") return child;
         const defaultItemPosition = itemCount === 1 ? "standalone" : i === 0 ? "leading" : i === itemCount - 1 ? "trailing" : "middle";
         const itemPosition2 = (_a2 = child.props.itemPosition) != null ? _a2 : defaultItemPosition;
-        return React37__namespace.cloneElement(child, {
+        return React39__namespace.cloneElement(child, {
           itemPosition: itemPosition2,
           colorVariant
         });
@@ -980,7 +1153,7 @@ var VARIANT_FONT = {
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React37__namespace.forwardRef(
+var IconComponent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1046,14 +1219,14 @@ var IconComponent = React37__namespace.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React37__namespace.memo(IconComponent);
+var Icon = React39__namespace.memo(IconComponent);
 function getItemShapeClass(position, selected, isStatic = false, menuVariant = "expressive") {
   if (menuVariant === "baseline") return BASELINE_ITEM_SHAPE;
   if (selected) return ITEM_SHAPE_CLASSES.selected;
   if (isStatic && position === "standalone") return "rounded-[12px]";
   return ITEM_SHAPE_CLASSES[position];
 }
-var MenuItem = React37__namespace.forwardRef(
+var MenuItem = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1262,31 +1435,31 @@ function SubMenu({
 }) {
   const { colorVariant: contextColorVariant, menuPrimitive } = useMenuContext();
   const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
-  const [open, setOpen] = React37__namespace.useState(false);
-  const openTimerRef = React37__namespace.useRef(null);
-  const closeTimerRef = React37__namespace.useRef(
+  const [open, setOpen] = React39__namespace.useState(false);
+  const openTimerRef = React39__namespace.useRef(null);
+  const closeTimerRef = React39__namespace.useRef(
     null
   );
-  const clearTimers = React37__namespace.useCallback(() => {
+  const clearTimers = React39__namespace.useCallback(() => {
     if (openTimerRef.current) clearTimeout(openTimerRef.current);
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
   }, []);
-  const handleTriggerPointerEnter = React37__namespace.useCallback(() => {
+  const handleTriggerPointerEnter = React39__namespace.useCallback(() => {
     clearTimers();
     openTimerRef.current = setTimeout(() => setOpen(true), hoverOpenDelay);
   }, [hoverOpenDelay, clearTimers]);
-  const handleTriggerPointerLeave = React37__namespace.useCallback(() => {
+  const handleTriggerPointerLeave = React39__namespace.useCallback(() => {
     clearTimers();
     closeTimerRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
   }, [hoverCloseDelay, clearTimers]);
-  const handleContentPointerEnter = React37__namespace.useCallback(() => {
+  const handleContentPointerEnter = React39__namespace.useCallback(() => {
     clearTimers();
   }, [clearTimers]);
-  const handleContentPointerLeave = React37__namespace.useCallback(() => {
+  const handleContentPointerLeave = React39__namespace.useCallback(() => {
     clearTimers();
     closeTimerRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
   }, [hoverCloseDelay, clearTimers]);
-  React37__namespace.useEffect(() => () => clearTimers(), [clearTimers]);
+  React39__namespace.useEffect(() => () => clearTimers(), [clearTimers]);
   const Sub3 = menuPrimitive === "context" ? RxContextMenu__namespace.Sub : DropdownMenu__namespace.Sub;
   const SubTrigger3 = menuPrimitive === "context" ? RxContextMenu__namespace.SubTrigger : DropdownMenu__namespace.SubTrigger;
   const SubContent3 = menuPrimitive === "context" ? RxContextMenu__namespace.SubContent : DropdownMenu__namespace.SubContent;
@@ -1298,7 +1471,7 @@ function SubMenu({
         className: "w-full outline-none",
         onPointerEnter: handleTriggerPointerEnter,
         onPointerLeave: handleTriggerPointerLeave,
-        children: React37__namespace.isValidElement(trigger) ? React37__namespace.cloneElement(trigger, {
+        children: React39__namespace.isValidElement(trigger) ? React39__namespace.cloneElement(trigger, {
           isSubTrigger: true,
           // Auto-add chevron if missing
           trailingIcon: trigger.props.trailingIcon || /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_right", size: 20 })
@@ -1375,7 +1548,7 @@ function SubMenuContent({
   );
 }
 SubMenuContent.displayName = "SubMenuContent";
-var VerticalMenuDivider = React37__namespace.forwardRef((_a, ref) => {
+var VerticalMenuDivider = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, index, count, isGapVariant } = _b, props = __objRest(_b, ["className", "index", "count", "isGapVariant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "hr",
@@ -1395,7 +1568,7 @@ var VerticalMenuDivider = React37__namespace.forwardRef((_a, ref) => {
 });
 VerticalMenuDivider.displayName = "VerticalMenuDivider";
 var VerticalMenuGroup = MenuGroup;
-var VerticalMenuContent = React37__namespace.forwardRef(
+var VerticalMenuContent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1411,7 +1584,7 @@ var VerticalMenuContent = React37__namespace.forwardRef(
     const { colorVariant: contextColorVariant } = useMenuContext();
     const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
     const colors = colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
-    const renderedChildren = React37__namespace.useMemo(() => {
+    const renderedChildren = React39__namespace.useMemo(() => {
       const valid = flattenChildren(children);
       const groupCount = valid.length;
       const enhanced = valid.map((child, i) => {
@@ -1419,7 +1592,7 @@ var VerticalMenuContent = React37__namespace.forwardRef(
         if (typeof child.type === "string") return child;
         const defaultItemPosition = groupCount === 1 ? "standalone" : i === 0 ? "leading" : i === groupCount - 1 ? "trailing" : "middle";
         const itemPosition = (_a2 = child.props.itemPosition) != null ? _a2 : defaultItemPosition;
-        return React37__namespace.cloneElement(
+        return React39__namespace.cloneElement(
           child,
           {
             index: i,
@@ -1462,13 +1635,13 @@ var VerticalMenuContent = React37__namespace.forwardRef(
   }
 );
 VerticalMenuContent.displayName = "VerticalMenuContent";
-var VerticalMenu = React37__namespace.forwardRef((_a, ref) => {
+var VerticalMenu = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { children, colorVariant = "standard", className } = _b, props = __objRest(_b, ["children", "colorVariant", "className"]);
-  const noop = React37__namespace.useCallback(() => {
+  const noop = React39__namespace.useCallback(() => {
   }, []);
   const colors = colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
-  const containerRef = React37__namespace.useRef(null);
-  const mergedRef = React37__namespace.useCallback(
+  const containerRef = React39__namespace.useRef(null);
+  const mergedRef = React39__namespace.useCallback(
     (node) => {
       containerRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -1477,7 +1650,7 @@ var VerticalMenu = React37__namespace.forwardRef((_a, ref) => {
     },
     [ref]
   );
-  const handleKeyDown = React37__namespace.useCallback(
+  const handleKeyDown = React39__namespace.useCallback(
     (e) => {
       var _a2;
       if (!containerRef.current) return;
@@ -1560,7 +1733,7 @@ var VerticalMenu = React37__namespace.forwardRef((_a, ref) => {
 });
 VerticalMenu.displayName = "VerticalMenu";
 function detectSeparatorStyle(children) {
-  const child = React37__namespace.Children.toArray(children).find(React37__namespace.isValidElement);
+  const child = React39__namespace.Children.toArray(children).find(React39__namespace.isValidElement);
   if (child) {
     const style = child.props.separatorStyle;
     if (style) return style;
@@ -1641,11 +1814,11 @@ function AppBarColumn({
   maxItemCount,
   className
 }) {
-  const containerRef = React37__namespace.useRef(null);
-  const [visibleCount, setVisibleCount] = React37__namespace.useState(
+  const containerRef = React39__namespace.useRef(null);
+  const [visibleCount, setVisibleCount] = React39__namespace.useState(
     maxItemCount != null ? maxItemCount : items.length
   );
-  React37__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     if (maxItemCount !== void 0) {
       setVisibleCount(Math.min(maxItemCount, items.length));
       return;
@@ -1693,11 +1866,11 @@ function AppBarColumn({
   );
 }
 function AppBarRow({ items, maxItemCount, className }) {
-  const containerRef = React37__namespace.useRef(null);
-  const [visibleCount, setVisibleCount] = React37__namespace.useState(
+  const containerRef = React39__namespace.useRef(null);
+  const [visibleCount, setVisibleCount] = React39__namespace.useState(
     maxItemCount != null ? maxItemCount : items.length
   );
-  React37__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     if (maxItemCount !== void 0) {
       setVisibleCount(Math.min(maxItemCount, items.length));
       return;
@@ -1751,12 +1924,12 @@ function useAppBarScroll({
   collapsedHeight = 64,
   expandedHeight = 112
 } = {}) {
-  const [isScrolled, setIsScrolled] = React37__namespace.useState(false);
-  const [collapsedFraction, setCollapsedFraction] = React37__namespace.useState(0);
-  const [isHidden, setIsHidden] = React37__namespace.useState(false);
-  const prevScrollYRef = React37__namespace.useRef(0);
+  const [isScrolled, setIsScrolled] = React39__namespace.useState(false);
+  const [collapsedFraction, setCollapsedFraction] = React39__namespace.useState(0);
+  const [isHidden, setIsHidden] = React39__namespace.useState(false);
+  const prevScrollYRef = React39__namespace.useRef(0);
   const hideThreshold = 64;
-  React37__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     var _a;
     const scrollDistance = expandedHeight - collapsedHeight;
     const getScrollY = () => {
@@ -1891,7 +2064,7 @@ function useFlexibleAppBar({
     expandedHeight
   });
   const scrollProgress = react.useMotionValue(0);
-  React37__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     scrollProgress.set(
       shouldReduceMotion ? collapsedFraction > 0.5 ? 1 : 0 : collapsedFraction
     );
@@ -2269,7 +2442,7 @@ function SearchAppBar({
 }) {
   var _a, _b;
   const shouldReduceMotion = react.useReducedMotion();
-  const [isSearchOpen, setIsSearchOpen] = React37__namespace.useState(false);
+  const [isSearchOpen, setIsSearchOpen] = React39__namespace.useState(false);
   const { isScrolled } = useAppBarScroll({
     scrollElement,
     behavior: scrollBehavior === "exitUntilCollapsed" ? "pinned" : scrollBehavior
@@ -2410,8 +2583,8 @@ function SearchView({
   className
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React37__namespace.useRef(null);
-  React37__namespace.useEffect(() => {
+  const inputRef = React39__namespace.useRef(null);
+  React39__namespace.useEffect(() => {
     const timer = window.setTimeout(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -2702,7 +2875,7 @@ function SmallAppBar({
     "small-app-bar"
   ) });
 }
-var RippleItem = React37__namespace.memo(function RippleItem2({
+var RippleItem = React39__namespace.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -2746,8 +2919,8 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React37__namespace.useState([]);
-  const onPointerDown = React37__namespace.useCallback(
+  const [ripples, setRipples] = React39__namespace.useState([]);
+  const onPointerDown = React39__namespace.useCallback(
     (e) => {
       if (disabled) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -2764,7 +2937,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React37__namespace.useCallback((id) => {
+  const removeRipple = React39__namespace.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -3477,8 +3650,8 @@ var RoundedPolygon = class _RoundedPolygon {
       );
       const mid = c.pointOnCurve(0.5);
       const md = distanceSquared(mid.x - this.centerX, mid.y - this.centerY);
-      const m31 = Math.max(ad, md);
-      if (m31 > maxDistSq) maxDistSq = m31;
+      const m33 = Math.max(ad, md);
+      if (m33 > maxDistSq) maxDistSq = m33;
     }
     const d = Math.sqrt(maxDistSq);
     return [
@@ -4694,11 +4867,11 @@ function getNavigationShapeStyle(shape, width = 56, height = 56) {
 function isSquareShape(shape) {
   return Boolean(shape && shape !== "pill");
 }
-var NavigationBarContext = React37__namespace.createContext({ variant: "flexible" });
+var NavigationBarContext = React39__namespace.createContext({ variant: "flexible" });
 function cloneIconWithFill(icon, selected) {
-  if (!React37__namespace.isValidElement(icon)) return icon;
+  if (!React39__namespace.isValidElement(icon)) return icon;
   if (icon.type === Icon) {
-    return React37__namespace.cloneElement(
+    return React39__namespace.cloneElement(
       icon,
       { fill: selected ? 1 : 0, animateFill: true }
     );
@@ -4710,7 +4883,7 @@ function ActivePill({
   width = 56,
   height = 32
 }) {
-  const { activeIndicatorTransition } = React37__namespace.useContext(NavigationBarContext);
+  const { activeIndicatorTransition } = React39__namespace.useContext(NavigationBarContext);
   const shapeStyle = getNavigationShapeStyle(shape, width, height);
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
@@ -4782,7 +4955,7 @@ function IconContainer({ selected, badge, children }) {
     }
   );
 }
-var NavigationBarItemComponent = React37__namespace.forwardRef(
+var NavigationBarItemComponent = React39__namespace.forwardRef(
   ({
     selected,
     icon,
@@ -4806,7 +4979,7 @@ var NavigationBarItemComponent = React37__namespace.forwardRef(
       labelVisibility: contextLabelVisibility,
       shapeSize: contextShapeSize,
       itemClassName: contextItemClassName
-    } = React37__namespace.useContext(NavigationBarContext);
+    } = React39__namespace.useContext(NavigationBarContext);
     const activeShape = (_a = shapeProp != null ? shapeProp : contextShape) != null ? _a : "pill";
     const isSquare = isSquareShape(activeShape);
     const resolvedShapeSize = (_b = shapeSizeProp != null ? shapeSizeProp : contextShapeSize) != null ? _b : 56;
@@ -4820,7 +4993,7 @@ var NavigationBarItemComponent = React37__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
     });
-    const handleClick = React37__namespace.useCallback(
+    const handleClick = React39__namespace.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -4847,7 +5020,7 @@ var NavigationBarItemComponent = React37__namespace.forwardRef(
     const iconPillWidth = isSquare ? resolvedShapeSize : 56;
     const iconPillHeight = isSquare ? resolvedShapeSize : 32;
     if (asChild && children) {
-      const child = React37__namespace.Children.only(children);
+      const child = React39__namespace.Children.only(children);
       const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -4972,7 +5145,7 @@ var NavigationBarItemComponent = React37__namespace.forwardRef(
           onClick: handleClick,
           onPointerDown,
           className: itemClassName,
-          children: React37__namespace.cloneElement(child, { children: innerContent })
+          children: React39__namespace.cloneElement(child, { children: innerContent })
         }
       );
     }
@@ -5106,7 +5279,7 @@ var NavigationBarItemComponent = React37__namespace.forwardRef(
   }
 );
 NavigationBarItemComponent.displayName = "NavigationBarItem";
-var NavigationBarItem = React37__namespace.memo(NavigationBarItemComponent);
+var NavigationBarItem = React39__namespace.memo(NavigationBarItemComponent);
 var navContainerVariants = classVarianceAuthority.cva(
   "flex items-center justify-center select-none transition-transform duration-300 z-50",
   {
@@ -5132,7 +5305,7 @@ var navContainerVariants = classVarianceAuthority.cva(
     }
   }
 );
-var NavigationBarComponent = React37__namespace.forwardRef(
+var NavigationBarComponent = React39__namespace.forwardRef(
   ({
     variant = "flexible",
     itemLayout,
@@ -5149,18 +5322,18 @@ var NavigationBarComponent = React37__namespace.forwardRef(
     className,
     style
   }, ref) => {
-    const [isVisible, setIsVisible] = React37__namespace.useState(true);
-    const lastScrollY = React37__namespace.useRef(
+    const [isVisible, setIsVisible] = React39__namespace.useState(true);
+    const lastScrollY = React39__namespace.useRef(
       typeof window !== "undefined" ? window.scrollY : 0
     );
     const isSquare = isSquareShape(shape);
     const effectiveShapeSize = shapeSize != null ? shapeSize : isSquare ? 56 : 32;
-    const computedMinHeight = React37__namespace.useMemo(() => {
+    const computedMinHeight = React39__namespace.useMemo(() => {
       const baseHeight = variant === "baseline" ? 80 : 64;
       const requiredHeight = itemLayout === "horizontal" || labelVisibility === "unlabeled" ? effectiveShapeSize + 16 : effectiveShapeSize + 32;
       return Math.max(baseHeight, requiredHeight);
     }, [variant, itemLayout, labelVisibility, effectiveShapeSize]);
-    React37__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       if (typeof window === "undefined" || !hideOnScroll) {
         setIsVisible(true);
         return;
@@ -5244,8 +5417,8 @@ var NavigationBarComponent = React37__namespace.forwardRef(
   }
 );
 NavigationBarComponent.displayName = "NavigationBar";
-var NavigationBar = React37__namespace.memo(NavigationBarComponent);
-var NavigationRailContext = React37__namespace.createContext({
+var NavigationBar = React39__namespace.memo(NavigationBarComponent);
+var NavigationRailContext = React39__namespace.createContext({
   variant: "collapsed",
   labelVisibility: "labeled",
   activeIndicatorWidth: "hug"
@@ -5281,9 +5454,9 @@ var railContainerVariants = classVarianceAuthority.cva(
   }
 );
 function cloneIconWithFill2(icon, selected) {
-  if (!React37__namespace.isValidElement(icon)) return icon;
+  if (!React39__namespace.isValidElement(icon)) return icon;
   if (icon.type === Icon) {
-    return React37__namespace.cloneElement(
+    return React39__namespace.cloneElement(
       icon,
       { fill: selected ? 1 : 0, animateFill: true }
     );
@@ -5312,7 +5485,7 @@ function ActivePill2({
   width = 56,
   height = 32
 }) {
-  const { activeIndicatorTransition } = React37__namespace.useContext(NavigationRailContext);
+  const { activeIndicatorTransition } = React39__namespace.useContext(NavigationRailContext);
   const shapeStyle = getNavigationShapeStyle(shape, width, height);
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
@@ -5387,7 +5560,7 @@ function IconContainer2({ selected, badge, children }) {
     }
   );
 }
-var NavigationRailItemComponent = React37__namespace.forwardRef(
+var NavigationRailItemComponent = React39__namespace.forwardRef(
   ({
     selected,
     icon,
@@ -5410,7 +5583,7 @@ var NavigationRailItemComponent = React37__namespace.forwardRef(
       shape: contextShape,
       shapeSize: contextShapeSize,
       activeIndicatorWidth: contextActiveIndicatorWidth
-    } = React37__namespace.useContext(NavigationRailContext);
+    } = React39__namespace.useContext(NavigationRailContext);
     const activeShape = (_a = shapeProp != null ? shapeProp : contextShape) != null ? _a : "pill";
     const isSquare = isSquareShape(activeShape);
     const resolvedShapeSize = (_b = shapeSizeProp != null ? shapeSizeProp : contextShapeSize) != null ? _b : 56;
@@ -5420,12 +5593,12 @@ var NavigationRailItemComponent = React37__namespace.forwardRef(
     const enableLayout = !isModal;
     const isExpandedPill = isExpanded && !isSquare;
     const expandedPillWidthClass = activeIndicatorWidth === "fill" ? "w-full" : "w-fit";
-    const activePillId = `rail-pill-${React37__namespace.useId()}`;
+    const activePillId = `rail-pill-${React39__namespace.useId()}`;
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
     });
     const showLabel = isExpanded || labelVisibility === "labeled" || labelVisibility === "auto" && selected;
-    const handleClick = React37__namespace.useCallback(
+    const handleClick = React39__namespace.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -5447,7 +5620,7 @@ var NavigationRailItemComponent = React37__namespace.forwardRef(
     const iconPillWidth = isSquare ? resolvedShapeSize : 56;
     const iconPillHeight = isSquare ? resolvedShapeSize : 32;
     if (asChild && children) {
-      const child = React37__namespace.Children.only(children);
+      const child = React39__namespace.Children.only(children);
       const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           react.m.div,
@@ -5565,7 +5738,7 @@ var NavigationRailItemComponent = React37__namespace.forwardRef(
           onPointerDown,
           className: itemClassName,
           tabIndex: -1,
-          children: React37__namespace.cloneElement(child, { children: innerContent })
+          children: React39__namespace.cloneElement(child, { children: innerContent })
         }
       ) });
     }
@@ -5693,9 +5866,9 @@ var NavigationRailItemComponent = React37__namespace.forwardRef(
   }
 );
 NavigationRailItemComponent.displayName = "NavigationRailItem";
-var NavigationRailItem = React37__namespace.memo(NavigationRailItemComponent);
+var NavigationRailItem = React39__namespace.memo(NavigationRailItemComponent);
 function useRoving(navRef) {
-  React37__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     if (!navRef.current) return;
     const items = getMenuItems(navRef.current);
     const selected = items.find(
@@ -5705,7 +5878,7 @@ function useRoving(navRef) {
     const firstFocusable = selected != null ? selected : items[0];
     if (firstFocusable) firstFocusable.tabIndex = 0;
   }, [navRef]);
-  return React37__namespace.useCallback(
+  return React39__namespace.useCallback(
     (e) => {
       if (!navRef.current) return;
       const items = getMenuItems(navRef.current);
@@ -5733,7 +5906,7 @@ function useRoving(navRef) {
     [navRef]
   );
 }
-var NavigationRailComponent = React37__namespace.forwardRef(
+var NavigationRailComponent = React39__namespace.forwardRef(
   ({
     variant = "collapsed",
     labelVisibility = "labeled",
@@ -5757,9 +5930,9 @@ var NavigationRailComponent = React37__namespace.forwardRef(
     const isXr = variant === "xr";
     const isSpatial = isXr && fabPlacement === "spatialized";
     const applyAnimation = !isXr || !isSpatial;
-    const navRef = React37__namespace.useRef(null);
+    const navRef = React39__namespace.useRef(null);
     const handleKeyDown = useRoving(navRef);
-    const setRefs = React37__namespace.useCallback(
+    const setRefs = React39__namespace.useCallback(
       (node) => {
         navRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -5852,7 +6025,7 @@ var NavigationRailComponent = React37__namespace.forwardRef(
               children: fab
             }
           ),
-          React37__namespace.cloneElement(
+          React39__namespace.cloneElement(
             navElement,
             {
               className: cn(navBaseClasses, "pointer-events-auto")
@@ -5897,7 +6070,7 @@ var NavigationRailComponent = React37__namespace.forwardRef(
   }
 );
 NavigationRailComponent.displayName = "NavigationRail";
-var NavigationRail = React37__namespace.memo(NavigationRailComponent);
+var NavigationRail = React39__namespace.memo(NavigationRailComponent);
 function useSearchKeyboard({
   active,
   onActiveChange,
@@ -5906,14 +6079,14 @@ function useSearchKeyboard({
   itemCount,
   onSelectSuggestion
 }) {
-  const [activeIndex, setActiveIndex] = React37__namespace.useState(-1);
-  const resetKeyRef = React37__namespace.useRef(`${active}:${query}`);
+  const [activeIndex, setActiveIndex] = React39__namespace.useState(-1);
+  const resetKeyRef = React39__namespace.useRef(`${active}:${query}`);
   const currentKey = `${active}:${query}`;
   if (resetKeyRef.current !== currentKey) {
     resetKeyRef.current = currentKey;
     setActiveIndex(-1);
   }
-  const handleKeyDown = React37__namespace.useCallback(
+  const handleKeyDown = React39__namespace.useCallback(
     (e) => {
       if (!active) return;
       switch (e.key) {
@@ -5953,11 +6126,39 @@ function useSearchKeyboard({
       query
     ]
   );
-  const resetActiveIndex = React37__namespace.useCallback(() => {
+  const resetActiveIndex = React39__namespace.useCallback(() => {
     setActiveIndex(-1);
   }, []);
   return { activeIndex, handleKeyDown, resetActiveIndex };
 }
+var StateLayer = React39__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, hovered, focused, pressed } = _b, props = __objRest(_b, ["className", "hovered", "focused", "pressed"]);
+    let opacity = 0;
+    if (pressed) {
+      opacity = 0.12;
+    } else if (focused) {
+      opacity = 0.1;
+    } else if (hovered) {
+      opacity = 0.08;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.m.div,
+      __spreadValues({
+        ref,
+        className: cn(
+          "absolute inset-0 bg-current pointer-events-none rounded-[inherit]",
+          className
+        ),
+        initial: false,
+        animate: { opacity },
+        transition: { duration: 0.2 },
+        "aria-hidden": "true"
+      }, props)
+    ) });
+  }
+);
+StateLayer.displayName = "StateLayer";
 
 // src/ui/search/search.tokens.ts
 var SearchTokens = {
@@ -5996,7 +6197,12 @@ var SEARCH_COLORS = {
   /** SearchViewTokens.DividerColor → outline */
   divider: "var(--md-sys-color-outline)",
   /** Focus indicator → secondary */
-  focusIndicator: "var(--md-sys-color-secondary)"
+  focusIndicator: "var(--md-sys-color-secondary)",
+  /** State layer overlay for interactive hover/press */
+  stateLayer: "var(--md-sys-color-on-surface)"
+};
+var SEARCH_ELEVATION = {
+  level3: "elevation-3"
 };
 var SEARCH_TYPOGRAPHY = {
   /** BodyLarge — used for input text and placeholder. */
@@ -6021,10 +6227,10 @@ function AnimatedPlaceholder({
   className
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const containerRef = React37__namespace.useRef(null);
-  const spanRef = React37__namespace.useRef(null);
-  const [xOffset, setXOffset] = React37__namespace.useState(0);
-  const recalculate = React37__namespace.useCallback(() => {
+  const containerRef = React39__namespace.useRef(null);
+  const spanRef = React39__namespace.useRef(null);
+  const [xOffset, setXOffset] = React39__namespace.useState(0);
+  const recalculate = React39__namespace.useCallback(() => {
     const container = containerRef.current;
     const span = spanRef.current;
     if (!container || !span || textAlign === "left") {
@@ -6039,10 +6245,10 @@ function AnimatedPlaceholder({
       setXOffset(Math.max(0, containerWidth - textWidth));
     }
   }, [textAlign]);
-  React37__namespace.useLayoutEffect(() => {
+  React39__namespace.useLayoutEffect(() => {
     recalculate();
   }, [recalculate]);
-  React37__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(recalculate);
@@ -6101,6 +6307,7 @@ function SearchBar({
   onActiveChange,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   className,
@@ -6111,10 +6318,13 @@ function SearchBar({
   activeIndex
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React37__namespace.useRef(null);
-  const prevActiveRef = React37__namespace.useRef(active);
-  const isRestoringFocusRef = React37__namespace.useRef(false);
-  React37__namespace.useEffect(() => {
+  const inputRef = React39__namespace.useRef(null);
+  const prevActiveRef = React39__namespace.useRef(active);
+  const isRestoringFocusRef = React39__namespace.useRef(false);
+  const [isHovered, setIsHovered] = React39__namespace.useState(false);
+  const [isPressed, setIsPressed] = React39__namespace.useState(false);
+  const [isFocused, setIsFocused] = React39__namespace.useState(false);
+  React39__namespace.useEffect(() => {
     var _a;
     let rafId;
     if (prevActiveRef.current === true && active === false) {
@@ -6130,10 +6340,14 @@ function SearchBar({
     };
   }, [active]);
   const handleFocus = () => {
+    setIsFocused(true);
     if (!active && !isRestoringFocusRef.current) {
       onActiveChange(true);
     }
   };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
   const handleFormSubmit = (e) => {
     e.preventDefault();
     onSearch(query);
@@ -6152,18 +6366,39 @@ function SearchBar({
         layout: !shouldReduceMotion,
         layoutId: shouldReduceMotion ? void 0 : searchId,
         transition: shouldReduceMotion ? void 0 : SEARCH_BAR_EXPAND_SPRING,
-        className: cn("relative", className),
+        className: cn(
+          "relative group select-none",
+          SEARCH_ELEVATION.level3,
+          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 },
+        onPointerEnter: () => setIsHovered(true),
+        onPointerLeave: () => {
+          setIsHovered(false);
+          setIsPressed(false);
+        },
+        onPointerDown: () => setIsPressed(true),
+        onPointerUp: () => setIsPressed(false),
+        onPointerCancel: () => setIsPressed(false),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "absolute inset-0 rounded-full",
+              className: "absolute inset-0 rounded-full overflow-hidden",
               style: { backgroundColor: SEARCH_COLORS.container },
-              "aria-hidden": "true"
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                StateLayer,
+                {
+                  hovered: isHovered,
+                  focused: isFocused,
+                  pressed: isPressed,
+                  style: { color: SEARCH_COLORS.stateLayer }
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -6209,21 +6444,36 @@ function SearchBar({
                         ),
                         style: { color: SEARCH_COLORS.inputText },
                         onFocus: handleFocus,
+                        onBlur: handleBlur,
                         onChange: (e) => onQueryChange(e.target.value),
                         onKeyDown
                       }
                     )
                   }
                 ),
-                trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: "flex shrink-0 items-center justify-center",
-                    style: { color: SEARCH_COLORS.trailingIcon },
-                    "aria-hidden": "true",
-                    children: trailingIcon
-                  }
-                )
+                (trailingIcon || avatar) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "flex shrink-0 items-center justify-center",
+                      style: { color: SEARCH_COLORS.trailingIcon },
+                      "aria-hidden": "true",
+                      children: trailingIcon
+                    }
+                  ),
+                  avatar && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "flex shrink-0 items-center justify-center rounded-full overflow-hidden",
+                      style: {
+                        width: SearchTokens.avatarSize,
+                        height: SearchTokens.avatarSize
+                      },
+                      "aria-hidden": "true",
+                      children: avatar
+                    }
+                  )
+                ] })
               ] })
             }
           )
@@ -6233,7 +6483,7 @@ function SearchBar({
     ) })
   );
 }
-var SearchContext = React37__namespace.createContext(null);
+var SearchContext = React39__namespace.createContext(null);
 function SearchProvider({
   children,
   value
@@ -6241,15 +6491,15 @@ function SearchProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(SearchContext.Provider, { value, children });
 }
 function useSearch() {
-  const context = React37__namespace.useContext(SearchContext);
+  const context = React39__namespace.useContext(SearchContext);
   if (!context) {
     return { listboxId: "", activeIndex: -1 };
   }
   return context;
 }
 function useClickOutside(handler, enabled = true) {
-  const ref = React37.useRef(null);
-  React37.useEffect(() => {
+  const ref = React39.useRef(null);
+  React39.useEffect(() => {
     if (!enabled) return;
     const listener = (event) => {
       const el = ref.current;
@@ -6268,7 +6518,7 @@ function useClickOutside(handler, enabled = true) {
   return ref;
 }
 function useSearchViewFocus(inputRef, active) {
-  React37__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     if (!active) return;
     let raf2;
     const raf1 = requestAnimationFrame(() => {
@@ -6328,11 +6578,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 = React37__namespace.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React39__namespace.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React37__namespace.useState(false);
-  React37__namespace.useEffect(() => {
+  const [ready, setReady] = React39__namespace.useState(false);
+  React39__namespace.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -6377,7 +6627,7 @@ var IndeterminateSvg = React37__namespace.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React37__namespace.memo(function DeterminateSvg2({
+var DeterminateSvg = React39__namespace.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -6402,7 +6652,7 @@ var DeterminateSvg = React37__namespace.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React37__namespace.forwardRef(
+var LoadingIndicator = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -6537,7 +6787,7 @@ var ADDITIONAL_ROTATION_EASE_DURATION = 500;
 var DEFAULT_MIN_PROGRESS = 0.1;
 var DEFAULT_MAX_PROGRESS = 0.8;
 var PROGRESS_CYCLE_DURATION = 1500;
-var CircularProgress = React37__namespace.forwardRef(
+var CircularProgress = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -6591,19 +6841,19 @@ var CircularProgress = React37__namespace.forwardRef(
     const shouldShowDeterminateTrack = showTrack === "auto" ? true : showTrack;
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React37__namespace.useMemo(
+    const effectiveAmplitude = React39__namespace.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React37__namespace.useMemo(
+    const effectiveWavelength = React39__namespace.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const resolvedAmplitudeRange = React37__namespace.useMemo(
+    const resolvedAmplitudeRange = React39__namespace.useMemo(
       () => amplitudeRange != null ? amplitudeRange : [0, effectiveAmplitude],
       [amplitudeRange, effectiveAmplitude]
     );
-    const wavyActivePath = React37__namespace.useMemo(
+    const wavyActivePath = React39__namespace.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -6612,8 +6862,8 @@ var CircularProgress = React37__namespace.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React37__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React37__namespace.useMemo(
+    const circumference = React39__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React39__namespace.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -6621,17 +6871,17 @@ var CircularProgress = React37__namespace.forwardRef(
     const trackOffset = isDeterminate ? activeAngularFraction + gapForTrack : 0;
     const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
     const ActiveCircleElem = react.m.circle;
-    const indeterminateSvgRef = React37__namespace.useRef(null);
-    const indeterminateTrackRef = React37__namespace.useRef(null);
-    const indeterminateActiveRef = React37__namespace.useRef(null);
-    const indeterminateWavyTrackPathRef = React37__namespace.useRef(null);
-    const indeterminateWavyActivePathRef = React37__namespace.useRef(null);
-    const determinateWavyActivePathRef = React37__namespace.useRef(null);
-    const determinateWavyTrackPathRef = React37__namespace.useRef(null);
-    const cachedPathLengthRef = React37__namespace.useRef(0);
+    const indeterminateSvgRef = React39__namespace.useRef(null);
+    const indeterminateTrackRef = React39__namespace.useRef(null);
+    const indeterminateActiveRef = React39__namespace.useRef(null);
+    const indeterminateWavyTrackPathRef = React39__namespace.useRef(null);
+    const indeterminateWavyActivePathRef = React39__namespace.useRef(null);
+    const determinateWavyActivePathRef = React39__namespace.useRef(null);
+    const determinateWavyTrackPathRef = React39__namespace.useRef(null);
+    const cachedPathLengthRef = React39__namespace.useRef(0);
     const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 0);
     const amplitudeMV = react.useMotionValue(isWavy ? effectiveAmplitude : 0);
-    React37__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       if (isDeterminate) {
         react.animate(fractionMV, clampedValue / 100, {
           duration: 0.4,
@@ -6639,7 +6889,7 @@ var CircularProgress = React37__namespace.forwardRef(
         });
       }
     }, [clampedValue, isDeterminate, fractionMV]);
-    React37__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       if (!isDeterminate || !isWavy) return;
       const fraction = clampedValue / 100;
       let targetAmp = effectiveAmplitude;
@@ -6659,7 +6909,7 @@ var CircularProgress = React37__namespace.forwardRef(
       amplitudeMV,
       determinateAnimation
     ]);
-    React37__namespace.useLayoutEffect(() => {
+    React39__namespace.useLayoutEffect(() => {
       if (!isWavy || !wavyActivePath) {
         cachedPathLengthRef.current = circumference;
         return;
@@ -7036,9 +7286,9 @@ var CircularProgress = React37__namespace.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React37__namespace.useState(0);
-  const observerRef = React37__namespace.useRef(null);
-  const ref = React37__namespace.useCallback((node) => {
+  const [width, setWidth] = React39__namespace.useState(0);
+  const observerRef = React39__namespace.useRef(null);
+  const ref = React39__namespace.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -7052,7 +7302,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React37__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -7062,7 +7312,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React37__namespace.useCallback(
+  return React39__namespace.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -7076,7 +7326,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React37__namespace.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React39__namespace.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -7152,7 +7402,7 @@ var FlatLinearTrack = React37__namespace.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React37__namespace.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React39__namespace.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -7171,13 +7421,13 @@ var WavyLinearTrack = React37__namespace.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React37__namespace.useId();
+  const titleId = React39__namespace.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React37__namespace.useRef(null);
-  const trackPathRef = React37__namespace.useRef(null);
+  const activePathRef = React39__namespace.useRef(null);
+  const trackPathRef = React39__namespace.useRef(null);
   const amplitudeMV = react.useMotionValue(amplitude);
   const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React37__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -7365,7 +7615,7 @@ var WavyLinearTrack = React37__namespace.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React37__namespace.forwardRef(
+var LinearProgress = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -7406,10 +7656,10 @@ var LinearProgress = React37__namespace.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React37__namespace.useRef(null);
+    const containerRef = React39__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React37__namespace.useState(false);
-    React37__namespace.useEffect(() => {
+    const [isRtl, setIsRtl] = React39__namespace.useState(false);
+    React39__namespace.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -7417,16 +7667,16 @@ var LinearProgress = React37__namespace.forwardRef(
     }, []);
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
     const isWavy = shape === "wavy" || resolvedTrackShape === "wavy";
-    const effectiveAmplitude = React37__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React37__namespace.useMemo(
+    const effectiveAmplitude = React39__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React39__namespace.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React37__namespace.useMemo(
+    const shouldShowStop = React39__namespace.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && showStopIndicator !== false,
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React37__namespace.useMemo(
+    const stopSize = React39__namespace.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -7501,7 +7751,7 @@ var LinearProgress = React37__namespace.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React37__namespace.forwardRef((props, ref) => {
+var ProgressIndicator = React39__namespace.forwardRef((props, ref) => {
   if (props.variant === "circular") {
     return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, __spreadValues({ ref }, props));
   }
@@ -7633,7 +7883,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React37__namespace.forwardRef(
+var IconButtonComponent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7675,18 +7925,18 @@ var IconButtonComponent = React37__namespace.forwardRef(
     var _a2, _b2, _c, _d, _e;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React37__namespace.useMemo(
+    const resolvedColorClass = React39__namespace.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React37__namespace.useMemo(
+    const outlineWidthClass = React39__namespace.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React37__namespace.useMemo(
+    const disabledBgClass = React39__namespace.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -7709,7 +7959,7 @@ var IconButtonComponent = React37__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React37__namespace.useCallback(
+    const handleClick = React39__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -7719,7 +7969,7 @@ var IconButtonComponent = React37__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React37__namespace.useCallback(
+    const handleKeyDown = React39__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -7775,7 +8025,7 @@ var IconButtonComponent = React37__namespace.forwardRef(
             width: isCustomSize ? `${iconSize}px` : void 0,
             height: isCustomSize ? `${iconSize}px` : void 0
           },
-          children: isSelected && selectedIcon ? selectedIcon : asChild ? React37__namespace.Children.only(children).props.children : children
+          children: isSelected && selectedIcon ? selectedIcon : asChild ? React39__namespace.Children.only(children).props.children : children
         }),
         isSelected && selectedIcon ? "selected-content" : "content"
       ) })
@@ -7792,7 +8042,7 @@ var IconButtonComponent = React37__namespace.forwardRef(
       className
     );
     if (asChild) {
-      const child = React37__namespace.Children.only(children);
+      const child = React39__namespace.Children.only(children);
       return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         reactSlot.Slot,
         __spreadProps(__spreadValues({
@@ -7809,7 +8059,7 @@ var IconButtonComponent = React37__namespace.forwardRef(
           }),
           className: containerClassName
         }, restProps), {
-          children: React37__namespace.cloneElement(child, { children: innerContent })
+          children: React39__namespace.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -7837,44 +8087,81 @@ var IconButtonComponent = React37__namespace.forwardRef(
   }
 );
 IconButtonComponent.displayName = "IconButton";
-var IconButton = React37__namespace.memo(IconButtonComponent);
+var IconButton = React39__namespace.memo(IconButtonComponent);
 function TrailingAction({
   query,
   trailingIcon,
+  avatar,
   onClear
 }) {
-  if (query) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
+  const shouldReduceMotion = react.useReducedMotion();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: query ? /* @__PURE__ */ jsxRuntime.jsx(
+      react.m.div,
       {
-        size: "sm",
-        style: { color: SEARCH_COLORS.trailingIcon },
-        "aria-label": "Clear search",
-        onClick: onClear,
+        initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.8 },
+        animate: { opacity: 1, scale: 1 },
+        exit: shouldReduceMotion ? {} : { opacity: 0, scale: 0.8 },
+        transition: { duration: 0.15 },
+        className: "flex items-center justify-center",
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+          IconButton,
           {
-            className: "material-symbols-rounded select-none leading-none",
-            style: { fontSize: 20 },
-            "aria-hidden": "true",
-            children: "close"
+            size: "sm",
+            style: { color: SEARCH_COLORS.trailingIcon },
+            "aria-label": "Clear search",
+            onClick: onClear,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "material-symbols-rounded select-none leading-none",
+                style: { fontSize: 20 },
+                "aria-hidden": "true",
+                children: "close"
+              }
+            )
           }
         )
-      }
-    );
-  }
-  if (trailingIcon) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+      },
+      "clear-action"
+    ) : trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
+      react.m.span,
       {
+        initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.8 },
+        animate: { opacity: 1, scale: 1 },
+        exit: shouldReduceMotion ? {} : { opacity: 0, scale: 0.8 },
+        transition: { duration: 0.15 },
         className: "flex shrink-0 items-center justify-center",
         style: { color: SEARCH_COLORS.trailingIcon },
         "aria-hidden": "true",
         children: trailingIcon
+      },
+      "trailing-icon"
+    ) }),
+    avatar && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "flex shrink-0 items-center justify-center rounded-full overflow-hidden",
+        style: {
+          width: SearchTokens.avatarSize,
+          height: SearchTokens.avatarSize
+        },
+        "aria-hidden": "true",
+        children: avatar
       }
-    );
-  }
-  return null;
+    )
+  ] });
+}
+function DefaultSearchIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "material-symbols-rounded select-none leading-none",
+      style: { fontSize: SearchTokens.iconSize },
+      "aria-hidden": "true",
+      children: "search"
+    }
+  );
 }
 function SearchViewDocked({
   query,
@@ -7884,6 +8171,7 @@ function SearchViewDocked({
   onActiveChange,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   styleType = "contained",
@@ -7897,7 +8185,7 @@ function SearchViewDocked({
   activeIndex
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React37__namespace.useRef(null);
+  const inputRef = React39__namespace.useRef(null);
   useSearchViewFocus(inputRef, active);
   const dropdownRef = useClickOutside(() => {
     onActiveChange(false);
@@ -7916,10 +8204,12 @@ function SearchViewDocked({
       react.m.div,
       {
         ref: dropdownRef,
+        layout: !shouldReduceMotion,
         layoutId: shouldReduceMotion ? void 0 : searchId,
         className: cn(
           // DockedContainerShape = CornerExtraLarge = 28dp radius
           "rounded-[28px] overflow-hidden",
+          SEARCH_ELEVATION.level3,
           viewClassName
         ),
         style: { backgroundColor: SEARCH_COLORS.container },
@@ -7941,7 +8231,7 @@ function SearchViewDocked({
                     className: "flex shrink-0 items-center justify-center",
                     style: { color: SEARCH_COLORS.leadingIcon },
                     "aria-hidden": "true",
-                    children: leadingIcon
+                    children: leadingIcon != null ? leadingIcon : /* @__PURE__ */ jsxRuntime.jsx(DefaultSearchIcon2, {})
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -7982,6 +8272,7 @@ function SearchViewDocked({
                   {
                     query,
                     trailingIcon,
+                    avatar,
                     onClear: () => onQueryChange("")
                   }
                 )
@@ -8002,7 +8293,7 @@ function SearchViewDocked({
               id: listboxId,
               role: "listbox",
               "aria-label": `${ariaLabel} results`,
-              className: "min-h-30",
+              className: "min-h-[120px]",
               children
             }
           )
@@ -8031,6 +8322,7 @@ function SearchViewFullScreen({
   onActiveChange,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   styleType = "contained",
@@ -8043,10 +8335,10 @@ function SearchViewFullScreen({
   activeIndex
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React37__namespace.useRef(null);
+  const inputRef = React39__namespace.useRef(null);
   useSearchViewFocus(inputRef, active);
-  const [mounted, setMounted] = React37__namespace.useState(false);
-  React37__namespace.useEffect(() => {
+  const [mounted, setMounted] = React39__namespace.useState(false);
+  React39__namespace.useEffect(() => {
     setMounted(true);
   }, []);
   const handleFormSubmit = (e) => {
@@ -8145,6 +8437,7 @@ function SearchViewFullScreen({
                   {
                     query,
                     trailingIcon,
+                    avatar,
                     onClear: () => onQueryChange("")
                   }
                 )
@@ -8196,6 +8489,7 @@ function SearchComponent({
   hasGap = false,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   children,
@@ -8204,10 +8498,10 @@ function SearchComponent({
   className,
   viewClassName
 }) {
-  const generatedId = React37__namespace.useId();
+  const generatedId = React39__namespace.useId();
   const searchId = id != null ? id : generatedId;
   const listboxId = `${searchId}-listbox`;
-  const itemCount = React37__namespace.Children.count(children);
+  const itemCount = React39__namespace.Children.count(children);
   const { activeIndex, handleKeyDown } = useSearchKeyboard({
     active,
     onActiveChange,
@@ -8223,6 +8517,7 @@ function SearchComponent({
     onActiveChange,
     leadingIcon,
     trailingIcon,
+    avatar,
     placeholder,
     textAlign,
     "aria-label": ariaLabel,
@@ -8266,9 +8561,9 @@ function formatBadgeLabel(children, max) {
   return "";
 }
 function detectBadgeHasContent(badge) {
-  return React37__namespace.isValidElement(badge) && badge.props.children != null;
+  return React39__namespace.isValidElement(badge) && badge.props.children != null;
 }
-var BadgeImpl = React37__namespace.forwardRef(
+var BadgeImpl = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -8305,7 +8600,7 @@ var BadgeImpl = React37__namespace.forwardRef(
         exit: { scale: 0, opacity: 0 },
         transition: springTransition,
         className: cn(
-          "rounded-full ring-[1.5px] ring-m3-surface",
+          "rounded-full ring-[1.5px] ring-m3-surface shrink-0",
           !containerColor && "bg-m3-error",
           hasContent ? cn(
             "inline-flex items-center justify-center",
@@ -8322,7 +8617,7 @@ var BadgeImpl = React37__namespace.forwardRef(
   }
 );
 BadgeImpl.displayName = "Badge";
-React37__namespace.memo(BadgeImpl);
+React39__namespace.memo(BadgeImpl);
 function BadgedBox({
   badge,
   children,
@@ -8343,9 +8638,9 @@ function BadgedBox({
     )
   ] });
 }
-var TabsContext = React37__namespace.createContext(null);
+var TabsContext = React39__namespace.createContext(null);
 function useTabsContext() {
-  const ctx = React37__namespace.useContext(TabsContext);
+  const ctx = React39__namespace.useContext(TabsContext);
   if (!ctx) {
     throw new Error(
       "[MD3 Tabs] Component must be used within a <Tabs> root. Ensure <TabsList>, <Tab>, and <TabsContent> are descendants of <Tabs>."
@@ -8353,7 +8648,7 @@ function useTabsContext() {
   }
   return ctx;
 }
-var TabsComponent = React37__namespace.forwardRef(
+var TabsComponent = React39__namespace.forwardRef(
   ({
     value: controlledValue,
     defaultValue = "",
@@ -8362,35 +8657,35 @@ var TabsComponent = React37__namespace.forwardRef(
     children,
     className
   }, ref) => {
-    const [internalValue, setInternalValue] = React37__namespace.useState(defaultValue);
+    const [internalValue, setInternalValue] = React39__namespace.useState(defaultValue);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const handleValueChange = React37__namespace.useCallback(
+    const handleValueChange = React39__namespace.useCallback(
       (newValue) => {
         if (!isControlled) setInternalValue(newValue);
         onValueChange == null ? void 0 : onValueChange(newValue);
       },
       [isControlled, onValueChange]
     );
-    const [focusedValue, setFocusedValue] = React37__namespace.useState(value);
-    React37__namespace.useEffect(() => {
+    const [focusedValue, setFocusedValue] = React39__namespace.useState(value);
+    React39__namespace.useEffect(() => {
       setFocusedValue(value);
     }, [value]);
-    const [tabValues, setTabValues] = React37__namespace.useState([]);
-    const registerTab = React37__namespace.useCallback((tabValue) => {
+    const [tabValues, setTabValues] = React39__namespace.useState([]);
+    const registerTab = React39__namespace.useCallback((tabValue) => {
       setTabValues((prev) => {
         if (prev.includes(tabValue)) return prev;
         return [...prev, tabValue];
       });
     }, []);
-    const unregisterTab = React37__namespace.useCallback((tabValue) => {
+    const unregisterTab = React39__namespace.useCallback((tabValue) => {
       setTabValues((prev) => prev.filter((v) => v !== tabValue));
     }, []);
-    const hasAutoSelected = React37__namespace.useRef(false);
-    const [disabledValues, setDisabledValues] = React37__namespace.useState(
+    const hasAutoSelected = React39__namespace.useRef(false);
+    const [disabledValues, setDisabledValues] = React39__namespace.useState(
       /* @__PURE__ */ new Set()
     );
-    const markTabDisabled = React37__namespace.useCallback(
+    const markTabDisabled = React39__namespace.useCallback(
       (tabValue, disabled) => {
         setDisabledValues((prev) => {
           const next = new Set(prev);
@@ -8404,7 +8699,7 @@ var TabsComponent = React37__namespace.forwardRef(
       },
       []
     );
-    React37__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       if (isControlled || hasAutoSelected.current || tabValues.length === 0) {
         return;
       }
@@ -8419,9 +8714,9 @@ var TabsComponent = React37__namespace.forwardRef(
         setFocusedValue(firstEnabled);
       }
     }, [tabValues, disabledValues, isControlled, value]);
-    const id = React37__namespace.useId();
+    const id = React39__namespace.useId();
     const layoutGroupId = `tabs-${id}`;
-    const contextValue = React37__namespace.useMemo(
+    const contextValue = React39__namespace.useMemo(
       () => ({
         value,
         onValueChange: handleValueChange,
@@ -8452,12 +8747,12 @@ var TabsComponent = React37__namespace.forwardRef(
   }
 );
 TabsComponent.displayName = "Tabs";
-var Tabs = React37__namespace.memo(TabsComponent);
-var TabsListContext = React37__namespace.createContext(
+var Tabs = React39__namespace.memo(TabsComponent);
+var TabsListContext = React39__namespace.createContext(
   null
 );
 function useTabsListContext() {
-  const ctx = React37__namespace.useContext(TabsListContext);
+  const ctx = React39__namespace.useContext(TabsListContext);
   return ctx != null ? ctx : { variant: "primary", scrollable: false };
 }
 
@@ -8541,7 +8836,7 @@ var TABS_CONTENT_TRANSITION = {
   ease: "easeInOut"
 };
 var INDICATOR_MIN_WIDTH = 24;
-var TabComponent = React37__namespace.forwardRef(
+var TabComponent = React39__namespace.forwardRef(
   ({
     value,
     icon,
@@ -8571,9 +8866,9 @@ var TabComponent = React37__namespace.forwardRef(
     const isFocused = focusedValue === value;
     const hasIcon = icon != null;
     const isStackedIcon = hasIcon && !inlineIcon;
-    const buttonRef = React37__namespace.useRef(null);
-    const isFirstMount = React37__namespace.useRef(true);
-    const mergedRef = React37__namespace.useCallback(
+    const buttonRef = React39__namespace.useRef(null);
+    const isFirstMount = React39__namespace.useRef(true);
+    const mergedRef = React39__namespace.useCallback(
       (node) => {
         buttonRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -8581,15 +8876,15 @@ var TabComponent = React37__namespace.forwardRef(
       },
       [ref]
     );
-    React37__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       registerTab(value);
       return () => unregisterTab(value);
     }, [value, registerTab, unregisterTab]);
-    React37__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       markTabDisabled(value, disabled);
       return () => markTabDisabled(value, false);
     }, [value, disabled, markTabDisabled]);
-    const handleKeyDown = React37__namespace.useCallback(
+    const handleKeyDown = React39__namespace.useCallback(
       (e) => {
         const isRtl = buttonRef.current ? getComputedStyle(buttonRef.current).direction === "rtl" : false;
         const enabledValues = tabValues.filter((v) => !disabledValues.has(v));
@@ -8643,7 +8938,7 @@ var TabComponent = React37__namespace.forwardRef(
         autoActivate
       ]
     );
-    React37__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       if (isFirstMount.current) {
         isFirstMount.current = false;
         return;
@@ -8652,7 +8947,7 @@ var TabComponent = React37__namespace.forwardRef(
         buttonRef.current.focus({ preventScroll: true });
       }
     }, [isFocused]);
-    React37__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       if (!isActive || !scrollable || !buttonRef.current) return;
       const btn = buttonRef.current;
       let container = btn.parentElement;
@@ -8789,8 +9084,8 @@ var TabComponent = React37__namespace.forwardRef(
   }
 );
 TabComponent.displayName = "Tab";
-var Tab = React37__namespace.memo(TabComponent);
-var TabsContentComponent = React37__namespace.forwardRef(
+var Tab = React39__namespace.memo(TabComponent);
+var TabsContentComponent = React39__namespace.forwardRef(
   ({ value, className, children }, ref) => {
     var _a;
     const { value: selectedValue, layoutGroupId } = useTabsContext();
@@ -8824,8 +9119,8 @@ var TabsContentComponent = React37__namespace.forwardRef(
   }
 );
 TabsContentComponent.displayName = "TabsContent";
-var TabsContent = React37__namespace.memo(TabsContentComponent);
-var TabsListComponent = React37__namespace.forwardRef(
+var TabsContent = React39__namespace.memo(TabsContentComponent);
+var TabsListComponent = React39__namespace.forwardRef(
   ({
     variant,
     scrollable = false,
@@ -8836,12 +9131,12 @@ var TabsListComponent = React37__namespace.forwardRef(
   }, ref) => {
     const { layoutGroupId, value, setFocusedValue } = useTabsContext();
     const listLayoutId = `${layoutGroupId}-list`;
-    const listContextValue = React37__namespace.useMemo(
+    const listContextValue = React39__namespace.useMemo(
       () => ({ variant, scrollable }),
       [variant, scrollable]
     );
     const bgColor = backgroundColor != null ? backgroundColor : "var(--md-sys-color-surface)";
-    const handleBlur = React37__namespace.useCallback(
+    const handleBlur = React39__namespace.useCallback(
       (e) => {
         const listEl = e.currentTarget;
         if (listEl.contains(e.relatedTarget)) return;
@@ -8890,7 +9185,7 @@ var TabsListComponent = React37__namespace.forwardRef(
   }
 );
 TabsListComponent.displayName = "TabsList";
-var TabsList = React37__namespace.memo(TabsListComponent);
+var TabsList = React39__namespace.memo(TabsListComponent);
 
 // src/ui/toolbar/toolbar-colors.ts
 var standardFloatingToolbarColors = {
@@ -8946,13 +9241,13 @@ function getToolbarColors(variant = "standard", customColors) {
       return standardFloatingToolbarColors;
   }
 }
-var ToolbarContext = React37__namespace.createContext(
+var ToolbarContext = React39__namespace.createContext(
   null
 );
 function useToolbarContext() {
-  return React37__namespace.useContext(ToolbarContext);
+  return React39__namespace.useContext(ToolbarContext);
 }
-var BottomDockedToolbar = React37__namespace.forwardRef(
+var BottomDockedToolbar = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "standard",
@@ -8985,8 +9280,8 @@ var BottomDockedToolbar = React37__namespace.forwardRef(
     const { scrollY } = react.useScroll(
       scrollContainerRef ? { container: scrollContainerRef } : void 0
     );
-    const [isHidden, setIsHidden] = React37__namespace.useState(false);
-    const lastScrollY = React37__namespace.useRef(0);
+    const [isHidden, setIsHidden] = React39__namespace.useState(false);
+    const lastScrollY = React39__namespace.useRef(0);
     react.useMotionValueEvent(scrollY, "change", (latest) => {
       if (!hideOnScroll) return;
       const diff = latest - lastScrollY.current;
@@ -9145,15 +9440,15 @@ function buildSlotVariants(xHidden, yHidden, isHorizontal) {
   };
 }
 function applyItemClassName(nodes, itemClassName) {
-  return React37__namespace.Children.map(nodes, (child) => {
-    if (!React37__namespace.isValidElement(child)) return child;
+  return React39__namespace.Children.map(nodes, (child) => {
+    if (!React39__namespace.isValidElement(child)) return child;
     const element = child;
-    return React37__namespace.cloneElement(element, {
+    return React39__namespace.cloneElement(element, {
       className: cn(element.props.className, itemClassName)
     });
   });
 }
-var FloatingToolbarBase = React37__namespace.forwardRef(
+var FloatingToolbarBase = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       expanded,
@@ -9325,11 +9620,11 @@ var FloatingToolbarBase = React37__namespace.forwardRef(
   }
 );
 FloatingToolbarBase.displayName = "FloatingToolbarBase";
-var HorizontalFloatingToolbar = React37__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbarBase, __spreadValues({ ref, orientation: "horizontal" }, props)));
+var HorizontalFloatingToolbar = React39__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbarBase, __spreadValues({ ref, orientation: "horizontal" }, props)));
 HorizontalFloatingToolbar.displayName = "HorizontalFloatingToolbar";
-var VerticalFloatingToolbar = React37__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbarBase, __spreadValues({ ref, orientation: "vertical" }, props)));
+var VerticalFloatingToolbar = React39__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbarBase, __spreadValues({ ref, orientation: "vertical" }, props)));
 VerticalFloatingToolbar.displayName = "VerticalFloatingToolbar";
-var FloatingToolbarWithFabBase = React37__namespace.forwardRef(
+var FloatingToolbarWithFabBase = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       expanded,
@@ -9457,9 +9752,9 @@ var FloatingToolbarWithFabBase = React37__namespace.forwardRef(
   }
 );
 FloatingToolbarWithFabBase.displayName = "FloatingToolbarWithFabBase";
-var HorizontalFloatingToolbarWithFab = React37__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbarWithFabBase, __spreadValues({ ref, orientation: "horizontal" }, props)));
+var HorizontalFloatingToolbarWithFab = React39__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbarWithFabBase, __spreadValues({ ref, orientation: "horizontal" }, props)));
 HorizontalFloatingToolbarWithFab.displayName = "HorizontalFloatingToolbarWithFab";
-var VerticalFloatingToolbarWithFab = React37__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbarWithFabBase, __spreadValues({ ref, orientation: "vertical" }, props)));
+var VerticalFloatingToolbarWithFab = React39__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbarWithFabBase, __spreadValues({ ref, orientation: "vertical" }, props)));
 VerticalFloatingToolbarWithFab.displayName = "VerticalFloatingToolbarWithFab";
 var ToolbarDivider = ({
   orientation: propsOrientation,
@@ -9495,7 +9790,7 @@ var VARIANT_TO_COLOR_STYLE = {
   tonal: "tonal",
   filled: "filled"
 };
-var ToolbarIconButton = React37__namespace.forwardRef(
+var ToolbarIconButton = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       emphasis = "standard",
@@ -9557,13 +9852,13 @@ function useFloatingToolbarScrollBehavior(options = {}) {
     expandThreshold = 10,
     scrollContainerRef
   } = options;
-  const [isExpanded, setIsExpanded] = React37.useState(true);
-  const [offset, setOffset] = React37.useState(0);
+  const [isExpanded, setIsExpanded] = React39.useState(true);
+  const [offset, setOffset] = React39.useState(0);
   const { scrollY } = react.useScroll({
     container: scrollContainerRef
   });
-  const lastScrollY = React37.useRef(0);
-  const accumulatedScroll = React37.useRef(0);
+  const lastScrollY = React39.useRef(0);
+  const accumulatedScroll = React39.useRef(0);
   react.useMotionValueEvent(scrollY, "change", (currentScrollY) => {
     const deltaY = currentScrollY - lastScrollY.current;
     if (currentScrollY < 0) return;
@@ -9585,7 +9880,7 @@ function useFloatingToolbarScrollBehavior(options = {}) {
       }
     }
   });
-  React37.useEffect(() => {
+  React39.useEffect(() => {
     if (typeof window !== "undefined") {
       const matchMedia = window.matchMedia("(forced-colors: active)");
       if (matchMedia.matches) {
@@ -9667,7 +9962,7 @@ var MOTION_PROP_KEYS = [
   "layoutId",
   "onLayoutAnimationComplete"
 ];
-var ToolbarToggleButton = React37__namespace.forwardRef(
+var ToolbarToggleButton = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       emphasis = "standard",
@@ -9701,7 +9996,7 @@ var ToolbarToggleButton = React37__namespace.forwardRef(
       "onPointerLeave"
     ]);
     const context = useToolbarContext();
-    const [isPressed, setIsPressed] = React37__namespace.useState(false);
+    const [isPressed, setIsPressed] = React39__namespace.useState(false);
     const {
       ripples,
       onPointerDown: handleRipplePointerDown,
@@ -9709,7 +10004,7 @@ var ToolbarToggleButton = React37__namespace.forwardRef(
     } = useRippleState({
       disabled: Boolean(disabled) || !ripple
     });
-    const handlePointerDown = React37__namespace.useCallback(
+    const handlePointerDown = React39__namespace.useCallback(
       (e) => {
         setIsPressed(true);
         if (!disabled && ripple) {
@@ -9719,14 +10014,14 @@ var ToolbarToggleButton = React37__namespace.forwardRef(
       },
       [disabled, ripple, handleRipplePointerDown, onPointerDownProp]
     );
-    const handlePointerUp = React37__namespace.useCallback(
+    const handlePointerUp = React39__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUpProp == null ? void 0 : onPointerUpProp(e);
       },
       [onPointerUpProp]
     );
-    const handlePointerLeave = React37__namespace.useCallback(
+    const handlePointerLeave = React39__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerLeaveProp == null ? void 0 : onPointerLeaveProp(e);
@@ -9745,14 +10040,14 @@ var ToolbarToggleButton = React37__namespace.forwardRef(
       context == null ? void 0 : context.itemClassName,
       className
     );
-    const animateConfig = React37__namespace.useMemo(
+    const animateConfig = React39__namespace.useMemo(
       () => ({
         scaleX: pressExpand && isPressed ? 1 + pressExpandRatio : 1,
         borderRadius: isPressed ? ToolbarToggleButtonRadiusTokens.pressedRadius : ToolbarToggleButtonRadiusTokens.pillRadius
       }),
       [pressExpand, pressExpandRatio, isPressed]
     );
-    const transitionConfig = React37__namespace.useMemo(
+    const transitionConfig = React39__namespace.useMemo(
       () => ({
         scaleX: FAST_SPATIAL_SPRING,
         borderRadius: BUTTON_RADIUS_SPRING
@@ -9774,7 +10069,7 @@ var ToolbarToggleButton = React37__namespace.forwardRef(
       children && (typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children }) : children)
     ] });
     if (asChild) {
-      const child = React37__namespace.Children.only(children);
+      const child = React39__namespace.Children.only(children);
       const childContent = child.props.children;
       const innerChildContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         ripple && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9813,7 +10108,7 @@ var ToolbarToggleButton = React37__namespace.forwardRef(
           onPointerUp: handlePointerUp,
           onPointerLeave: handlePointerLeave
         }, strippedProps), {
-          children: React37__namespace.cloneElement(child, { children: innerChildContent })
+          children: React39__namespace.cloneElement(child, { children: innerChildContent })
         })
       ) });
     }
@@ -9900,6 +10195,7 @@ exports.SEARCH_BAR_EXIT_SPRING = SEARCH_BAR_EXIT_SPRING;
 exports.SEARCH_BAR_EXPAND_SPRING = SEARCH_BAR_EXPAND_SPRING;
 exports.SEARCH_COLORS = SEARCH_COLORS;
 exports.SEARCH_DOCKED_REVEAL_SPRING = SEARCH_DOCKED_REVEAL_SPRING;
+exports.SEARCH_ELEVATION = SEARCH_ELEVATION;
 exports.SEARCH_FULLSCREEN_SPRING = SEARCH_FULLSCREEN_SPRING;
 exports.SEARCH_TYPOGRAPHY = SEARCH_TYPOGRAPHY;
 exports.SEARCH_VIEW_SPRING = SEARCH_VIEW_SPRING;