@bug-on/md3-react 3.0.0 → 3.0.2

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React38 = require('react');
+var React39 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var materialColorUtilities = require('@material/material-color-utilities');
 var clsx = require('clsx');
@@ -33,7 +33,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React38__namespace = /*#__PURE__*/_interopNamespace(React38);
+var React39__namespace = /*#__PURE__*/_interopNamespace(React39);
 var RxContextMenu__namespace = /*#__PURE__*/_interopNamespace(RxContextMenu);
 var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
 var RadixScrollArea__namespace = /*#__PURE__*/_interopNamespace(RadixScrollArea);
@@ -79,8 +79,8 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 function useMediaQuery(query) {
-  const [matches, setMatches] = React38.useState(false);
-  React38.useEffect(() => {
+  const [matches, setMatches] = React39.useState(false);
+  React39.useEffect(() => {
     const mql = window.matchMedia(query);
     const handler = (e) => setMatches(e.matches);
     setMatches(mql.matches);
@@ -96,8 +96,8 @@ function useRipple(options = {}) {
     opacity = 0.12,
     disabled = false
   } = options;
-  const ref = React38.useRef(null);
-  const onPointerDown = React38.useCallback(
+  const ref = React39.useRef(null);
+  const onPointerDown = React39.useCallback(
     (event) => {
       if (disabled || !ref.current) return;
       const el = ref.current;
@@ -178,6 +178,11 @@ function MaterialSymbolsPreconnect({
     )
   ] });
 }
+function resolveMode(mode) {
+  if (mode !== "system") return mode;
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
 function generateM3Theme(sourceColorHex, mode = "light") {
   const sourceColor = materialColorUtilities.argbFromHex(sourceColorHex);
   const theme = materialColorUtilities.themeFromSourceColor(sourceColor);
@@ -236,13 +241,14 @@ function generateM3Theme(sourceColorHex, mode = "light") {
   };
 }
 function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
-  const colors = generateM3Theme(sourceColorHex, mode);
+  const resolved = resolveMode(mode);
+  const colors = generateM3Theme(sourceColorHex, resolved);
   for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m47) => `-${m47.toLowerCase()}`);
+    const kebabKey = key.replace(/[A-Z]/g, (m48) => `-${m48.toLowerCase()}`);
     root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
     root.style.setProperty(`--color-m3-${kebabKey}`, value);
   }
-  root.setAttribute("data-theme", mode);
+  root.setAttribute("data-theme", resolved);
 }
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -499,7 +505,7 @@ var SUBMENU_CONTAINER_VARIANTS = {
     transition: FAST_EFFECTS_TRANSITION
   }
 };
-var MenuContext = React38__namespace.createContext({
+var MenuContext = React39__namespace.createContext({
   variant: "baseline",
   colorVariant: "standard",
   menuPrimitive: "dropdown",
@@ -515,15 +521,15 @@ function MenuProvider({
   onOpenChange,
   children
 }) {
-  const value = React38__namespace.useMemo(
+  const value = React39__namespace.useMemo(
     () => ({ variant, colorVariant, menuPrimitive, open, onOpenChange }),
     [variant, colorVariant, menuPrimitive, open, onOpenChange]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children });
 }
 function useMenuContext() {
-  const ctx = React38__namespace.useContext(MenuContext);
-  return React38__namespace.useMemo(
+  const ctx = React39__namespace.useContext(MenuContext);
+  return React39__namespace.useMemo(
     () => __spreadProps(__spreadValues({}, ctx), {
       isStatic: ctx.menuPrimitive === "static",
       menuVariant: ctx.variant
@@ -640,7 +646,7 @@ function ContextMenu({
   variant = "baseline",
   colorVariant = "standard"
 }) {
-  const [open, setOpen] = React38__namespace.useState(false);
+  const [open, setOpen] = React39__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     MenuProvider,
     {
@@ -654,12 +660,12 @@ function ContextMenu({
   );
 }
 ContextMenu.displayName = "ContextMenu";
-var ContextMenuTrigger = React38__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 = React38__namespace.forwardRef(
+var ContextMenuContent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -707,10 +713,10 @@ var ContextMenuContent = React38__namespace.forwardRef(
       className
     );
     const flattenChildren = (nodes) => {
-      return React38__namespace.Children.toArray(nodes).reduce(
+      return React39__namespace.Children.toArray(nodes).reduce(
         (acc, child) => {
-          if (React38__namespace.isValidElement(child)) {
-            if (child.type === React38__namespace.Fragment) {
+          if (React39__namespace.isValidElement(child)) {
+            if (child.type === React39__namespace.Fragment) {
               return acc.concat(
                 flattenChildren(
                   child.props.children
@@ -729,7 +735,7 @@ var ContextMenuContent = React38__namespace.forwardRef(
       const validChildren = flattenChildren(children);
       const groupCount = validChildren.length;
       const enhancedChildren = validChildren.map(
-        (child, i) => React38__namespace.cloneElement(
+        (child, i) => React39__namespace.cloneElement(
           child,
           {
             index: i,
@@ -793,12 +799,12 @@ function Menu(_a) {
   ]);
   var _a2;
   const resolvedVariant = (_a2 = variant != null ? variant : menuVariant) != null ? _a2 : "baseline";
-  const [internalOpen, setInternalOpen] = React38__namespace.useState(
+  const [internalOpen, setInternalOpen] = React39__namespace.useState(
     () => defaultOpen != null ? defaultOpen : false
   );
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const handleOpenChange = React38__namespace.useCallback(
+  const handleOpenChange = React39__namespace.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       controlledOnOpenChange == null ? void 0 : controlledOnOpenChange(next);
@@ -825,12 +831,12 @@ function Menu(_a) {
   );
 }
 Menu.displayName = "Menu";
-var MenuTrigger = React38__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 = React38__namespace.forwardRef(
+var MenuContent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -884,10 +890,10 @@ var MenuContent = React38__namespace.forwardRef(
       className
     );
     const flattenChildren = (nodes) => {
-      return React38__namespace.Children.toArray(nodes).reduce(
+      return React39__namespace.Children.toArray(nodes).reduce(
         (acc, child) => {
-          if (React38__namespace.isValidElement(child)) {
-            if (child.type === React38__namespace.Fragment) {
+          if (React39__namespace.isValidElement(child)) {
+            if (child.type === React39__namespace.Fragment) {
               return acc.concat(
                 flattenChildren(
                   child.props.children
@@ -906,7 +912,7 @@ var MenuContent = React38__namespace.forwardRef(
       const validChildren = flattenChildren(children);
       const groupCount = validChildren.length;
       const enhancedChildren = validChildren.map(
-        (child, i) => React38__namespace.cloneElement(child, {
+        (child, i) => React39__namespace.cloneElement(child, {
           index: i,
           count: groupCount,
           isGapVariant: isExpressiveGap
@@ -961,7 +967,7 @@ var MenuContent = React38__namespace.forwardRef(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuDivider = React38__namespace.forwardRef(
+var MenuDivider = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     const { menuVariant } = useMenuContext();
@@ -992,7 +998,7 @@ function getGroupPosition(index, count) {
 function getGroupActiveShape(position) {
   return GROUP_SHAPES[`${position}Active`];
 }
-var MenuGroup = React38__namespace.forwardRef(
+var MenuGroup = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1022,15 +1028,15 @@ var MenuGroup = React38__namespace.forwardRef(
     const colors = menuVariant === "baseline" ? BASELINE_COLORS : colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
     const position = getGroupPosition(index, count);
     const activeShape = getGroupActiveShape(position);
-    const [isHovered, setIsHovered] = React38__namespace.useState(false);
+    const [isHovered, setIsHovered] = React39__namespace.useState(false);
     const currentShape = isStatic || isHovered ? activeShape : GROUP_SHAPES.inactive;
-    const handlePointerEnter = React38__namespace.useCallback(() => setIsHovered(true), []);
-    const handlePointerLeave = React38__namespace.useCallback(() => setIsHovered(false), []);
+    const handlePointerEnter = React39__namespace.useCallback(() => setIsHovered(true), []);
+    const handlePointerLeave = React39__namespace.useCallback(() => setIsHovered(false), []);
     const flattenChildren = (children2) => {
-      return React38__namespace.Children.toArray(children2).reduce(
+      return React39__namespace.Children.toArray(children2).reduce(
         (acc, child) => {
-          if (React38__namespace.isValidElement(child)) {
-            if (child.type === React38__namespace.Fragment) {
+          if (React39__namespace.isValidElement(child)) {
+            if (child.type === React39__namespace.Fragment) {
               return acc.concat(
                 flattenChildren(
                   child.props.children
@@ -1048,7 +1054,7 @@ var MenuGroup = React38__namespace.forwardRef(
     const itemCount = validChildren.length;
     const enhancedChildren = validChildren.map((child, i) => {
       const itemPosition2 = itemCount === 1 ? "standalone" : i === 0 ? "leading" : i === itemCount - 1 ? "trailing" : "middle";
-      return React38__namespace.cloneElement(child, {
+      return React39__namespace.cloneElement(child, {
         itemPosition: itemPosition2,
         colorVariant
       });
@@ -1111,6 +1117,11 @@ var SPRING_TRANSITION = {
   bounce: 0,
   duration: 0.3
 };
+var SPRING_TRANSITION_EXPRESSIVE = {
+  type: "spring",
+  bounce: 0.45,
+  duration: 0.4
+};
 var ICON_SPAN_VARIANTS = {
   initial: { scale: 0.01 },
   animate: { scale: 1 },
@@ -1131,7 +1142,7 @@ var VARIANT_FONT = {
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React38__namespace.forwardRef(
+var IconComponent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1197,14 +1208,14 @@ var IconComponent = React38__namespace.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React38__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 = React38__namespace.forwardRef(
+var MenuItem = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1406,31 +1417,31 @@ function SubMenu({
 }) {
   const { colorVariant: contextColorVariant, menuPrimitive } = useMenuContext();
   const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
-  const [open, setOpen] = React38__namespace.useState(false);
-  const openTimerRef = React38__namespace.useRef(null);
-  const closeTimerRef = React38__namespace.useRef(
+  const [open, setOpen] = React39__namespace.useState(false);
+  const openTimerRef = React39__namespace.useRef(null);
+  const closeTimerRef = React39__namespace.useRef(
     null
   );
-  const clearTimers = React38__namespace.useCallback(() => {
+  const clearTimers = React39__namespace.useCallback(() => {
     if (openTimerRef.current) clearTimeout(openTimerRef.current);
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
   }, []);
-  const handleTriggerPointerEnter = React38__namespace.useCallback(() => {
+  const handleTriggerPointerEnter = React39__namespace.useCallback(() => {
     clearTimers();
     openTimerRef.current = setTimeout(() => setOpen(true), hoverOpenDelay);
   }, [hoverOpenDelay, clearTimers]);
-  const handleTriggerPointerLeave = React38__namespace.useCallback(() => {
+  const handleTriggerPointerLeave = React39__namespace.useCallback(() => {
     clearTimers();
     closeTimerRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
   }, [hoverCloseDelay, clearTimers]);
-  const handleContentPointerEnter = React38__namespace.useCallback(() => {
+  const handleContentPointerEnter = React39__namespace.useCallback(() => {
     clearTimers();
   }, [clearTimers]);
-  const handleContentPointerLeave = React38__namespace.useCallback(() => {
+  const handleContentPointerLeave = React39__namespace.useCallback(() => {
     clearTimers();
     closeTimerRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
   }, [hoverCloseDelay, clearTimers]);
-  React38__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;
@@ -1442,7 +1453,7 @@ function SubMenu({
         className: "w-full outline-none",
         onPointerEnter: handleTriggerPointerEnter,
         onPointerLeave: handleTriggerPointerLeave,
-        children: React38__namespace.isValidElement(trigger) ? React38__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 })
@@ -1519,7 +1530,7 @@ function SubMenuContent({
   );
 }
 SubMenuContent.displayName = "SubMenuContent";
-var VerticalMenuDivider = React38__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",
@@ -1539,7 +1550,7 @@ var VerticalMenuDivider = React38__namespace.forwardRef((_a, ref) => {
 });
 VerticalMenuDivider.displayName = "VerticalMenuDivider";
 var VerticalMenuGroup = MenuGroup;
-var VerticalMenuContent = React38__namespace.forwardRef(
+var VerticalMenuContent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1556,10 +1567,10 @@ var VerticalMenuContent = React38__namespace.forwardRef(
     const colorVariant = propColorVariant != null ? propColorVariant : contextColorVariant;
     const colors = colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
     const flattenChildren = (children2) => {
-      return React38__namespace.Children.toArray(children2).reduce(
+      return React39__namespace.Children.toArray(children2).reduce(
         (acc, child) => {
-          if (React38__namespace.isValidElement(child)) {
-            if (child.type === React38__namespace.Fragment) {
+          if (React39__namespace.isValidElement(child)) {
+            if (child.type === React39__namespace.Fragment) {
               return acc.concat(
                 flattenChildren(
                   child.props.children
@@ -1576,7 +1587,7 @@ var VerticalMenuContent = React38__namespace.forwardRef(
     const validChildren = flattenChildren(children);
     const groupCount = validChildren.length;
     const enhancedChildren = validChildren.map(
-      (child, i) => React38__namespace.cloneElement(child, {
+      (child, i) => React39__namespace.cloneElement(child, {
         index: i,
         count: groupCount,
         isGapVariant: separatorStyle === "gap"
@@ -1613,13 +1624,13 @@ var VerticalMenuContent = React38__namespace.forwardRef(
   }
 );
 VerticalMenuContent.displayName = "VerticalMenuContent";
-var VerticalMenu = React38__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 = React38__namespace.useCallback(() => {
+  const noop = React39__namespace.useCallback(() => {
   }, []);
   const colors = colorVariant === "vibrant" ? VIBRANT_COLORS : STANDARD_COLORS;
-  const containerRef = React38__namespace.useRef(null);
-  const mergedRef = React38__namespace.useCallback(
+  const containerRef = React39__namespace.useRef(null);
+  const mergedRef = React39__namespace.useCallback(
     (node) => {
       containerRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -1628,7 +1639,7 @@ var VerticalMenu = React38__namespace.forwardRef((_a, ref) => {
     },
     [ref]
   );
-  const handleKeyDown = React38__namespace.useCallback(
+  const handleKeyDown = React39__namespace.useCallback(
     (e) => {
       var _a2;
       if (!containerRef.current) return;
@@ -1711,7 +1722,7 @@ var VerticalMenu = React38__namespace.forwardRef((_a, ref) => {
 });
 VerticalMenu.displayName = "VerticalMenu";
 function detectSeparatorStyle(children) {
-  const child = React38__namespace.Children.toArray(children).find(React38__namespace.isValidElement);
+  const child = React39__namespace.Children.toArray(children).find(React39__namespace.isValidElement);
   if (child) {
     const style = child.props.separatorStyle;
     if (style) return style;
@@ -1792,11 +1803,11 @@ function AppBarColumn({
   maxItemCount,
   className
 }) {
-  const containerRef = React38__namespace.useRef(null);
-  const [visibleCount, setVisibleCount] = React38__namespace.useState(
+  const containerRef = React39__namespace.useRef(null);
+  const [visibleCount, setVisibleCount] = React39__namespace.useState(
     maxItemCount != null ? maxItemCount : items.length
   );
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     if (maxItemCount !== void 0) {
       setVisibleCount(Math.min(maxItemCount, items.length));
       return;
@@ -1844,11 +1855,11 @@ function AppBarColumn({
   );
 }
 function AppBarRow({ items, maxItemCount, className }) {
-  const containerRef = React38__namespace.useRef(null);
-  const [visibleCount, setVisibleCount] = React38__namespace.useState(
+  const containerRef = React39__namespace.useRef(null);
+  const [visibleCount, setVisibleCount] = React39__namespace.useState(
     maxItemCount != null ? maxItemCount : items.length
   );
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     if (maxItemCount !== void 0) {
       setVisibleCount(Math.min(maxItemCount, items.length));
       return;
@@ -1902,12 +1913,12 @@ function useAppBarScroll({
   collapsedHeight = 64,
   expandedHeight = 112
 } = {}) {
-  const [isScrolled, setIsScrolled] = React38__namespace.useState(false);
-  const [collapsedFraction, setCollapsedFraction] = React38__namespace.useState(0);
-  const [isHidden, setIsHidden] = React38__namespace.useState(false);
-  const prevScrollYRef = React38__namespace.useRef(0);
+  const [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;
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     var _a;
     const scrollDistance = expandedHeight - collapsedHeight;
     const getScrollY = () => {
@@ -2028,7 +2039,7 @@ function useFlexibleAppBar({
     expandedHeight
   });
   const scrollProgress = react.useMotionValue(0);
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     scrollProgress.set(
       shouldReduceMotion ? collapsedFraction > 0.5 ? 1 : 0 : collapsedFraction
     );
@@ -2369,7 +2380,7 @@ function SearchAppBar({
 }) {
   var _a, _b;
   const shouldReduceMotion = react.useReducedMotion();
-  const [isSearchOpen, setIsSearchOpen] = React38__namespace.useState(false);
+  const [isSearchOpen, setIsSearchOpen] = React39__namespace.useState(false);
   const { isScrolled } = useAppBarScroll({
     scrollElement,
     behavior: scrollBehavior === "exitUntilCollapsed" ? "pinned" : scrollBehavior
@@ -2483,8 +2494,8 @@ function SearchView({
   className
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React38__namespace.useRef(null);
-  React38__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();
@@ -2754,9 +2765,9 @@ function formatBadgeLabel(children, max) {
   return "";
 }
 function detectBadgeHasContent(badge) {
-  return React38__namespace.isValidElement(badge) && badge.props.children != null;
+  return React39__namespace.isValidElement(badge) && badge.props.children != null;
 }
-var BadgeImpl = React38__namespace.forwardRef(
+var BadgeImpl = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -2810,7 +2821,7 @@ var BadgeImpl = React38__namespace.forwardRef(
   }
 );
 BadgeImpl.displayName = "Badge";
-var Badge = React38__namespace.memo(BadgeImpl);
+var Badge = React39__namespace.memo(BadgeImpl);
 function BadgedBox({
   badge,
   children,
@@ -2876,11 +2887,11 @@ var ROTATE_KEY_SPLINES = [
 var ROTATE_VALUES = "0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24";
 var DETERMINATE_CIRCLE = "M24 7 C34.49 7 41 13.51 41 24 C41 34.49 34.49 41 24 41 C13.51 41 7 34.49 7 24 C7 13.51 13.51 7 24 7 Z";
 var DETERMINATE_SOFT_BURST = "M20.9 10.4 21.4 9.5 21.9 8.7 22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17.1 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.4 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.5 38.9 26.2 39.6 27 40.2 27.7 40.5 28.7 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.9 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.5 9.1 21.8 8.4 21 7.8 20.3 7.5 19.3 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.1 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1Z";
-var IndeterminateSvg = React38__namespace.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React39__namespace.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React38__namespace.useState(false);
-  React38__namespace.useEffect(() => {
+  const [ready, setReady] = React39__namespace.useState(false);
+  React39__namespace.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -2925,7 +2936,7 @@ var IndeterminateSvg = React38__namespace.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React38__namespace.memo(function DeterminateSvg2({
+var DeterminateSvg = React39__namespace.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -2950,7 +2961,7 @@ var DeterminateSvg = React38__namespace.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React38__namespace.forwardRef(
+var LoadingIndicator = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -3065,7 +3076,7 @@ function getSinePath(startX, endX, phase, wl, amp) {
   d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
   return d;
 }
-var CircularProgress = React38__namespace.forwardRef(
+var CircularProgress = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -3103,15 +3114,15 @@ var CircularProgress = React38__namespace.forwardRef(
     const isWavy = shape === "wavy";
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React38__namespace.useMemo(
+    const effectiveAmplitude = React39__namespace.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React38__namespace.useMemo(
+    const effectiveWavelength = React39__namespace.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React38__namespace.useMemo(
+    const wavyActivePath = React39__namespace.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -3120,8 +3131,8 @@ var CircularProgress = React38__namespace.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React38__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React38__namespace.useMemo(
+    const circumference = React39__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React39__namespace.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -3310,9 +3321,9 @@ var CircularProgress = React38__namespace.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React38__namespace.useState(0);
-  const observerRef = React38__namespace.useRef(null);
-  const ref = React38__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;
@@ -3326,7 +3337,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -3336,7 +3347,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React38__namespace.useCallback(
+  return React39__namespace.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -3350,7 +3361,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React38__namespace.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React39__namespace.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -3426,7 +3437,7 @@ var FlatLinearTrack = React38__namespace.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React38__namespace.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React39__namespace.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -3445,13 +3456,13 @@ var WavyLinearTrack = React38__namespace.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React38__namespace.useId();
+  const titleId = React39__namespace.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React38__namespace.useRef(null);
-  const trackPathRef = React38__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);
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -3622,7 +3633,7 @@ var WavyLinearTrack = React38__namespace.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React38__namespace.forwardRef(
+var LinearProgress = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -3663,10 +3674,10 @@ var LinearProgress = React38__namespace.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React38__namespace.useRef(null);
+    const containerRef = React39__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React38__namespace.useState(false);
-    React38__namespace.useEffect(() => {
+    const [isRtl, setIsRtl] = React39__namespace.useState(false);
+    React39__namespace.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -3674,16 +3685,16 @@ var LinearProgress = React38__namespace.forwardRef(
     }, []);
     const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
-    const effectiveAmplitude = React38__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React38__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 = React38__namespace.useMemo(
+    const shouldShowStop = React39__namespace.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React38__namespace.useMemo(
+    const stopSize = React39__namespace.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -3756,14 +3767,14 @@ var LinearProgress = React38__namespace.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React38__namespace.forwardRef((props, ref) => {
+var ProgressIndicator = React39__namespace.forwardRef((props, ref) => {
   if (props.variant === "circular") {
     return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, __spreadValues({ ref }, props));
   }
   return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress, __spreadValues({ ref }, props));
 });
 ProgressIndicator.displayName = "ProgressIndicator";
-var RippleItem = React38__namespace.memo(function RippleItem2({
+var RippleItem = React39__namespace.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -3807,8 +3818,8 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React38__namespace.useState([]);
-  const onPointerDown = React38__namespace.useCallback(
+  const [ripples, setRipples] = React39__namespace.useState([]);
+  const onPointerDown = React39__namespace.useCallback(
     (e) => {
       if (disabled) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -3822,7 +3833,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React38__namespace.useCallback((id) => {
+  const removeRipple = React39__namespace.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -3951,15 +3962,12 @@ var buttonColorVariants = classVarianceAuthority.cva(
     defaultVariants: { colorStyle: "filled" }
   }
 );
-function toSentenceCase(text) {
-  return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
-}
 function resolveLabel(children, asChild) {
   if (asChild) {
-    const child = React38__namespace.Children.only(children);
+    const child = React39__namespace.Children.only(children);
     return child.props.children;
   }
-  return typeof children === "string" ? toSentenceCase(children) : children;
+  return children;
 }
 var MOTION_PROP_KEYS = [
   "animate",
@@ -4028,7 +4036,7 @@ function AnimatedIconSlot({
     }
   );
 }
-var ButtonComponent = React38__namespace.forwardRef(
+var ButtonComponent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4077,15 +4085,15 @@ var ButtonComponent = React38__namespace.forwardRef(
     const { pressed: pressedRadius } = (_b2 = radiusMap[size]) != null ? _b2 : radiusMap.sm;
     const iconClass = (_c = SIZE_ICON_CLASS[size]) != null ? _c : "size-5";
     const mergedStyle = __spreadValues(__spreadValues({}, SIZE_STYLES[size]), style);
-    const labelText = React38__namespace.useMemo(
+    const labelText = React39__namespace.useMemo(
       () => resolveLabel(children, asChild),
       [children, asChild]
     );
     const computedAriaLabel = ariaLabelProp || (typeof children === "string" ? children : void 0);
     const needsTouchTarget = size === "xs" || size === "sm";
     const motionRadius = react.useMotionValue(animateRadius);
-    const asChildRef = React38__namespace.useRef(null);
-    const mergedRef = React38__namespace.useCallback(
+    const asChildRef = React39__namespace.useRef(null);
+    const mergedRef = React39__namespace.useCallback(
       (node) => {
         asChildRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -4094,27 +4102,27 @@ var ButtonComponent = React38__namespace.forwardRef(
       },
       [ref]
     );
-    React38__namespace.useEffect(
+    React39__namespace.useEffect(
       () => motionRadius.on("change", (v) => {
         if (asChildRef.current)
           asChildRef.current.style.borderRadius = `${v}px`;
       }),
       [motionRadius]
     );
-    React38__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       springAnimate(motionRadius, animateRadius);
     }, [animateRadius, motionRadius]);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React38__namespace.useCallback(
+    const handleClick = React39__namespace.useCallback(
       (e) => {
         if (loading) return e.preventDefault();
         onClick == null ? void 0 : onClick(e);
       },
       [loading, onClick]
     );
-    const handleKeyDown = React38__namespace.useCallback(
+    const handleKeyDown = React39__namespace.useCallback(
       (e) => {
         if (loading) return;
         if (onClick && (e.key === "Enter" || e.key === " ")) {
@@ -4148,7 +4156,7 @@ var ButtonComponent = React38__namespace.forwardRef(
         react.m.span,
         {
           layout: "size",
-          className: "inline-flex items-center gap-[inherit]",
+          className: "inline-flex items-center h-full gap-[inherit]",
           transition: SPRING_TRANSITION,
           children: labelText
         }
@@ -4157,7 +4165,7 @@ var ButtonComponent = React38__namespace.forwardRef(
     ] });
     if (asChild) {
       const htmlProps = stripMotionProps(restProps);
-      const child = React38__namespace.Children.only(children);
+      const child = React39__namespace.Children.only(children);
       const handleAsChildPointerDown = (e) => {
         springAnimate(motionRadius, pressedRadius);
         onPointerDown == null ? void 0 : onPointerDown(e);
@@ -4181,7 +4189,7 @@ var ButtonComponent = React38__namespace.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React38__namespace.cloneElement(child, { children: innerContent })
+          children: React39__namespace.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -4209,7 +4217,7 @@ var ButtonComponent = React38__namespace.forwardRef(
   }
 );
 ButtonComponent.displayName = "Button";
-var Button = React38__namespace.memo(ButtonComponent);
+var Button = React39__namespace.memo(ButtonComponent);
 var SIZE_PADDING_MAP = {
   xs: "0.75rem",
   sm: "1rem",
@@ -4238,7 +4246,7 @@ var PRESSED_RADIUS_MAP = {
   lg: 28,
   xl: 40
 };
-var ButtonGroupComponent = React38__namespace.forwardRef(
+var ButtonGroupComponent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4259,13 +4267,13 @@ var ButtonGroupComponent = React38__namespace.forwardRef(
       "showCheck",
       "children"
     ]);
-    const [pressedIndex, setPressedIndex] = React38__namespace.useState(null);
-    const childrenArray = React38__namespace.useMemo(
-      () => React38__namespace.Children.toArray(children).filter(React38__namespace.isValidElement),
+    const [pressedIndex, setPressedIndex] = React39__namespace.useState(null);
+    const childrenArray = React39__namespace.useMemo(
+      () => React39__namespace.Children.toArray(children).filter(React39__namespace.isValidElement),
       [children]
     );
     const count = childrenArray.length;
-    const handlePointerLeaveAndUp = React38__namespace.useCallback(() => {
+    const handlePointerLeaveAndUp = React39__namespace.useCallback(() => {
       setPressedIndex(null);
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4404,7 +4412,7 @@ var ButtonGroupComponent = React38__namespace.forwardRef(
               duration: 0.2
             };
           }
-          return React38__namespace.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
+          return React39__namespace.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
             key: (_a2 = element.key) != null ? _a2 : index,
             tabIndex: isFirst ? 0 : -1,
             size: size || element.props.size,
@@ -4433,7 +4441,7 @@ var ButtonGroupComponent = React38__namespace.forwardRef(
   }
 );
 ButtonGroupComponent.displayName = "ButtonGroup";
-var ButtonGroup = React38__namespace.memo(ButtonGroupComponent);
+var ButtonGroup = React39__namespace.memo(ButtonGroupComponent);
 var SHADOW = {
   level0: "none",
   level1: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)",
@@ -4492,7 +4500,7 @@ function useCardElevation(variant, disabled) {
     }
   };
 }
-var CardImpl = React38__namespace.forwardRef(
+var CardImpl = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4590,7 +4598,7 @@ var CardImpl = React38__namespace.forwardRef(
   }
 );
 CardImpl.displayName = "Card";
-var Card = React38__namespace.memo(CardImpl);
+var Card = React39__namespace.memo(CardImpl);
 var MD3_STANDARD = [0.2, 0, 0, 1];
 var MD3_FAST_EFFECTS = [0.3, 0, 1, 1];
 var CHECKMARK_PATH = "M 4.5 9.5 L 7.5 12.5 L 13.5 5.5";
@@ -4604,7 +4612,7 @@ var NEXT_STATE = {
   checked: "indeterminate",
   indeterminate: "unchecked"
 };
-var CheckboxVisual = React38__namespace.memo(function CheckboxVisual2({
+var CheckboxVisual = React39__namespace.memo(function CheckboxVisual2({
   isSelected,
   isIndeterminate,
   containerBg,
@@ -4675,7 +4683,7 @@ var CheckboxVisual = React38__namespace.memo(function CheckboxVisual2({
   );
 });
 function useMergedRef2(externalRef, internalRef) {
-  return React38__namespace.useCallback(
+  return React39__namespace.useCallback(
     (node) => {
       internalRef.current = node;
       if (!externalRef) return;
@@ -4688,7 +4696,7 @@ function useMergedRef2(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var CheckboxComponent = React38__namespace.forwardRef(
+var CheckboxComponent = React39__namespace.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -4710,20 +4718,20 @@ var CheckboxComponent = React38__namespace.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-    const generatedId = React38__namespace.useId();
+    const generatedId = React39__namespace.useId();
     const inputId = idProp != null ? idProp : label ? `checkbox-${generatedId}` : void 0;
-    const [internalState, setInternalState] = React38__namespace.useState(
+    const [internalState, setInternalState] = React39__namespace.useState(
       () => defaultChecked ? "checked" : "unchecked"
     );
     const isControlled = stateProp !== void 0 || checked !== void 0;
     const baseState = isControlled ? resolveState(checked, false, stateProp) : internalState;
     const effectiveState = indeterminate ? "indeterminate" : baseState;
-    const [ripples, setRipples] = React38__namespace.useState([]);
-    const removeRipple = React38__namespace.useCallback(
+    const [ripples, setRipples] = React39__namespace.useState([]);
+    const removeRipple = React39__namespace.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
-    const onPointerDown = React38__namespace.useCallback(
+    const onPointerDown = React39__namespace.useCallback(
       (e) => {
         if (disabled) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -4737,7 +4745,7 @@ var CheckboxComponent = React38__namespace.forwardRef(
       },
       [disabled]
     );
-    const handleChange = React38__namespace.useCallback(
+    const handleChange = React39__namespace.useCallback(
       (e) => {
         if (disabled) return;
         if (stateProp !== void 0) {
@@ -4763,9 +4771,9 @@ var CheckboxComponent = React38__namespace.forwardRef(
         onCheckedChange
       ]
     );
-    const inputRef = React38__namespace.useRef(null);
+    const inputRef = React39__namespace.useRef(null);
     const mergedRef = useMergedRef2(ref, inputRef);
-    React38__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       if (inputRef.current) {
         inputRef.current.indeterminate = effectiveState === "indeterminate";
       }
@@ -4890,13 +4898,13 @@ var CheckboxComponent = React38__namespace.forwardRef(
   }
 );
 CheckboxComponent.displayName = "Checkbox";
-var Checkbox = React38__namespace.memo(CheckboxComponent);
-var TriStateCheckboxComponent = React38__namespace.forwardRef((_a, ref) => {
+var Checkbox = React39__namespace.memo(CheckboxComponent);
+var TriStateCheckboxComponent = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { state, onStateChange } = _b, rest = __objRest(_b, ["state", "onStateChange"]);
   return /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadValues({ ref, state, onStateChange }, rest));
 });
 TriStateCheckboxComponent.displayName = "TriStateCheckbox";
-var TriStateCheckbox = React38__namespace.memo(TriStateCheckboxComponent);
+var TriStateCheckbox = React39__namespace.memo(TriStateCheckboxComponent);
 function CheckIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -4990,7 +4998,7 @@ var chipVariants = classVarianceAuthority.cva(
     defaultVariants: { variant: "assist" }
   }
 );
-var ChipImpl = React38__namespace.forwardRef(
+var ChipImpl = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "assist",
@@ -5026,7 +5034,7 @@ var ChipImpl = React38__namespace.forwardRef(
     const showCheckmark = isFilter && selected;
     const hasTrailingContent = !!trailingIcon || !!onRemove;
     const hasLeadingContent = isFilter || !!resolvedLeadingIcon;
-    const paddingClass = React38__namespace.useMemo(
+    const paddingClass = React39__namespace.useMemo(
       () => cn(
         !isInput && !hasLeadingContent && !hasTrailingContent && "px-4",
         !isInput && hasLeadingContent && !hasTrailingContent && "pl-2 pr-4",
@@ -5039,7 +5047,7 @@ var ChipImpl = React38__namespace.forwardRef(
       ),
       [isInput, hasLeadingContent, hasTrailingContent]
     );
-    const stateClass = React38__namespace.useMemo(
+    const stateClass = React39__namespace.useMemo(
       () => cn(
         (isFilter || isInput) && selected && "bg-m3-secondary-container text-m3-on-secondary-container border-none before:bg-m3-on-secondary-container",
         elevated && !selected && "bg-m3-surface-container-low border-none elevation-1",
@@ -5050,7 +5058,7 @@ var ChipImpl = React38__namespace.forwardRef(
       ),
       [isFilter, isInput, selected, elevated, disabled]
     );
-    const leadingIconColorClass = React38__namespace.useMemo(
+    const leadingIconColorClass = React39__namespace.useMemo(
       () => cn(
         (variant === "assist" || variant === "suggestion") && "text-m3-primary",
         isFilter && !selected && "text-m3-primary",
@@ -5222,8 +5230,8 @@ var ChipImpl = React38__namespace.forwardRef(
   }
 );
 ChipImpl.displayName = "Chip";
-var Chip = React38__namespace.memo(ChipImpl);
-var ScrollArea = React38__namespace.forwardRef(
+var Chip = React39__namespace.memo(ChipImpl);
+var ScrollArea = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5231,14 +5239,16 @@ var ScrollArea = React38__namespace.forwardRef(
       children,
       type = "hover",
       orientation = "vertical",
-      scrollHideDelay = 600
+      scrollHideDelay = 600,
+      viewportRef
     } = _b, props = __objRest(_b, [
       "className",
       "viewportClassName",
       "children",
       "type",
       "orientation",
-      "scrollHideDelay"
+      "scrollHideDelay",
+      "viewportRef"
     ]);
     const radixType = type === "none" ? "always" : type;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5253,6 +5263,7 @@ var ScrollArea = React38__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             RadixScrollArea__namespace.Viewport,
             {
+              ref: viewportRef,
               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",
@@ -5282,7 +5293,7 @@ var ScrollArea = React38__namespace.forwardRef(
   }
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollAreaScrollbar = React38__namespace.forwardRef((_a, ref) => {
+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,
@@ -5312,7 +5323,7 @@ var ScrollAreaScrollbar = React38__namespace.forwardRef((_a, ref) => {
   );
 });
 ScrollAreaScrollbar.displayName = RadixScrollArea__namespace.Scrollbar.displayName;
-var ScrollAreaCorner = React38__namespace.forwardRef((_a, ref) => {
+var ScrollAreaCorner = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixScrollArea__namespace.Corner,
@@ -5407,7 +5418,7 @@ function mapDomToReact(node, key) {
         props[propName] = attr.value;
       }
     }
-    return React38.createElement(
+    return React39.createElement(
       tagName,
       props,
       Array.from(el.childNodes).map((child, i) => mapDomToReact(child, i))
@@ -5416,8 +5427,8 @@ function mapDomToReact(node, key) {
   return null;
 }
 function CodeContent({ html, code }) {
-  const [parsedContent, setParsedContent] = React38.useState(null);
-  React38.useEffect(() => {
+  const [parsedContent, setParsedContent] = React39.useState(null);
+  React39.useEffect(() => {
     if (html) {
       const parser = new DOMParser();
       const doc = parser.parseFromString(html, "text/html");
@@ -5447,8 +5458,8 @@ function CodeBlock({
   className,
   html
 }) {
-  const [copied, setCopied] = React38.useState(false);
-  const handleCopy = React38.useCallback(async () => {
+  const [copied, setCopied] = React39.useState(false);
+  const handleCopy = React39.useCallback(async () => {
     try {
       await navigator.clipboard.writeText(code);
       setCopied(true);
@@ -5589,7 +5600,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React38__namespace.forwardRef(
+var IconButtonComponent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5623,18 +5634,18 @@ var IconButtonComponent = React38__namespace.forwardRef(
     var _a2, _b2;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React38__namespace.useMemo(
+    const resolvedColorClass = React39__namespace.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React38__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 = React38__namespace.useMemo(
+    const disabledBgClass = React39__namespace.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -5653,7 +5664,7 @@ var IconButtonComponent = React38__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React38__namespace.useCallback(
+    const handleClick = React39__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -5663,7 +5674,7 @@ var IconButtonComponent = React38__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React38__namespace.useCallback(
+    const handleKeyDown = React39__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -5751,7 +5762,7 @@ var IconButtonComponent = React38__namespace.forwardRef(
   }
 );
 IconButtonComponent.displayName = "IconButton";
-var IconButton = React38__namespace.memo(IconButtonComponent);
+var IconButton = React39__namespace.memo(IconButtonComponent);
 var MD3_SPRING = {
   type: "spring",
   stiffness: 400,
@@ -5788,9 +5799,9 @@ DialogTrigger.displayName = "DialogTrigger";
 var DialogPortal = ({
   open,
   children
-}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ? React38__namespace.Children.toArray(children) : null }) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ? React39__namespace.Children.toArray(children) : null }) });
 DialogPortal.displayName = "DialogPortal";
-var DialogOverlay = React38__namespace.forwardRef((_a, ref) => {
+var DialogOverlay = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
@@ -5801,7 +5812,7 @@ var DialogOverlay = React38__namespace.forwardRef((_a, ref) => {
   ) }));
 });
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React38__namespace.forwardRef((_a, ref) => {
+var DialogContent = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Content,
@@ -5841,7 +5852,7 @@ var DialogContent = React38__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogContent.displayName = "DialogContent";
-var DialogIcon = React38__namespace.forwardRef((_a, ref) => {
+var DialogIcon = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -5864,7 +5875,7 @@ var DialogHeader = (_a) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mb-4", className) }, props));
 };
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React38__namespace.forwardRef((_a, ref) => {
+var DialogTitle = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Title,
@@ -5879,7 +5890,7 @@ var DialogTitle = React38__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React38__namespace.forwardRef((_a, ref) => {
+var DialogDescription = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Description,
@@ -5891,7 +5902,7 @@ var DialogDescription = React38__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogDescription.displayName = "DialogDescription";
-var DialogBody = React38__namespace.forwardRef((_a, ref) => {
+var DialogBody = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, dir } = _b, props = __objRest(_b, ["className", "children", "dir"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ScrollArea,
@@ -5922,7 +5933,7 @@ var DialogFooter = (_a) => {
 };
 DialogFooter.displayName = "DialogFooter";
 var DialogClose = RadixDialog__namespace.Close;
-var DialogFullScreenContent = React38__namespace.forwardRef(
+var DialogFullScreenContent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6005,7 +6016,7 @@ function buildWavePath(startX, endX, amplitude = 2, wavelength = 32, yCenter = 4
   }
   return d;
 }
-var DividerImpl = React38__namespace.forwardRef(
+var DividerImpl = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "full-bleed",
@@ -6125,7 +6136,7 @@ var DividerImpl = React38__namespace.forwardRef(
   }
 );
 DividerImpl.displayName = "Divider";
-var Divider = React38__namespace.memo(DividerImpl);
+var Divider = React39__namespace.memo(DividerImpl);
 var MD3_DRAWER_SPRING = {
   type: "spring",
   stiffness: 350,
@@ -6162,7 +6173,7 @@ var DrawerPortal = ({
   open,
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: open && children }) });
-var DrawerOverlay = React38__namespace.forwardRef((_a, ref) => {
+var DrawerOverlay = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
@@ -6173,7 +6184,7 @@ var DrawerOverlay = React38__namespace.forwardRef((_a, ref) => {
   ) }));
 });
 DrawerOverlay.displayName = "DrawerOverlay";
-var DrawerContent = React38__namespace.forwardRef(
+var DrawerContent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6252,7 +6263,7 @@ var DrawerFooter = (_a) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mt-4", className) }, props));
 };
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React38__namespace.forwardRef((_a, ref) => {
+var DrawerTitle = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Title,
@@ -6266,7 +6277,7 @@ var DrawerTitle = React38__namespace.forwardRef((_a, ref) => {
   );
 });
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React38__namespace.forwardRef((_a, ref) => {
+var DrawerDescription = React39__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDialog__namespace.Description,
@@ -6347,7 +6358,7 @@ function FABPosition({
     }
   );
 }
-var FABComponent = React38__namespace.forwardRef(
+var FABComponent = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6392,7 +6403,7 @@ var FABComponent = React38__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React38__namespace.useCallback(
+    const handleClick = React39__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -6402,7 +6413,7 @@ var FABComponent = React38__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React38__namespace.useCallback(
+    const handleKeyDown = React39__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -6511,7 +6522,7 @@ var FABComponent = React38__namespace.forwardRef(
   }
 );
 FABComponent.displayName = "FAB";
-var FAB = React38__namespace.memo(FABComponent);
+var FAB = React39__namespace.memo(FABComponent);
 var SPRING_NORMAL = { stiffness: 700, damping: 40 };
 var SPRING_REDUCED = { stiffness: 1e4, damping: 100 };
 var FOCUS_DELAY_MS = 50;
@@ -6619,7 +6630,7 @@ function CloseIcon3() {
 function defaultFabIcon(progress) {
   return progress > 0.5 ? /* @__PURE__ */ jsxRuntime.jsx(CloseIcon3, {}) : /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {});
 }
-var ToggleFABComponent = React38__namespace.forwardRef(
+var ToggleFABComponent = React39__namespace.forwardRef(
   ({
     expanded,
     onToggle,
@@ -6637,7 +6648,7 @@ var ToggleFABComponent = React38__namespace.forwardRef(
     const sizeTokens = (_b = TOGGLE_FAB_SIZES[fabSize]) != null ? _b : TOGGLE_FAB_SIZES.baseline;
     const springConfig = prefersReduced ? SPRING_REDUCED : SPRING_NORMAL;
     const checkedProgress = react.useSpring(expanded ? 1 : 0, springConfig);
-    React38__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       checkedProgress.set(expanded ? 1 : 0);
     }, [expanded, checkedProgress]);
     const borderRadius = react.useTransform(
@@ -6645,12 +6656,12 @@ var ToggleFABComponent = React38__namespace.forwardRef(
       [0, 1],
       [`${sizeTokens.initialRadius}px`, `${sizeTokens.finalRadius}px`]
     );
-    const [iconProgress, setIconProgress] = React38__namespace.useState(expanded ? 1 : 0);
-    React38__namespace.useEffect(() => {
+    const [iconProgress, setIconProgress] = React39__namespace.useState(expanded ? 1 : 0);
+    React39__namespace.useEffect(() => {
       return checkedProgress.on("change", setIconProgress);
     }, [checkedProgress]);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
-    const handleClick = React38__namespace.useCallback(() => {
+    const handleClick = React39__namespace.useCallback(() => {
       onToggle(!expanded);
     }, [expanded, onToggle]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6699,7 +6710,7 @@ var ToggleFABComponent = React38__namespace.forwardRef(
   }
 );
 ToggleFABComponent.displayName = "ToggleFAB";
-var ToggleFAB = React38__namespace.memo(ToggleFABComponent);
+var ToggleFAB = React39__namespace.memo(ToggleFABComponent);
 function FABMenuItem({
   icon,
   label,
@@ -6712,7 +6723,7 @@ function FABMenuItem({
   var _a;
   const colors = (_a = MENU_ITEM_COLORS[colorVariant]) != null ? _a : MENU_ITEM_COLORS.primary;
   const { ripples, onPointerDown, removeRipple } = useRippleState({ disabled });
-  const handleClick = React38__namespace.useCallback(
+  const handleClick = React39__namespace.useCallback(
     (e) => {
       if (disabled) {
         e.preventDefault();
@@ -6722,7 +6733,7 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  const handleKeyDown = React38__namespace.useCallback(
+  const handleKeyDown = React39__namespace.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -6789,13 +6800,13 @@ function FABMenu({
   focusLast = true,
   "aria-label": ariaLabel
 }) {
-  const fabId = React38__namespace.useId();
-  const menuId = React38__namespace.useId();
-  const toggleRef = React38__namespace.useRef(null);
-  const itemRefs = React38__namespace.useRef([]);
-  const [focusedIndex, setFocusedIndex] = React38__namespace.useState(-1);
-  const reversedItems = React38__namespace.useMemo(() => [...items].reverse(), [items]);
-  const focusItem = React38__namespace.useCallback((index) => {
+  const fabId = React39__namespace.useId();
+  const menuId = React39__namespace.useId();
+  const toggleRef = React39__namespace.useRef(null);
+  const itemRefs = React39__namespace.useRef([]);
+  const [focusedIndex, setFocusedIndex] = React39__namespace.useState(-1);
+  const reversedItems = React39__namespace.useMemo(() => [...items].reverse(), [items]);
+  const focusItem = React39__namespace.useCallback((index) => {
     var _a;
     const clampedIndex = Math.max(
       0,
@@ -6804,8 +6815,8 @@ function FABMenu({
     setFocusedIndex(clampedIndex);
     (_a = itemRefs.current[clampedIndex]) == null ? void 0 : _a.focus();
   }, []);
-  const wasExpandedRef = React38__namespace.useRef(false);
-  React38__namespace.useEffect(() => {
+  const wasExpandedRef = React39__namespace.useRef(false);
+  React39__namespace.useEffect(() => {
     var _a;
     if (expanded) {
       wasExpandedRef.current = true;
@@ -6820,7 +6831,7 @@ function FABMenu({
     wasExpandedRef.current = false;
     setFocusedIndex(-1);
   }, [expanded, focusLast, items.length, focusItem]);
-  const handleMenuKeyDown = React38__namespace.useCallback(
+  const handleMenuKeyDown = React39__namespace.useCallback(
     (e) => {
       if (!expanded) return;
       const lastIndex = items.length - 1;
@@ -6944,7 +6955,296 @@ function FABMenu({
     )
   ] });
 }
-var NavigationRailContext = React38__namespace.createContext({ variant: "collapsed", labelVisibility: "labeled", xr: false });
+var NavigationBarContext = React39__namespace.createContext({ variant: "flexible" });
+function cloneIconWithFill(icon, selected) {
+  if (!React39__namespace.isValidElement(icon)) return icon;
+  if (icon.type === Icon) {
+    return React39__namespace.cloneElement(
+      icon,
+      { fill: selected ? 1 : 0, animateFill: true }
+    );
+  }
+  return icon;
+}
+function ActivePill() {
+  const { activeIndicatorTransition } = React39__namespace.useContext(NavigationBarContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.div,
+    {
+      className: "absolute inset-0 bg-m3-secondary-container pointer-events-none",
+      style: {
+        borderRadius: 9999,
+        zIndex: 0
+      },
+      initial: { opacity: 0, scale: 0.5 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.5 },
+      transition: activeIndicatorTransition || SPRING_TRANSITION_EXPRESSIVE
+    }
+  );
+}
+function HoverStateLayer() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-m3-on-surface opacity-0 group-hover:opacity-[0.08] group-focus-visible:opacity-[0.10] active:opacity-[0.10] transition-opacity duration-200 pointer-events-none z-0" });
+}
+function RippleLayer({ ripples, onRippleDone }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full overflow-hidden pointer-events-none z-0", children: /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone }) });
+}
+function IconContainer({ selected, badge, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "relative flex items-center justify-center size-6 transition-colors duration-200 shrink-0",
+        selected ? "text-m3-on-secondary-container" : "text-m3-on-surface-variant"
+      ),
+      children: [
+        children,
+        badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex min-w-3 h-3 items-center justify-center rounded-full bg-m3-error px-1 text-[10px] font-medium leading-none tracking-normal text-m3-on-error ring-[1.5px] ring-m3-surface", children: badge })
+      ]
+    }
+  );
+}
+var NavigationBarItemComponent = React39__namespace.forwardRef(
+  ({
+    selected,
+    icon,
+    label,
+    onClick,
+    disabled = false,
+    badge,
+    className,
+    "aria-label": ariaLabelProp
+  }, ref) => {
+    const { variant, itemLayout } = React39__namespace.useContext(NavigationBarContext);
+    const isForcedHorizontal = itemLayout === "horizontal";
+    const isResponsiveHorizontal = (variant === "flexible" || variant === "xr") && itemLayout === void 0;
+    const { ripples, onPointerDown, removeRipple } = useRippleState({
+      disabled
+    });
+    const handleClick = React39__namespace.useCallback(
+      (e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        if (selected) {
+          if (typeof window !== "undefined" && window.scrollY > 0) {
+            window.scrollTo({ top: 0, behavior: "smooth" });
+          }
+          return;
+        }
+        onClick == null ? void 0 : onClick();
+      },
+      [disabled, selected, onClick]
+    );
+    const filledIcon = cloneIconWithFill(icon, selected);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      react.m.button,
+      {
+        ref,
+        type: "button",
+        role: "menuitem",
+        "aria-current": selected ? "page" : void 0,
+        "aria-disabled": disabled ? true : void 0,
+        "aria-label": ariaLabelProp || (typeof label === "string" ? label : void 0),
+        onClick: handleClick,
+        onPointerDown,
+        className: cn(
+          "group relative flex flex-1 cursor-pointer transition-colors duration-200 outline-none select-none h-full",
+          variant === "xr" ? "items-center justify-center max-[599px]:min-w-28 max-[599px]:max-w-28 max-[599px]:items-start max-[599px]:pt-3 max-[599px]:pb-4" : "items-center justify-center",
+          disabled && "pointer-events-none opacity-[0.38]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "relative flex items-center justify-center flex-col gap-y-1 w-full",
+                isResponsiveHorizontal && "min-[600px]:flex-row min-[600px]:gap-y-0 min-[600px]:gap-x-1 min-[600px]:h-10 min-[600px]:px-4 min-[600px]:rounded-full min-[600px]:w-auto min-[600px]:max-w-42",
+                isForcedHorizontal && "flex-row gap-y-0 gap-x-1 h-10 px-4 rounded-full w-auto max-w-42"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-0 z-0 hidden",
+                      isResponsiveHorizontal && "min-[600px]:block",
+                      isForcedHorizontal && "block!"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsxRuntime.jsx(ActivePill, {}) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(HoverStateLayer, {}),
+                      /* @__PURE__ */ jsxRuntime.jsx(RippleLayer, { ripples, onRippleDone: removeRipple })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "relative flex items-center justify-center shrink-0 z-10",
+                      "h-8 w-16 mx-auto rounded-full",
+                      isResponsiveHorizontal && "min-[600px]:size-6 min-[600px]:w-auto min-[600px]:h-auto",
+                      isForcedHorizontal && "size-6 w-auto h-auto"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          className: cn(
+                            "absolute inset-0 z-0",
+                            isResponsiveHorizontal && "min-[600px]:hidden",
+                            isForcedHorizontal && "hidden"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsxRuntime.jsx(ActivePill, {}) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(HoverStateLayer, {}),
+                            /* @__PURE__ */ jsxRuntime.jsx(RippleLayer, { ripples, onRippleDone: removeRipple })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex size-6 items-center justify-center text-current", children: /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { selected, badge, children: filledIcon }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "z-10 transition-all duration-200 truncate px-1",
+                      selected ? "text-m3-on-surface" : "text-m3-on-surface-variant",
+                      "font-medium text-[12px] leading-4 tracking-[0.5px]"
+                    ),
+                    children: label
+                  },
+                  "nav-label"
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {})
+        ]
+      }
+    );
+  }
+);
+NavigationBarItemComponent.displayName = "NavigationBarItem";
+var NavigationBarItem = React39__namespace.memo(NavigationBarItemComponent);
+var navContainerVariants = classVarianceAuthority.cva(
+  "flex items-center justify-center select-none transition-transform duration-300 z-50",
+  {
+    variants: {
+      variant: {
+        flexible: "bottom-0 left-0 right-0 w-full h-16 pb-safe",
+        baseline: "bottom-0 left-0 right-0 w-full h-20 pb-safe",
+        xr: "bottom-6 left-1/2 -translate-x-1/2 w-auto max-w-fit h-20 min-[600px]:h-16 rounded-[48px] px-2"
+      },
+      position: {
+        fixed: "fixed",
+        absolute: "absolute"
+      },
+      elevated: {
+        true: "shadow-[0_-1px_3px_rgba(0,0,0,0.1)]",
+        false: "shadow-none"
+      }
+    },
+    defaultVariants: {
+      variant: "flexible",
+      position: "fixed",
+      elevated: false
+    }
+  }
+);
+var NavigationBarComponent = React39__namespace.forwardRef(
+  ({
+    variant = "flexible",
+    itemLayout,
+    hideOnScroll = false,
+    elevated = false,
+    fixed = true,
+    scrollContainerRef,
+    activeIndicatorTransition,
+    children,
+    className,
+    style
+  }, ref) => {
+    const [isVisible, setIsVisible] = React39__namespace.useState(true);
+    const lastScrollY = React39__namespace.useRef(
+      typeof window !== "undefined" ? window.scrollY : 0
+    );
+    React39__namespace.useEffect(() => {
+      if (typeof window === "undefined" || !hideOnScroll) {
+        setIsVisible(true);
+        return;
+      }
+      const prefersReducedMotion = window.matchMedia(
+        "(prefers-reduced-motion: reduce)"
+      ).matches;
+      if (prefersReducedMotion) {
+        setIsVisible(true);
+        return;
+      }
+      let ticking = false;
+      const handleScroll = () => {
+        if (ticking) return;
+        ticking = true;
+        window.requestAnimationFrame(() => {
+          const currentScrollY = (scrollContainerRef == null ? void 0 : scrollContainerRef.current) ? scrollContainerRef.current.scrollTop : window.scrollY;
+          if (currentScrollY <= 0 || currentScrollY < lastScrollY.current) {
+            setIsVisible(true);
+          } else if (currentScrollY > lastScrollY.current) {
+            setIsVisible(false);
+          }
+          lastScrollY.current = currentScrollY;
+          ticking = false;
+        });
+      };
+      const target = (scrollContainerRef == null ? void 0 : scrollContainerRef.current) || window;
+      target.addEventListener("scroll", handleScroll, { passive: true });
+      return () => target.removeEventListener("scroll", handleScroll);
+    }, [hideOnScroll, scrollContainerRef]);
+    const navBaseClasses = cn(
+      navContainerVariants({
+        variant,
+        elevated,
+        position: fixed ? "fixed" : "absolute"
+      }),
+      variant === "xr" ? "bg-m3-surface border border-white/5 shadow-xl" : "bg-m3-surface-container",
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationBarContext.Provider, { value: { variant, itemLayout, activeIndicatorTransition }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.m.nav,
+      {
+        ref,
+        role: "navigation",
+        "aria-label": "Main navigation",
+        className: navBaseClasses,
+        style,
+        initial: false,
+        animate: { y: isVisible ? "0%" : "100%" },
+        transition: { type: "tween", duration: 0.3, ease: "easeInOut" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "menubar",
+            "aria-orientation": "horizontal",
+            className: cn(
+              "flex w-full h-full mx-auto",
+              variant === "xr" ? "gap-0 min-[600px]:gap-1.5" : "max-w-7xl gap-1.5"
+            ),
+            children
+          }
+        )
+      }
+    ) }) });
+  }
+);
+NavigationBarComponent.displayName = "NavigationBar";
+var NavigationBar = React39__namespace.memo(NavigationBarComponent);
+var NavigationRailContext = React39__namespace.createContext({ variant: "collapsed", labelVisibility: "labeled" });
 var MD3_MODAL_TRANSITION = {
   type: "tween",
   ease: [0.05, 0.7, 0.1, 1],
@@ -6955,17 +7255,14 @@ var railContainerVariants = classVarianceAuthority.cva(
   {
     variants: {
       variant: {
-        collapsed: "items-center",
-        expanded: "items-start",
-        modal: "bg-m3-surface shadow-lg rounded-r-[var(--m3-shape-corner-large)]"
+        collapsed: "items-center h-full pt-11 pb-4 shadow-none bg-m3-surface rounded-none",
+        expanded: "items-start h-full pt-11 pb-4 shadow-none bg-m3-surface rounded-none",
+        modal: "bg-m3-surface shadow-lg rounded-r-[var(--m3-shape-corner-large)] h-full pt-11 pb-4",
+        xr: "h-fit py-5 rounded-[48px] shadow-xl bg-m3-surface border border-white/5"
       },
       narrow: {
         true: "w-20",
         false: "w-24"
-      },
-      xr: {
-        true: "h-fit py-5 rounded-[48px] shadow-xl bg-m3-surface border border-white/5",
-        false: "h-full pt-11 pb-4 shadow-none bg-m3-surface rounded-none"
       }
     },
     compoundVariants: [
@@ -6974,15 +7271,14 @@ var railContainerVariants = classVarianceAuthority.cva(
     ],
     defaultVariants: {
       variant: "collapsed",
-      narrow: false,
-      xr: false
+      narrow: false
     }
   }
 );
-function cloneIconWithFill(icon, selected) {
-  if (!React38__namespace.isValidElement(icon)) return icon;
+function cloneIconWithFill2(icon, selected) {
+  if (!React39__namespace.isValidElement(icon)) return icon;
   if (icon.type === Icon) {
-    return React38__namespace.cloneElement(
+    return React39__namespace.cloneElement(
       icon,
       { fill: selected ? 1 : 0, animateFill: true }
     );
@@ -7004,27 +7300,28 @@ function setFocusedItem(items, index) {
     target.focus();
   }
 }
-function ActivePill({ layoutId, disableInitial = false }) {
+function ActivePill2({ layoutId, disableInitial = false }) {
+  const { activeIndicatorTransition } = React39__namespace.useContext(NavigationRailContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
     {
       layoutId,
       className: "absolute inset-0 bg-m3-secondary-container pointer-events-none",
-      style: { borderRadius: 9999, zIndex: 0 },
-      initial: disableInitial ? false : { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: SPRING_TRANSITION
+      style: { borderRadius: 9999, zIndex: 0, originX: 0.5, originY: 0.5 },
+      initial: disableInitial ? false : { opacity: 0, scale: 0.5 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.5, transition: { duration: 0.15 } },
+      transition: activeIndicatorTransition || SPRING_TRANSITION_EXPRESSIVE
     }
   );
 }
-function HoverStateLayer() {
+function HoverStateLayer2() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-m3-on-surface opacity-0 group-hover:opacity-[0.08] transition-opacity duration-200 pointer-events-none z-0" });
 }
-function RippleLayer({ ripples, onRippleDone }) {
+function RippleLayer2({ ripples, onRippleDone }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full overflow-hidden pointer-events-none z-0", children: /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone }) });
 }
-function IconContainer({ selected, badge, children }) {
+function IconContainer2({ selected, badge, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -7040,7 +7337,7 @@ function IconContainer({ selected, badge, children }) {
     }
   );
 }
-var NavigationRailItemComponent = React38__namespace.forwardRef(
+var NavigationRailItemComponent = React39__namespace.forwardRef(
   ({
     selected,
     icon,
@@ -7051,18 +7348,18 @@ var NavigationRailItemComponent = React38__namespace.forwardRef(
     className,
     "aria-label": ariaLabelProp
   }, ref) => {
-    const { variant, labelVisibility } = React38__namespace.useContext(
+    const { variant, labelVisibility } = React39__namespace.useContext(
       NavigationRailContext
     );
     const isExpanded = variant === "expanded" || variant === "modal";
     const isModal = variant === "modal";
     const enableLayout = !isModal;
-    const activePillId = `rail-pill-${React38__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 = React38__namespace.useCallback(
+    const handleClick = React39__namespace.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -7072,7 +7369,7 @@ var NavigationRailItemComponent = React38__namespace.forwardRef(
       },
       [disabled, onClick]
     );
-    const filledIcon = cloneIconWithFill(icon, selected);
+    const filledIcon = cloneIconWithFill2(icon, selected);
     const labelInitial = isModal ? false : { opacity: 0, x: isExpanded ? -12 : 0, y: isExpanded ? 0 : -8 };
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       react.m.button,
@@ -7105,14 +7402,14 @@ var NavigationRailItemComponent = React38__namespace.forwardRef(
               ),
               children: [
                 isExpanded && /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsxRuntime.jsx(
-                  ActivePill,
+                  ActivePill2,
                   {
                     layoutId: activePillId,
                     disableInitial: isModal
                   }
                 ) }),
-                isExpanded && /* @__PURE__ */ jsxRuntime.jsx(HoverStateLayer, {}),
-                isExpanded && /* @__PURE__ */ jsxRuntime.jsx(RippleLayer, { ripples, onRippleDone: removeRipple }),
+                isExpanded && /* @__PURE__ */ jsxRuntime.jsx(HoverStateLayer2, {}),
+                isExpanded && /* @__PURE__ */ jsxRuntime.jsx(RippleLayer2, { ripples, onRippleDone: removeRipple }),
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   react.m.div,
                   {
@@ -7123,15 +7420,15 @@ var NavigationRailItemComponent = React38__namespace.forwardRef(
                     ),
                     style: { borderRadius: 9999 },
                     children: [
-                      !isExpanded && /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsxRuntime.jsx(ActivePill, { layoutId: activePillId }) }),
-                      !isExpanded && /* @__PURE__ */ jsxRuntime.jsx(HoverStateLayer, {}),
-                      !isExpanded && /* @__PURE__ */ jsxRuntime.jsx(RippleLayer, { ripples, onRippleDone: removeRipple }),
+                      !isExpanded && /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsxRuntime.jsx(ActivePill2, { layoutId: activePillId }) }),
+                      !isExpanded && /* @__PURE__ */ jsxRuntime.jsx(HoverStateLayer2, {}),
+                      !isExpanded && /* @__PURE__ */ jsxRuntime.jsx(RippleLayer2, { ripples, onRippleDone: removeRipple }),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         react.m.div,
                         {
                           layout: enableLayout ? "position" : false,
                           className: "relative z-10 flex size-6 items-center justify-center text-current",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { selected, badge, children: filledIcon })
+                          children: /* @__PURE__ */ jsxRuntime.jsx(IconContainer2, { selected, badge, children: filledIcon })
                         }
                       )
                     ]
@@ -7164,9 +7461,9 @@ var NavigationRailItemComponent = React38__namespace.forwardRef(
   }
 );
 NavigationRailItemComponent.displayName = "NavigationRailItem";
-var NavigationRailItem = React38__namespace.memo(NavigationRailItemComponent);
+var NavigationRailItem = React39__namespace.memo(NavigationRailItemComponent);
 function useRoving(navRef) {
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     if (!navRef.current) return;
     const items = getMenuItems(navRef.current);
     const selected = items.find(
@@ -7176,7 +7473,7 @@ function useRoving(navRef) {
     const firstFocusable = selected != null ? selected : items[0];
     if (firstFocusable) firstFocusable.tabIndex = 0;
   }, [navRef]);
-  return React38__namespace.useCallback(
+  return React39__namespace.useCallback(
     (e) => {
       if (!navRef.current) return;
       const items = getMenuItems(navRef.current);
@@ -7204,29 +7501,29 @@ function useRoving(navRef) {
     [navRef]
   );
 }
-var NavigationRailComponent = React38__namespace.forwardRef(
+var NavigationRailComponent = React39__namespace.forwardRef(
   ({
     variant = "collapsed",
     labelVisibility = "labeled",
     header,
     fab,
+    fabPlacement = "contained",
     footer,
     narrow = false,
     open = false,
-    xr = false,
     onClose,
+    activeIndicatorTransition,
     children,
     className,
     style
   }, ref) => {
     const isModal = variant === "modal";
-    const isXr = xr === true || xr === "contained" || xr === "spatialized";
-    const xrMode = xr === "spatialized" ? "spatialized" : "contained";
-    const isSpatial = isXr && xrMode === "spatialized";
+    const isXr = variant === "xr";
+    const isSpatial = isXr && fabPlacement === "spatialized";
     const applyAnimation = !isXr || !isSpatial;
-    const navRef = React38__namespace.useRef(null);
+    const navRef = React39__namespace.useRef(null);
     const handleKeyDown = useRoving(navRef);
-    const setRefs = React38__namespace.useCallback(
+    const setRefs = React39__namespace.useCallback(
       (node) => {
         navRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -7235,12 +7532,12 @@ var NavigationRailComponent = React38__namespace.forwardRef(
       [ref]
     );
     const navBaseClasses = cn(
-      railContainerVariants({ variant, narrow, xr: isXr })
+      railContainerVariants({ variant, narrow })
     );
     const modalPositioning = isModal ? "fixed left-0 top-0 z-[100]" : "";
     const navHeaderSpacing = (() => {
       if (!isXr) return "mb-6 min-h-10";
-      if (xrMode === "contained") return fab ? "mb-10" : "mb-5";
+      if (fabPlacement === "contained") return fab ? "mb-10" : "mb-5";
       return "mb-5";
     })();
     const navElement = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7319,7 +7616,7 @@ var NavigationRailComponent = React38__namespace.forwardRef(
               children: fab
             }
           ),
-          React38__namespace.cloneElement(
+          React39__namespace.cloneElement(
             navElement,
             {
               className: cn(navBaseClasses, "pointer-events-auto")
@@ -7330,7 +7627,7 @@ var NavigationRailComponent = React38__namespace.forwardRef(
       "md3-nav-wrapper"
     );
     const finalNavElement = isSpatial ? spatialWrapper : navElement;
-    const contextValue = { variant, labelVisibility, xr: isXr };
+    const contextValue = { variant, labelVisibility, activeIndicatorTransition };
     if (isModal) {
       if (typeof document === "undefined") return null;
       return reactDom.createPortal(
@@ -7357,13 +7654,13 @@ var NavigationRailComponent = React38__namespace.forwardRef(
   }
 );
 NavigationRailComponent.displayName = "NavigationRail";
-var NavigationRail = React38__namespace.memo(NavigationRailComponent);
+var NavigationRail = React39__namespace.memo(NavigationRailComponent);
 var MD3_FAST_EFFECTS2 = [0.3, 0, 1, 1];
-var RadioGroupContext = React38__namespace.createContext(
+var RadioGroupContext = React39__namespace.createContext(
   null
 );
 function useMergedRef3(externalRef, internalRef) {
-  return React38__namespace.useCallback(
+  return React39__namespace.useCallback(
     (node) => {
       internalRef.current = node;
       if (!externalRef) return;
@@ -7376,7 +7673,7 @@ function useMergedRef3(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var RadioVisual = React38__namespace.memo(function RadioVisual2({
+var RadioVisual = React39__namespace.memo(function RadioVisual2({
   isSelected,
   disabled,
   error,
@@ -7429,7 +7726,7 @@ var RadioVisual = React38__namespace.memo(function RadioVisual2({
     }
   );
 });
-var RadioButtonComponent = React38__namespace.forwardRef(
+var RadioButtonComponent = React39__namespace.forwardRef(
   ({
     selected,
     defaultSelected = false,
@@ -7448,23 +7745,23 @@ var RadioButtonComponent = React38__namespace.forwardRef(
     required: requiredProp
   }, ref) => {
     var _a, _b;
-    const group = React38__namespace.useContext(RadioGroupContext);
+    const group = React39__namespace.useContext(RadioGroupContext);
     const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-    const generatedId = React38__namespace.useId();
+    const generatedId = React39__namespace.useId();
     const inputId = idProp != null ? idProp : label ? `radio-${generatedId}` : void 0;
     const name = (_b = group == null ? void 0 : group.name) != null ? _b : nameProp;
     const disabled = (group == null ? void 0 : group.disabled) || disabledProp;
     const error = (group == null ? void 0 : group.error) || errorProp || color === "error";
     const required = (group == null ? void 0 : group.required) || requiredProp;
-    const [internalSelected, setInternalSelected] = React38__namespace.useState(defaultSelected);
+    const [internalSelected, setInternalSelected] = React39__namespace.useState(defaultSelected);
     const isControlled = selected !== void 0;
     const isSelected = group ? group.selectedValue === value : isControlled ? selected != null ? selected : false : internalSelected;
-    const [ripples, setRipples] = React38__namespace.useState([]);
-    const removeRipple = React38__namespace.useCallback(
+    const [ripples, setRipples] = React39__namespace.useState([]);
+    const removeRipple = React39__namespace.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
-    const onPointerDown = React38__namespace.useCallback(
+    const onPointerDown = React39__namespace.useCallback(
       (e) => {
         if (disabled) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -7478,12 +7775,12 @@ var RadioButtonComponent = React38__namespace.forwardRef(
       },
       [disabled]
     );
-    const [isHovered, setIsHovered] = React38__namespace.useState(false);
-    const onPointerEnter = React38__namespace.useCallback(() => {
+    const [isHovered, setIsHovered] = React39__namespace.useState(false);
+    const onPointerEnter = React39__namespace.useCallback(() => {
       if (!disabled) setIsHovered(true);
     }, [disabled]);
-    const onPointerLeave = React38__namespace.useCallback(() => setIsHovered(false), []);
-    const handleChange = React38__namespace.useCallback(
+    const onPointerLeave = React39__namespace.useCallback(() => setIsHovered(false), []);
+    const handleChange = React39__namespace.useCallback(
       (_e) => {
         if (disabled || onClick === null) return;
         if (group) {
@@ -7497,7 +7794,7 @@ var RadioButtonComponent = React38__namespace.forwardRef(
       },
       [disabled, onClick, group, value, isControlled]
     );
-    const inputRef = React38__namespace.useRef(null);
+    const inputRef = React39__namespace.useRef(null);
     const mergedRef = useMergedRef3(ref, inputRef);
     const stateLayerBg = error ? "before:bg-m3-error" : "before:bg-m3-primary";
     const stateLayerClass = cn(
@@ -7608,8 +7905,8 @@ var RadioButtonComponent = React38__namespace.forwardRef(
   }
 );
 RadioButtonComponent.displayName = "RadioButton";
-var RadioButton = React38__namespace.memo(RadioButtonComponent);
-var RadioGroupComponent = React38__namespace.forwardRef(
+var RadioButton = React39__namespace.memo(RadioButtonComponent);
+var RadioGroupComponent = React39__namespace.forwardRef(
   ({
     name,
     value: valueProp,
@@ -7624,19 +7921,19 @@ var RadioGroupComponent = React38__namespace.forwardRef(
     children,
     className
   }, ref) => {
-    const [internalValue, setInternalValue] = React38__namespace.useState(defaultValue);
+    const [internalValue, setInternalValue] = React39__namespace.useState(defaultValue);
     const isControlled = valueProp !== void 0;
     const selectedValue = isControlled ? valueProp : internalValue;
-    const handleValueChange = React38__namespace.useCallback(
+    const handleValueChange = React39__namespace.useCallback(
       (val) => {
         if (!isControlled) setInternalValue(val);
         onValueChange == null ? void 0 : onValueChange(val);
       },
       [isControlled, onValueChange]
     );
-    const groupRef = React38__namespace.useRef(null);
+    const groupRef = React39__namespace.useRef(null);
     const mergedRef = useMergedRef3(ref, groupRef);
-    const onKeyDown = React38__namespace.useCallback(
+    const onKeyDown = React39__namespace.useCallback(
       (e) => {
         var _a, _b;
         if (disabled) return;
@@ -7660,7 +7957,7 @@ var RadioGroupComponent = React38__namespace.forwardRef(
       },
       [disabled, handleValueChange]
     );
-    const contextValue = React38__namespace.useMemo(
+    const contextValue = React39__namespace.useMemo(
       () => ({
         name,
         selectedValue,
@@ -7695,7 +7992,7 @@ var RadioGroupComponent = React38__namespace.forwardRef(
   }
 );
 RadioGroupComponent.displayName = "RadioGroup";
-var RadioGroup = React38__namespace.memo(RadioGroupComponent);
+var RadioGroup = React39__namespace.memo(RadioGroupComponent);
 function useSearchKeyboard({
   active,
   onActiveChange,
@@ -7704,14 +8001,14 @@ function useSearchKeyboard({
   itemCount,
   onSelectSuggestion
 }) {
-  const [activeIndex, setActiveIndex] = React38__namespace.useState(-1);
-  const resetKeyRef = React38__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 = React38__namespace.useCallback(
+  const handleKeyDown = React39__namespace.useCallback(
     (e) => {
       if (!active) return;
       switch (e.key) {
@@ -7751,7 +8048,7 @@ function useSearchKeyboard({
       query
     ]
   );
-  const resetActiveIndex = React38__namespace.useCallback(() => {
+  const resetActiveIndex = React39__namespace.useCallback(() => {
     setActiveIndex(-1);
   }, []);
   return { activeIndex, handleKeyDown, resetActiveIndex };
@@ -7839,10 +8136,10 @@ function AnimatedPlaceholder({
   className
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const containerRef = React38__namespace.useRef(null);
-  const spanRef = React38__namespace.useRef(null);
-  const [xOffset, setXOffset] = React38__namespace.useState(0);
-  const recalculate = React38__namespace.useCallback(() => {
+  const 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") {
@@ -7857,10 +8154,10 @@ function AnimatedPlaceholder({
       setXOffset(Math.max(0, containerWidth - textWidth));
     }
   }, [textAlign]);
-  React38__namespace.useLayoutEffect(() => {
+  React39__namespace.useLayoutEffect(() => {
     recalculate();
   }, [recalculate]);
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(recalculate);
@@ -7929,10 +8226,10 @@ function SearchBar({
   activeIndex
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React38__namespace.useRef(null);
-  const prevActiveRef = React38__namespace.useRef(active);
-  const isRestoringFocusRef = React38__namespace.useRef(false);
-  React38__namespace.useEffect(() => {
+  const inputRef = React39__namespace.useRef(null);
+  const prevActiveRef = React39__namespace.useRef(active);
+  const isRestoringFocusRef = React39__namespace.useRef(false);
+  React39__namespace.useEffect(() => {
     var _a;
     let rafId;
     if (prevActiveRef.current === true && active === false) {
@@ -8051,7 +8348,7 @@ function SearchBar({
     ) })
   );
 }
-var SearchContext = React38__namespace.createContext(null);
+var SearchContext = React39__namespace.createContext(null);
 function SearchProvider({
   children,
   value
@@ -8059,15 +8356,15 @@ function SearchProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(SearchContext.Provider, { value, children });
 }
 function useSearch() {
-  const context = React38__namespace.useContext(SearchContext);
+  const context = React39__namespace.useContext(SearchContext);
   if (!context) {
     return { listboxId: "", activeIndex: -1 };
   }
   return context;
 }
 function useClickOutside(handler, enabled = true) {
-  const ref = React38.useRef(null);
-  React38.useEffect(() => {
+  const ref = React39.useRef(null);
+  React39.useEffect(() => {
     if (!enabled) return;
     const listener = (event) => {
       const el = ref.current;
@@ -8086,7 +8383,7 @@ function useClickOutside(handler, enabled = true) {
   return ref;
 }
 function useSearchViewFocus(inputRef, active) {
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     if (!active) return;
     let raf2;
     const raf1 = requestAnimationFrame(() => {
@@ -8160,7 +8457,7 @@ function SearchViewDocked({
   activeIndex
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React38__namespace.useRef(null);
+  const inputRef = React39__namespace.useRef(null);
   useSearchViewFocus(inputRef, active);
   const dropdownRef = useClickOutside(() => {
     onActiveChange(false);
@@ -8306,10 +8603,10 @@ function SearchViewFullScreen({
   activeIndex
 }) {
   const shouldReduceMotion = react.useReducedMotion();
-  const inputRef = React38__namespace.useRef(null);
+  const inputRef = React39__namespace.useRef(null);
   useSearchViewFocus(inputRef, active);
-  const [mounted, setMounted] = React38__namespace.useState(false);
-  React38__namespace.useEffect(() => {
+  const [mounted, setMounted] = React39__namespace.useState(false);
+  React39__namespace.useEffect(() => {
     setMounted(true);
   }, []);
   const handleFormSubmit = (e) => {
@@ -8467,10 +8764,10 @@ function SearchComponent({
   className,
   viewClassName
 }) {
-  const generatedId = React38__namespace.useId();
+  const generatedId = React39__namespace.useId();
   const searchId = id != null ? id : generatedId;
   const listboxId = `${searchId}-listbox`;
-  const itemCount = React38__namespace.Children.count(children);
+  const itemCount = React39__namespace.Children.count(children);
   const { activeIndex, handleKeyDown } = useSearchKeyboard({
     active,
     onActiveChange,
@@ -8568,7 +8865,7 @@ function useSliderMath({
   max,
   step
 }) {
-  return React38.useMemo(
+  return React39.useMemo(
     () => ({
       coerce: (v) => coerceValue(v, min, max),
       snap: (v) => snapToStep(v, min, step),
@@ -8706,7 +9003,7 @@ var SLIDER_INDICATOR_TRANSITION = {
   stiffness: 450,
   damping: 32
 };
-var ValueIndicator = React38__namespace.memo(function ValueIndicator2({
+var ValueIndicator = React39__namespace.memo(function ValueIndicator2({
   value,
   visible,
   orientation,
@@ -8753,7 +9050,7 @@ var ValueIndicator = React38__namespace.memo(function ValueIndicator2({
     "value-indicator"
   ) });
 });
-var SliderThumb = React38__namespace.memo(function SliderThumb2({
+var SliderThumb = React39__namespace.memo(function SliderThumb2({
   value,
   percent,
   min,
@@ -8785,11 +9082,11 @@ var SliderThumb = React38__namespace.memo(function SliderThumb2({
     [posTarget]: `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`
   };
   const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-  const [isDragging, setIsDragging] = React38__namespace.useState(false);
-  const [isHovered, setIsHovered] = React38__namespace.useState(false);
-  const [isFocused, setIsFocused] = React38__namespace.useState(false);
-  const pointerIdRef = React38__namespace.useRef(null);
-  const thumbRef = React38__namespace.useRef(null);
+  const [isDragging, setIsDragging] = React39__namespace.useState(false);
+  const [isHovered, setIsHovered] = React39__namespace.useState(false);
+  const [isFocused, setIsFocused] = React39__namespace.useState(false);
+  const pointerIdRef = React39__namespace.useRef(null);
+  const thumbRef = React39__namespace.useRef(null);
   const showIndicator = showValueIndicator && (isDragging || isHovered || isFocused);
   const positionStyle = isHorizontal ? __spreadProps(__spreadValues({
     position: "absolute"
@@ -8804,7 +9101,7 @@ var SliderThumb = React38__namespace.memo(function SliderThumb2({
     transform: "translate(-50%, 50%)",
     zIndex
   });
-  const getDeltaFromPointer = React38__namespace.useCallback(
+  const getDeltaFromPointer = React39__namespace.useCallback(
     (e) => {
       const trackEl = trackRef.current;
       if (!trackEl) return percent;
@@ -8831,7 +9128,7 @@ var SliderThumb = React38__namespace.memo(function SliderThumb2({
     },
     [isHorizontal, max, min, percent, step, trackRef, trackSize]
   );
-  const handlePointerDown = React38__namespace.useCallback(
+  const handlePointerDown = React39__namespace.useCallback(
     (e) => {
       if (disabled) return;
       e.preventDefault();
@@ -8842,7 +9139,7 @@ var SliderThumb = React38__namespace.memo(function SliderThumb2({
     },
     [disabled]
   );
-  const handlePointerMove = React38__namespace.useCallback(
+  const handlePointerMove = React39__namespace.useCallback(
     (e) => {
       if (!isDragging || e.pointerId !== pointerIdRef.current) return;
       const newValue = getDeltaFromPointer(e.nativeEvent);
@@ -8850,7 +9147,7 @@ var SliderThumb = React38__namespace.memo(function SliderThumb2({
     },
     [isDragging, getDeltaFromPointer, onValueChange]
   );
-  const handlePointerUp = React38__namespace.useCallback(
+  const handlePointerUp = React39__namespace.useCallback(
     (e) => {
       if (e.pointerId !== pointerIdRef.current) return;
       e.currentTarget.releasePointerCapture(e.pointerId);
@@ -8860,7 +9157,7 @@ var SliderThumb = React38__namespace.memo(function SliderThumb2({
     },
     [onValueChangeEnd, value]
   );
-  const handleKeyDown = React38__namespace.useCallback(
+  const handleKeyDown = React39__namespace.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Home") {
@@ -8964,7 +9261,7 @@ var SliderThumb = React38__namespace.memo(function SliderThumb2({
     }
   );
 });
-var RangeTrack = React38__namespace.memo(function RangeTrack2({
+var RangeTrack = React39__namespace.memo(function RangeTrack2({
   startPercent,
   endPercent,
   trackSize,
@@ -9209,7 +9506,7 @@ var RangeTrack = React38__namespace.memo(function RangeTrack2({
     }
   );
 });
-var RangeSliderComponent = React38__namespace.forwardRef(
+var RangeSliderComponent = React39__namespace.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -9233,7 +9530,7 @@ var RangeSliderComponent = React38__namespace.forwardRef(
     const isHorizontal = orientation === "horizontal";
     const defaultStart = (_a = defaultValue == null ? void 0 : defaultValue[0]) != null ? _a : min;
     const defaultEnd = (_b = defaultValue == null ? void 0 : defaultValue[1]) != null ? _b : max;
-    const [internalValue, setInternalValue] = React38__namespace.useState([
+    const [internalValue, setInternalValue] = React39__namespace.useState([
       defaultStart,
       defaultEnd
     ]);
@@ -9247,10 +9544,10 @@ var RangeSliderComponent = React38__namespace.forwardRef(
     const endValue = snap(coerce(resolvedValue[1]));
     const startPercent = toPercent(startValue);
     const endPercent = toPercent(endValue);
-    const [topThumb, setTopThumb] = React38__namespace.useState("end");
-    const trackRef = React38__namespace.useRef(null);
+    const [topThumb, setTopThumb] = React39__namespace.useState("end");
+    const trackRef = React39__namespace.useRef(null);
     const minGap = step > 0 ? step : (max - min) / 1e3;
-    const handleStartChange = React38__namespace.useCallback(
+    const handleStartChange = React39__namespace.useCallback(
       (newStart) => {
         setTopThumb("start");
         const clamped = Math.min(newStart, endValue - minGap);
@@ -9262,7 +9559,7 @@ var RangeSliderComponent = React38__namespace.forwardRef(
       },
       [controlledValue, coerce, endValue, minGap, onValueChange, snap]
     );
-    const handleEndChange = React38__namespace.useCallback(
+    const handleEndChange = React39__namespace.useCallback(
       (newEnd) => {
         setTopThumb("end");
         const clamped = Math.max(newEnd, startValue + minGap);
@@ -9274,15 +9571,15 @@ var RangeSliderComponent = React38__namespace.forwardRef(
       },
       [controlledValue, coerce, minGap, onValueChange, snap, startValue]
     );
-    const handleStartChangeEnd = React38__namespace.useCallback(
+    const handleStartChangeEnd = React39__namespace.useCallback(
       (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([v, endValue]),
       [endValue, onValueChangeEnd]
     );
-    const handleEndChangeEnd = React38__namespace.useCallback(
+    const handleEndChangeEnd = React39__namespace.useCallback(
       (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([startValue, v]),
       [onValueChangeEnd, startValue]
     );
-    const handleTrackPointerDown = React38__namespace.useCallback(
+    const handleTrackPointerDown = React39__namespace.useCallback(
       (e) => {
         if (disabled) return;
         const trackEl = trackRef.current;
@@ -9326,7 +9623,7 @@ var RangeSliderComponent = React38__namespace.forwardRef(
         trackSize
       ]
     );
-    const id = React38__namespace.useId();
+    const id = React39__namespace.useId();
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -9406,7 +9703,7 @@ var RangeSliderComponent = React38__namespace.forwardRef(
   }
 );
 RangeSliderComponent.displayName = "RangeSlider";
-var RangeSlider = React38__namespace.memo(RangeSliderComponent);
+var RangeSlider = React39__namespace.memo(RangeSliderComponent);
 function getHorizontalRadius(isLeading, innerR, outerR) {
   if (isLeading) {
     return {
@@ -9445,7 +9742,7 @@ var allInnerRadius = (innerR) => ({
   borderTopRightRadius: innerR,
   borderBottomRightRadius: innerR
 });
-var InsetIcon = React38__namespace.memo(function InsetIcon2({
+var InsetIcon = React39__namespace.memo(function InsetIcon2({
   icon,
   isOnActiveSegment,
   position,
@@ -9539,7 +9836,7 @@ function Ticks({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style, "aria-hidden": "true" }, tick);
   }) });
 }
-var SliderTrack = React38__namespace.memo(function SliderTrack2({
+var SliderTrack = React39__namespace.memo(function SliderTrack2({
   percent,
   trackSize,
   orientation,
@@ -9574,8 +9871,8 @@ var SliderTrack = React38__namespace.memo(function SliderTrack2({
   const gapWithThumbStr = `${thumbGap + thumbHalfWidth}px`;
   const hasAnyInsetIcon = Boolean(insetIcon || insetIconTrailing);
   const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-  const [trackWidth, setTrackWidth] = React38__namespace.useState(0);
-  React38__namespace.useLayoutEffect(() => {
+  const [trackWidth, setTrackWidth] = React39__namespace.useState(0);
+  React39__namespace.useLayoutEffect(() => {
     const el = trackRef.current;
     if (!el || !hasAnyInsetIcon) return;
     setTrackWidth(isHorizontal ? el.clientWidth : el.clientHeight);
@@ -9592,8 +9889,8 @@ var SliderTrack = React38__namespace.memo(function SliderTrack2({
   const iconTotalWidth = activeIconSize + SliderTokens.insetIconPadding * 2 + thumbGap + thumbHalfWidth;
   const iconThreshold = trackWidth > 0 ? iconTotalWidth / trackWidth : 0.15;
   const HYSTERESIS_GAP = 0.04;
-  const trailingActiveRef = React38__namespace.useRef(1 - percent <= iconThreshold);
-  const leadingActiveRef = React38__namespace.useRef(percent > iconThreshold);
+  const trailingActiveRef = React39__namespace.useRef(1 - percent <= iconThreshold);
+  const leadingActiveRef = React39__namespace.useRef(percent > iconThreshold);
   const trailingPercent = 1 - percent;
   if (trailingActiveRef.current) {
     if (trailingPercent > iconThreshold + HYSTERESIS_GAP) {
@@ -10100,7 +10397,7 @@ var SliderTrack = React38__namespace.memo(function SliderTrack2({
     }
   );
 });
-var SliderComponent = React38__namespace.forwardRef(
+var SliderComponent = React39__namespace.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -10129,7 +10426,7 @@ var SliderComponent = React38__namespace.forwardRef(
     const isHorizontal = orientation === "horizontal";
     const midpoint = min + (max - min) / 2;
     const initialValue = defaultValue != null ? defaultValue : midpoint;
-    const [internalValue, setInternalValue] = React38__namespace.useState(initialValue);
+    const [internalValue, setInternalValue] = React39__namespace.useState(initialValue);
     const resolvedValue = controlledValue !== void 0 ? controlledValue : internalValue;
     const { coerce, snap, toPercent, ticks } = useSliderMath({
       min,
@@ -10138,8 +10435,8 @@ var SliderComponent = React38__namespace.forwardRef(
     });
     const safeValue = snap(coerce(resolvedValue));
     const percent = toPercent(safeValue);
-    const trackRef = React38__namespace.useRef(null);
-    const handleValueChange = React38__namespace.useCallback(
+    const trackRef = React39__namespace.useRef(null);
+    const handleValueChange = React39__namespace.useCallback(
       (newValue) => {
         const clamped = snap(coerce(newValue));
         if (controlledValue === void 0) {
@@ -10149,13 +10446,13 @@ var SliderComponent = React38__namespace.forwardRef(
       },
       [coerce, controlledValue, onValueChange, snap]
     );
-    const handleValueChangeEnd = React38__namespace.useCallback(
+    const handleValueChangeEnd = React39__namespace.useCallback(
       (newValue) => {
         onValueChangeEnd == null ? void 0 : onValueChangeEnd(snap(coerce(newValue)));
       },
       [coerce, onValueChangeEnd, snap]
     );
-    const handleTrackPointerDown = React38__namespace.useCallback(
+    const handleTrackPointerDown = React39__namespace.useCallback(
       (e) => {
         if (disabled) return;
         const trackEl = trackRef.current;
@@ -10190,7 +10487,7 @@ var SliderComponent = React38__namespace.forwardRef(
         trackSize
       ]
     );
-    const id = React38__namespace.useId();
+    const id = React39__namespace.useId();
     const thumbId = `slider-thumb-${id}`;
     const supportsInsetIcon = !isCentered && SliderTokens.trackSizes[trackSize] >= 40;
     const hasAnyInsetIcon = !!(insetIcon || insetIconTrailing);
@@ -10262,7 +10559,7 @@ var SliderComponent = React38__namespace.forwardRef(
   }
 );
 SliderComponent.displayName = "Slider";
-var Slider = React38__namespace.memo(SliderComponent);
+var Slider = React39__namespace.memo(SliderComponent);
 var DURATION_MAP = {
   short: 4e3,
   long: 7e3
@@ -10308,9 +10605,9 @@ function toSnackbarData(item) {
   return { id: generateId(), visuals: item.visuals, resolve: item.resolve };
 }
 function useSnackbarState() {
-  const [current, setCurrent] = React38__namespace.useState(null);
-  const queueRef = React38__namespace.useRef([]);
-  const showSnackbar = React38__namespace.useCallback(
+  const [current, setCurrent] = React39__namespace.useState(null);
+  const queueRef = React39__namespace.useRef([]);
+  const showSnackbar = React39__namespace.useCallback(
     (visuals) => {
       return new Promise((resolve) => {
         const item = { visuals, resolve };
@@ -10323,14 +10620,14 @@ function useSnackbarState() {
     },
     []
   );
-  const _dismiss = React38__namespace.useCallback((result) => {
+  const _dismiss = React39__namespace.useCallback((result) => {
     setCurrent((prev) => {
       if (prev) prev.resolve(result);
       const next = queueRef.current.shift();
       return next ? toSnackbarData(next) : null;
     });
   }, []);
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     return () => {
       for (const item of queueRef.current) {
         item.resolve(RESULT.DISMISSED);
@@ -10340,7 +10637,7 @@ function useSnackbarState() {
   }, []);
   return { current, showSnackbar, _dismiss };
 }
-var Snackbar = React38__namespace.memo(function Snackbar2({
+var Snackbar = React39__namespace.memo(function Snackbar2({
   data,
   className
 }) {
@@ -10354,15 +10651,15 @@ var Snackbar = React38__namespace.memo(function Snackbar2({
   } = visuals;
   const reducedMotion = react.useReducedMotion();
   const durationMs = resolveDuration(duration);
-  React38__namespace.useEffect(() => {
+  React39__namespace.useEffect(() => {
     const timer = setTimeout(() => resolve(RESULT.DISMISSED), durationMs);
     return () => clearTimeout(timer);
   }, [resolve, durationMs]);
-  const handleAction = React38__namespace.useCallback(
+  const handleAction = React39__namespace.useCallback(
     () => resolve(RESULT.ACTION),
     [resolve]
   );
-  const handleDismiss = React38__namespace.useCallback(
+  const handleDismiss = React39__namespace.useCallback(
     () => resolve(RESULT.DISMISSED),
     [resolve]
   );
@@ -10430,7 +10727,7 @@ var Snackbar = React38__namespace.memo(function Snackbar2({
 Snackbar.displayName = "Snackbar";
 function SnackbarHost({ state, className }) {
   const { current, _dismiss } = state;
-  const wrappedData = React38__namespace.useMemo(() => {
+  const wrappedData = React39__namespace.useMemo(() => {
     if (!current) return null;
     return __spreadProps(__spreadValues({}, current), { resolve: _dismiss });
   }, [current, _dismiss]);
@@ -10448,12 +10745,12 @@ function SnackbarHost({ state, className }) {
   ) });
 }
 SnackbarHost.displayName = "SnackbarHost";
-var SnackbarContext = React38__namespace.createContext(
+var SnackbarContext = React39__namespace.createContext(
   null
 );
 function SnackbarProvider({ children }) {
   const state = useSnackbarState();
-  const contextValue = React38__namespace.useMemo(
+  const contextValue = React39__namespace.useMemo(
     () => ({ showSnackbar: state.showSnackbar }),
     [state.showSnackbar]
   );
@@ -10464,7 +10761,7 @@ function SnackbarProvider({ children }) {
 }
 SnackbarProvider.displayName = "SnackbarProvider";
 function useSnackbar() {
-  const ctx = React38__namespace.useContext(SnackbarContext);
+  const ctx = React39__namespace.useContext(SnackbarContext);
   if (!ctx) {
     throw new Error("useSnackbar must be used within a <SnackbarProvider>.");
   }
@@ -10568,7 +10865,7 @@ function isIconVisible(thumbContent, icons, showOnlySelectedIcon, checked) {
   if (icons) return true;
   return showOnlySelectedIcon && checked;
 }
-var SwitchVisual = React38__namespace.memo(function SwitchVisual2({
+var SwitchVisual = React39__namespace.memo(function SwitchVisual2({
   checked,
   disabled,
   isPressed,
@@ -10688,7 +10985,7 @@ var SwitchVisual = React38__namespace.memo(function SwitchVisual2({
     }
   );
 });
-var SwitchComponent = React38__namespace.forwardRef(
+var SwitchComponent = React39__namespace.forwardRef(
   ({
     checked,
     onCheckedChange,
@@ -10706,16 +11003,16 @@ var SwitchComponent = React38__namespace.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-    const [isPressed, setIsPressed] = React38__namespace.useState(false);
-    const [isHovered, setIsHovered] = React38__namespace.useState(false);
-    const [isFocused, setIsFocused] = React38__namespace.useState(false);
-    const [ripples, setRipples] = React38__namespace.useState([]);
-    const generatedId = React38__namespace.useId();
+    const [isPressed, setIsPressed] = React39__namespace.useState(false);
+    const [isHovered, setIsHovered] = React39__namespace.useState(false);
+    const [isFocused, setIsFocused] = React39__namespace.useState(false);
+    const [ripples, setRipples] = React39__namespace.useState([]);
+    const generatedId = React39__namespace.useId();
     const switchId = label ? `switch-${generatedId}` : void 0;
-    const handleClick = React38__namespace.useCallback(() => {
+    const handleClick = React39__namespace.useCallback(() => {
       if (!disabled) onCheckedChange(!checked);
     }, [disabled, checked, onCheckedChange]);
-    const handleKeyDown = React38__namespace.useCallback(
+    const handleKeyDown = React39__namespace.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === " " || e.key === "Enter") {
@@ -10725,7 +11022,7 @@ var SwitchComponent = React38__namespace.forwardRef(
       },
       [disabled, checked, onCheckedChange]
     );
-    const handlePointerDown = React38__namespace.useCallback(
+    const handlePointerDown = React39__namespace.useCallback(
       (e) => {
         if (disabled) return;
         setIsPressed(true);
@@ -10740,19 +11037,19 @@ var SwitchComponent = React38__namespace.forwardRef(
       },
       [disabled]
     );
-    const handlePointerUp = React38__namespace.useCallback(() => {
+    const handlePointerUp = React39__namespace.useCallback(() => {
       setIsPressed(false);
     }, []);
-    const handlePointerEnter = React38__namespace.useCallback(() => {
+    const handlePointerEnter = React39__namespace.useCallback(() => {
       if (!disabled) setIsHovered(true);
     }, [disabled]);
-    const handlePointerLeave = React38__namespace.useCallback(() => {
+    const handlePointerLeave = React39__namespace.useCallback(() => {
       setIsHovered(false);
       setIsPressed(false);
     }, []);
-    const handleFocus = React38__namespace.useCallback(() => setIsFocused(true), []);
-    const handleBlur = React38__namespace.useCallback(() => setIsFocused(false), []);
-    const removeRipple = React38__namespace.useCallback(
+    const handleFocus = React39__namespace.useCallback(() => setIsFocused(true), []);
+    const handleBlur = React39__namespace.useCallback(() => setIsFocused(false), []);
+    const removeRipple = React39__namespace.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
@@ -10837,7 +11134,7 @@ var SwitchComponent = React38__namespace.forwardRef(
   }
 );
 SwitchComponent.displayName = "Switch";
-var Switch = React38__namespace.memo(SwitchComponent);
+var Switch = React39__namespace.memo(SwitchComponent);
 var typographyVariants = classVarianceAuthority.cva("m-0 p-0 text-m3-on-surface", {
   variants: {
     variant: {
@@ -10862,10 +11159,10 @@ var typographyVariants = classVarianceAuthority.cva("m-0 p-0 text-m3-on-surface"
     variant: "body-md"
   }
 });
-var Text = React38__namespace.forwardRef(
+var Text = React39__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, as: Component } = _b, props = __objRest(_b, ["className", "variant", "as"]);
-    const defaultComponent = React38__namespace.useMemo(() => {
+    const defaultComponent = React39__namespace.useMemo(() => {
       if ((variant == null ? void 0 : variant.startsWith("display")) || (variant == null ? void 0 : variant.startsWith("headline")))
         return "h1";
       if (variant == null ? void 0 : variant.startsWith("title")) return "h2";
@@ -10882,9 +11179,9 @@ var Text = React38__namespace.forwardRef(
   }
 );
 Text.displayName = "Text";
-var TabsContext = React38__namespace.createContext(null);
+var TabsContext = React39__namespace.createContext(null);
 function useTabsContext() {
-  const ctx = React38__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>."
@@ -10892,7 +11189,7 @@ function useTabsContext() {
   }
   return ctx;
 }
-var TabsComponent = React38__namespace.forwardRef(
+var TabsComponent = React39__namespace.forwardRef(
   ({
     value: controlledValue,
     defaultValue = "",
@@ -10901,35 +11198,35 @@ var TabsComponent = React38__namespace.forwardRef(
     children,
     className
   }, ref) => {
-    const [internalValue, setInternalValue] = React38__namespace.useState(defaultValue);
+    const [internalValue, setInternalValue] = React39__namespace.useState(defaultValue);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const handleValueChange = React38__namespace.useCallback(
+    const handleValueChange = React39__namespace.useCallback(
       (newValue) => {
         if (!isControlled) setInternalValue(newValue);
         onValueChange == null ? void 0 : onValueChange(newValue);
       },
       [isControlled, onValueChange]
     );
-    const [focusedValue, setFocusedValue] = React38__namespace.useState(value);
-    React38__namespace.useEffect(() => {
+    const [focusedValue, setFocusedValue] = React39__namespace.useState(value);
+    React39__namespace.useEffect(() => {
       setFocusedValue(value);
     }, [value]);
-    const [tabValues, setTabValues] = React38__namespace.useState([]);
-    const registerTab = React38__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 = React38__namespace.useCallback((tabValue) => {
+    const unregisterTab = React39__namespace.useCallback((tabValue) => {
       setTabValues((prev) => prev.filter((v) => v !== tabValue));
     }, []);
-    const hasAutoSelected = React38__namespace.useRef(false);
-    const [disabledValues, setDisabledValues] = React38__namespace.useState(
+    const hasAutoSelected = React39__namespace.useRef(false);
+    const [disabledValues, setDisabledValues] = React39__namespace.useState(
       /* @__PURE__ */ new Set()
     );
-    const markTabDisabled = React38__namespace.useCallback(
+    const markTabDisabled = React39__namespace.useCallback(
       (tabValue, disabled) => {
         setDisabledValues((prev) => {
           const next = new Set(prev);
@@ -10943,7 +11240,7 @@ var TabsComponent = React38__namespace.forwardRef(
       },
       []
     );
-    React38__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       if (isControlled || hasAutoSelected.current || tabValues.length === 0) {
         return;
       }
@@ -10958,9 +11255,9 @@ var TabsComponent = React38__namespace.forwardRef(
         setFocusedValue(firstEnabled);
       }
     }, [tabValues, disabledValues, isControlled, value]);
-    const id = React38__namespace.useId();
+    const id = React39__namespace.useId();
     const layoutGroupId = `tabs-${id}`;
-    const contextValue = React38__namespace.useMemo(
+    const contextValue = React39__namespace.useMemo(
       () => ({
         value,
         onValueChange: handleValueChange,
@@ -10991,12 +11288,12 @@ var TabsComponent = React38__namespace.forwardRef(
   }
 );
 TabsComponent.displayName = "Tabs";
-var Tabs = React38__namespace.memo(TabsComponent);
-var TabsListContext = React38__namespace.createContext(
+var Tabs = React39__namespace.memo(TabsComponent);
+var TabsListContext = React39__namespace.createContext(
   null
 );
 function useTabsListContext() {
-  const ctx = React38__namespace.useContext(TabsListContext);
+  const ctx = React39__namespace.useContext(TabsListContext);
   return ctx != null ? ctx : { variant: "primary", scrollable: false };
 }
 
@@ -11080,7 +11377,7 @@ var TABS_CONTENT_TRANSITION = {
   ease: "easeInOut"
 };
 var INDICATOR_MIN_WIDTH = 24;
-var TabComponent = React38__namespace.forwardRef(
+var TabComponent = React39__namespace.forwardRef(
   ({
     value,
     icon,
@@ -11110,9 +11407,9 @@ var TabComponent = React38__namespace.forwardRef(
     const isFocused = focusedValue === value;
     const hasIcon = icon != null;
     const isStackedIcon = hasIcon && !inlineIcon;
-    const buttonRef = React38__namespace.useRef(null);
-    const isFirstMount = React38__namespace.useRef(true);
-    const mergedRef = React38__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);
@@ -11120,15 +11417,15 @@ var TabComponent = React38__namespace.forwardRef(
       },
       [ref]
     );
-    React38__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       registerTab(value);
       return () => unregisterTab(value);
     }, [value, registerTab, unregisterTab]);
-    React38__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       markTabDisabled(value, disabled);
       return () => markTabDisabled(value, false);
     }, [value, disabled, markTabDisabled]);
-    const handleKeyDown = React38__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));
@@ -11182,7 +11479,7 @@ var TabComponent = React38__namespace.forwardRef(
         autoActivate
       ]
     );
-    React38__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       if (isFirstMount.current) {
         isFirstMount.current = false;
         return;
@@ -11191,7 +11488,7 @@ var TabComponent = React38__namespace.forwardRef(
         buttonRef.current.focus({ preventScroll: true });
       }
     }, [isFocused]);
-    React38__namespace.useEffect(() => {
+    React39__namespace.useEffect(() => {
       if (!isActive || !scrollable || !buttonRef.current) return;
       const btn = buttonRef.current;
       let container = btn.parentElement;
@@ -11328,8 +11625,8 @@ var TabComponent = React38__namespace.forwardRef(
   }
 );
 TabComponent.displayName = "Tab";
-var Tab = React38__namespace.memo(TabComponent);
-var TabsContentComponent = React38__namespace.forwardRef(
+var Tab = React39__namespace.memo(TabComponent);
+var TabsContentComponent = React39__namespace.forwardRef(
   ({ value, className, children }, ref) => {
     var _a;
     const { value: selectedValue, layoutGroupId } = useTabsContext();
@@ -11363,8 +11660,8 @@ var TabsContentComponent = React38__namespace.forwardRef(
   }
 );
 TabsContentComponent.displayName = "TabsContent";
-var TabsContent = React38__namespace.memo(TabsContentComponent);
-var TabsListComponent = React38__namespace.forwardRef(
+var TabsContent = React39__namespace.memo(TabsContentComponent);
+var TabsListComponent = React39__namespace.forwardRef(
   ({
     variant,
     scrollable = false,
@@ -11375,12 +11672,12 @@ var TabsListComponent = React38__namespace.forwardRef(
   }, ref) => {
     const { layoutGroupId, value, setFocusedValue } = useTabsContext();
     const listLayoutId = `${layoutGroupId}-list`;
-    const listContextValue = React38__namespace.useMemo(
+    const listContextValue = React39__namespace.useMemo(
       () => ({ variant, scrollable }),
       [variant, scrollable]
     );
     const bgColor = backgroundColor != null ? backgroundColor : "var(--md-sys-color-surface)";
-    const handleBlur = React38__namespace.useCallback(
+    const handleBlur = React39__namespace.useCallback(
       (e) => {
         const listEl = e.currentTarget;
         if (listEl.contains(e.relatedTarget)) return;
@@ -11429,7 +11726,7 @@ var TabsListComponent = React38__namespace.forwardRef(
   }
 );
 TabsListComponent.displayName = "TabsList";
-var TabsList = React38__namespace.memo(TabsListComponent);
+var TabsList = React39__namespace.memo(TabsListComponent);
 
 // src/ui/text-field/text-field.tokens.ts
 var TF_COLORS = {
@@ -11468,7 +11765,7 @@ var TF_TYPOGRAPHY = {
 var TF_CLASSES = {
   // Prefix / Suffix
   prefixSuffix: "text-base text-[var(--color-m3-on-surface-variant)] select-none shrink-0"};
-var ActiveIndicator = React38__namespace.memo(function ActiveIndicator2({
+var ActiveIndicator = React39__namespace.memo(function ActiveIndicator2({
   isFocused,
   isError,
   isDisabled,
@@ -11515,7 +11812,7 @@ function getLabelColor(isFloated, isFocused, isError, isDisabled) {
   if (isFloated && isFocused) return TF_COLORS.primary;
   return TF_COLORS.onSurfaceVariant;
 }
-var FloatingLabel = React38__namespace.memo(function FloatingLabel2({
+var FloatingLabel = React39__namespace.memo(function FloatingLabel2({
   text,
   isFloated,
   isFocused,
@@ -11575,7 +11872,7 @@ var FloatingLabel = React38__namespace.memo(function FloatingLabel2({
   );
 });
 FloatingLabel.displayName = "FloatingLabel";
-var LeadingIcon = React38__namespace.memo(function LeadingIcon2({
+var LeadingIcon = React39__namespace.memo(function LeadingIcon2({
   children,
   isError,
   isDisabled
@@ -11599,7 +11896,7 @@ function getOutlineColor(isFocused, isError, isHovered, isDisabled) {
   if (isHovered) return TF_COLORS.inputText;
   return TF_COLORS.outline;
 }
-var OutlineContainer = React38__namespace.memo(function OutlineContainer2({
+var OutlineContainer = React39__namespace.memo(function OutlineContainer2({
   isFloated,
   isFocused,
   isError,
@@ -11697,7 +11994,7 @@ var OutlineContainer = React38__namespace.memo(function OutlineContainer2({
   );
 });
 OutlineContainer.displayName = "OutlineContainer";
-var PrefixSuffix = React38__namespace.memo(function PrefixSuffix2({
+var PrefixSuffix = React39__namespace.memo(function PrefixSuffix2({
   text,
   type,
   visible,
@@ -11739,7 +12036,7 @@ function AnimatedText({
     motionKey
   );
 }
-var SupportingText = React38__namespace.memo(function SupportingText2({
+var SupportingText = React39__namespace.memo(function SupportingText2({
   supportingText,
   errorText,
   isError,
@@ -11850,7 +12147,7 @@ function ClearIcon() {
     }
   );
 }
-var TrailingIcon = React38__namespace.memo(function TrailingIcon2({
+var TrailingIcon = React39__namespace.memo(function TrailingIcon2({
   mode,
   children,
   value,
@@ -11916,7 +12213,7 @@ var TrailingIcon = React38__namespace.memo(function TrailingIcon2({
 });
 TrailingIcon.displayName = "TrailingIcon";
 var LINE_HEIGHT_PX = 24;
-var TextFieldComponent = React38__namespace.forwardRef(
+var TextFieldComponent = React39__namespace.forwardRef(
   ({
     // Core
     variant = "filled",
@@ -11980,30 +12277,30 @@ var TextFieldComponent = React38__namespace.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
-    const generatedId = React38__namespace.useId();
+    const generatedId = React39__namespace.useId();
     const inputId = idProp != null ? idProp : `tf-${generatedId}`;
     const supportingId = `${inputId}-supporting`;
     const isControlled = valueProp !== void 0;
-    const [internalValue, setInternalValue] = React38__namespace.useState(defaultValue);
+    const [internalValue, setInternalValue] = React39__namespace.useState(defaultValue);
     const currentValue = isControlled ? valueProp : internalValue;
-    const [isFocused, setIsFocused] = React38__namespace.useState(false);
-    const [showPassword, setShowPassword] = React38__namespace.useState(false);
+    const [isFocused, setIsFocused] = React39__namespace.useState(false);
+    const [showPassword, setShowPassword] = React39__namespace.useState(false);
     const resolvedInputType = type === "password" && showPassword ? "text" : type;
-    const [nativeError, setNativeError] = React38__namespace.useState("");
-    const [labelWidth, setLabelWidth] = React38__namespace.useState(0);
+    const [nativeError, setNativeError] = React39__namespace.useState("");
+    const [labelWidth, setLabelWidth] = React39__namespace.useState(0);
     const hasValue = currentValue.length > 0;
     const isFloated = isFocused || hasValue;
     const isError = errorProp || !!nativeError || maxLength !== void 0 && currentValue.length > maxLength;
     const containerHeight = dense ? TF_SIZE.denseHeight : TF_SIZE.height;
     const showAsterisk = required && !noAsterisk;
-    const inputRef = React38__namespace.useRef(null);
-    const labelSpanRef = React38__namespace.useRef(null);
-    React38__namespace.useLayoutEffect(() => {
+    const inputRef = React39__namespace.useRef(null);
+    const labelSpanRef = React39__namespace.useRef(null);
+    React39__namespace.useLayoutEffect(() => {
       if (labelSpanRef.current) {
         setLabelWidth(labelSpanRef.current.offsetWidth);
       }
     }, []);
-    React38__namespace.useLayoutEffect(() => {
+    React39__namespace.useLayoutEffect(() => {
       if (type !== "textarea" || !inputRef.current) return;
       const textarea = inputRef.current;
       if (autoResize) {
@@ -12015,7 +12312,7 @@ var TextFieldComponent = React38__namespace.forwardRef(
       }
       textarea.style.overflowY = "hidden";
     }, [type, autoResize, maxRows, currentValue]);
-    const handleValueChange = React38__namespace.useCallback(
+    const handleValueChange = React39__namespace.useCallback(
       (newValue) => {
         var _a2, _b;
         if (!isControlled) setInternalValue(newValue);
@@ -12024,7 +12321,7 @@ var TextFieldComponent = React38__namespace.forwardRef(
       },
       [isControlled]
     );
-    const handleChange = React38__namespace.useCallback(
+    const handleChange = React39__namespace.useCallback(
       (e) => {
         const newVal = e.target.value;
         handleValueChange(newVal);
@@ -12032,14 +12329,14 @@ var TextFieldComponent = React38__namespace.forwardRef(
       },
       [handleValueChange, onChange]
     );
-    const handleFocus = React38__namespace.useCallback(
+    const handleFocus = React39__namespace.useCallback(
       (e) => {
         setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [onFocus]
     );
-    const handleBlur = React38__namespace.useCallback(
+    const handleBlur = React39__namespace.useCallback(
       (e) => {
         setIsFocused(false);
         const el = inputRef.current;
@@ -12052,7 +12349,7 @@ var TextFieldComponent = React38__namespace.forwardRef(
       },
       [onBlur]
     );
-    const handleClear = React38__namespace.useCallback(() => {
+    const handleClear = React39__namespace.useCallback(() => {
       var _a2;
       handleValueChange("");
       onChange == null ? void 0 : onChange("", {
@@ -12060,12 +12357,12 @@ var TextFieldComponent = React38__namespace.forwardRef(
       });
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, [handleValueChange, onChange]);
-    const handlePasswordToggle = React38__namespace.useCallback(() => {
+    const handlePasswordToggle = React39__namespace.useCallback(() => {
       var _a2;
       setShowPassword((prev) => !prev);
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, []);
-    React38__namespace.useImperativeHandle(
+    React39__namespace.useImperativeHandle(
       ref,
       () => ({
         focus: () => {
@@ -12310,7 +12607,7 @@ var TextFieldComponent = React38__namespace.forwardRef(
   }
 );
 TextFieldComponent.displayName = "TextField";
-var TextField = React38__namespace.memo(TextFieldComponent);
+var TextField = React39__namespace.memo(TextFieldComponent);
 
 // src/ui/typography/typography-key-tokens.ts
 var TypographyKeyTokens = /* @__PURE__ */ ((TypographyKeyTokens2) => {
@@ -13025,9 +13322,9 @@ var TOKEN_TO_PROP = {
 };
 var defaultTokens = new TypographyTokens();
 var defaultTypography = new Typography();
-var TypographyContext = React38.createContext(defaultTypography);
+var TypographyContext = React39.createContext(defaultTypography);
 function useTypography() {
-  return React38.useContext(TypographyContext);
+  return React39.useContext(TypographyContext);
 }
 function TypographyProvider({
   children,
@@ -13035,7 +13332,7 @@ function TypographyProvider({
   fontFamily,
   fontVariationAxes
 }) {
-  const value = React38.useMemo(() => {
+  const value = React39.useMemo(() => {
     if (typography) return typography;
     if (fontFamily || fontVariationAxes) {
       return new Typography(
@@ -13046,7 +13343,7 @@ function TypographyProvider({
   }, [typography, fontFamily, fontVariationAxes]);
   return /* @__PURE__ */ jsxRuntime.jsx(TypographyContext.Provider, { value, children });
 }
-var ThemeContext = React38.createContext(void 0);
+var ThemeContext = React39.createContext(void 0);
 var STORAGE_KEY_COLOR = "md3-source-color";
 var STORAGE_KEY_MODE = "md3-theme-mode";
 var defaultTokens2 = new TypographyTokens();
@@ -13061,20 +13358,21 @@ function MD3ThemeProvider({
   fontVariationAxes,
   enableSnackbar = false
 }) {
-  const [sourceColor, setSourceColor] = React38.useState(initialSourceColor);
-  const [mode, setMode] = React38.useState(defaultMode);
-  const [isHydrated, setIsHydrated] = React38.useState(!persistToLocalStorage);
-  React38.useEffect(() => {
+  const [sourceColor, setSourceColor] = React39.useState(initialSourceColor);
+  const [mode, setMode] = React39.useState(defaultMode);
+  const [isHydrated, setIsHydrated] = React39.useState(!persistToLocalStorage);
+  React39.useEffect(() => {
     if (!persistToLocalStorage) return;
     const savedColor = localStorage.getItem(STORAGE_KEY_COLOR);
     const savedMode = localStorage.getItem(
       STORAGE_KEY_MODE
     );
     if (savedColor) setSourceColor(savedColor);
-    if (savedMode === "light" || savedMode === "dark") setMode(savedMode);
+    if (savedMode === "light" || savedMode === "dark" || savedMode === "system")
+      setMode(savedMode);
     setIsHydrated(true);
   }, [persistToLocalStorage]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!isHydrated) return;
     applyTheme(sourceColor, mode);
     if (persistToLocalStorage) {
@@ -13082,11 +13380,19 @@ function MD3ThemeProvider({
       localStorage.setItem(STORAGE_KEY_MODE, mode);
     }
   }, [sourceColor, mode, persistToLocalStorage, isHydrated]);
-  const themeValue = React38.useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode }),
-    [sourceColor, mode]
+  React39.useEffect(() => {
+    if (mode !== "system" || typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => applyTheme(sourceColor, "system");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [mode, sourceColor]);
+  const effectiveMode = resolveMode(mode);
+  const themeValue = React39.useMemo(
+    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
+    [sourceColor, mode, effectiveMode]
   );
-  const typographyValue = React38.useMemo(() => {
+  const typographyValue = React39.useMemo(() => {
     if (typographyProp) return typographyProp;
     if (fontFamily != null ? fontFamily : fontVariationAxes) {
       return new Typography(
@@ -13099,7 +13405,7 @@ function MD3ThemeProvider({
 }
 function SnackbarMountedProvider({ children }) {
   const state = useSnackbarState();
-  const contextValue = React38.useMemo(
+  const contextValue = React39.useMemo(
     () => ({ showSnackbar: state.showSnackbar }),
     [state.showSnackbar]
   );
@@ -13109,24 +13415,24 @@ function SnackbarMountedProvider({ children }) {
   ] });
 }
 function useTheme() {
-  const context = React38.useContext(ThemeContext);
+  const context = React39.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within <MD3ThemeProvider>.");
   }
   return context;
 }
 function useThemeMode() {
-  const { mode, setMode } = useTheme();
-  return { mode, setMode };
+  const { mode, setMode, effectiveMode } = useTheme();
+  return { mode, setMode, effectiveMode };
 }
 function TableOfContents({
   items,
   className,
   scrollAreaProps
 }) {
-  const [activeId, setActiveId] = React38.useState("");
-  const itemIds = React38.useMemo(() => items.map((i) => i.id), [items]);
-  React38.useEffect(() => {
+  const [activeId, setActiveId] = React39.useState("");
+  const itemIds = React39.useMemo(() => items.map((i) => i.id), [items]);
+  React39.useEffect(() => {
     if (typeof IntersectionObserver === "undefined") return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -13143,7 +13449,7 @@ function TableOfContents({
     }
     return () => observer.disconnect();
   }, [itemIds]);
-  const handleClick = React38.useCallback(
+  const handleClick = React39.useCallback(
     (e, id) => {
       var _a;
       e.preventDefault();
@@ -13279,7 +13585,7 @@ function TooltipCaretShape({
     }
   );
 }
-var PlainTooltip = React38.forwardRef(
+var PlainTooltip = React39.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -13336,7 +13642,7 @@ var PlainTooltip = React38.forwardRef(
   }
 );
 PlainTooltip.displayName = "PlainTooltip";
-var RichTooltip = React38.forwardRef(
+var RichTooltip = React39.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -13420,7 +13726,7 @@ var RichTooltip = React38.forwardRef(
 );
 RichTooltip.displayName = "RichTooltip";
 var VIEWPORT_PADDING = 8;
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React38.useLayoutEffect : React38.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React39.useLayoutEffect : React39.useEffect;
 function resolveAutoPlacement(spaceTop, spaceBottom, spaceLeft, spaceRight, tooltipWidth, tooltipHeight, spacing) {
   if (spaceTop >= tooltipHeight + spacing) return "top";
   if (spaceBottom >= tooltipHeight + spacing) return "bottom";
@@ -13480,7 +13786,7 @@ function clampToViewport(side, top, left, tooltipWidth, tooltipHeight) {
   return { top, left };
 }
 function useTooltipPosition(anchorRef, tooltipRef, placement, spacing, isVisible) {
-  const [position, setPosition] = React38.useState({
+  const [position, setPosition] = React39.useState({
     top: -9999,
     left: -9999,
     actualSide: placement === "auto" ? "top" : placement
@@ -13555,24 +13861,24 @@ function useTooltipState(config) {
     isPersistent = false,
     duration = 1500
   } = config != null ? config : {};
-  const [isVisible, setIsVisible] = React38.useState(initialVisible);
-  const dismiss = React38.useCallback(() => {
+  const [isVisible, setIsVisible] = React39.useState(initialVisible);
+  const dismiss = React39.useCallback(() => {
     setIsVisible(false);
     activeTooltipDismissals.delete(dismiss);
   }, []);
-  const show = React38.useCallback(() => {
+  const show = React39.useCallback(() => {
     for (const otherDismiss of activeTooltipDismissals) {
       if (otherDismiss !== dismiss) otherDismiss();
     }
     setIsVisible(true);
     activeTooltipDismissals.add(dismiss);
   }, [dismiss]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!isVisible || isPersistent) return;
     const timeoutId = setTimeout(dismiss, duration);
     return () => clearTimeout(timeoutId);
   }, [isVisible, isPersistent, duration, dismiss]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     return () => {
       activeTooltipDismissals.delete(dismiss);
     };
@@ -13629,20 +13935,20 @@ function TooltipBox({
 }) {
   const internalState = useTooltipState();
   const state = controlledState != null ? controlledState : internalState;
-  const anchorRef = React38.useRef(null);
-  const tooltipRef = React38.useRef(null);
-  const hoverTimeoutRef = React38.useRef(null);
-  const hideTimeoutRef = React38.useRef(null);
-  const pressTimeoutRef = React38.useRef(null);
+  const anchorRef = React39.useRef(null);
+  const tooltipRef = React39.useRef(null);
+  const hoverTimeoutRef = React39.useRef(null);
+  const hideTimeoutRef = React39.useRef(null);
+  const pressTimeoutRef = React39.useRef(null);
   const triggers = Array.isArray(trigger) ? trigger : [trigger];
-  const [mounted, setMounted] = React38.useState(false);
-  const [hasHoverSupport, setHasHoverSupport] = React38.useState(true);
-  const [prefersReducedMotion, setPrefersReducedMotion] = React38.useState(false);
-  React38.useEffect(() => {
+  const [mounted, setMounted] = React39.useState(false);
+  const [hasHoverSupport, setHasHoverSupport] = React39.useState(true);
+  const [prefersReducedMotion, setPrefersReducedMotion] = React39.useState(false);
+  React39.useEffect(() => {
     setMounted(true);
     setHasHoverSupport(!window.matchMedia("(hover: none)").matches);
   }, []);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     setPrefersReducedMotion(mediaQuery.matches);
     const onChange = (e) => setPrefersReducedMotion(e.matches);
@@ -13714,7 +14020,7 @@ function TooltipBox({
       hideDelay
     );
   };
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!state.isVisible) return;
     const onKeyDown = (e) => {
       var _a;
@@ -13726,8 +14032,8 @@ function TooltipBox({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [state.isVisible, state]);
-  const tooltipId = React38.useId();
-  const tooltipWithProps = React38.cloneElement(
+  const tooltipId = React39.useId();
+  const tooltipWithProps = React39.cloneElement(
     tooltip,
     {
       "data-side": position.actualSide,
@@ -13755,7 +14061,7 @@ function TooltipBox({
         onKeyDown: handleKeyDown,
         "aria-label": ariaLabel,
         "aria-describedby": state.isVisible ? tooltipId : void 0,
-        children: React38__namespace.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+        children: React39__namespace.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children })
       }
     ),
     mounted && reactDom.createPortal(
@@ -13864,6 +14170,8 @@ exports.MenuGroup = MenuGroup;
 exports.MenuItem = MenuItem;
 exports.MenuProvider = MenuProvider;
 exports.MenuTrigger = MenuTrigger;
+exports.NavigationBar = NavigationBar;
+exports.NavigationBarItem = NavigationBarItem;
 exports.NavigationRail = NavigationRail;
 exports.NavigationRailItem = NavigationRailItem;
 exports.PlainTooltip = PlainTooltip;
@@ -13932,6 +14240,7 @@ exports.applyTheme = applyTheme;
 exports.buildWavePath = buildWavePath;
 exports.cn = cn;
 exports.generateM3Theme = generateM3Theme;
+exports.resolveMode = resolveMode;
 exports.useAppBarScroll = useAppBarScroll;
 exports.useDOMRipple = useRipple;
 exports.useMediaQuery = useMediaQuery;